Materialize CSS - Carousel inside Collapsible

Question

Materialize CSS - Carousel inside Collapsible

Navigation

#1 by (0 votes)

1

Using Materialize CSS v1.0.0 (without using JQuery), inserting a Carousel component into a Collapsible does not get the behavior expected (you can not see the image strip and the slide effect is damaged).

<!DOCTYPE html>
<html>
<head>
  <!--Import Google Icon Font-->
  <link type="text/css" rel="stylesheet" href="css/materialdesignicons.css"/>
  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
  <div class="carousel">
    <a class="carousel-item" href=""><img src="images/varelajp2.jpg"></a>
    <a class="carousel-item" href=""><img src="images/varelajp3.jpg"></a>
    <a class="carousel-item" href=""><img src="images/varelajp4.jpg"></a>
  </div>
  <ul class="collapsible">
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Carousel on it</div>
      <div class="collapsible-body">
        <div class="carousel" id="carouselSports">
          <a class="carousel-item" href=""><img src="images/varelajp2.jpg"></a>
          <a class="carousel-item" href=""><img src="images/varelajp3.jpg"></a>
          <a class="carousel-item" href=""><img src="images/varelajp4.jpg"></a>
        </div>
      </div>
    </li>
  </ul>
  <!--JavaScript at end of body for optimized loading-->
  <script type="text/javascript" src="js/materialize.min.js"></script> <!--No se inserta JQuery.js-->
  <script type="text/javascript">M.AutoInit();</script>
</body>
</html>

Some solutions suggest initializing the Carousel in the OnOpen callback (currently OnOpenStart) of the collapsible plugin. Something like:

$('.collapsible').collapsible({  
  onOpen: function() {  
    $('.carousel').carousel();  
  }  
})

The above solution is for Materialize CSS versions using JQuery.
It occurs to me to imitate it by initializing as indicated by the new version (with pure Javascript):

document.addEventListener('DOMContentLoaded', function() {
  var collapsibles         = document.querySelectorAll('.collapsible');
  var instanceCollapsibles = M.Collapsible.init(collapsibles,  {
    onOpenStart: function() {
      var carousels         = M.Carousel.getInstance(document.getElementById('carouselSports'));
      var instanceCarousels = M.Carousel.init(carousels, {
        indicators: true
      });
    }
  });
});

The OpenStart event of the Collapsible is well captured (tested with console.log ), but the Carousel still does not behave correctly.
Any clues?

javascript html5 materialize

asked by Juan Varela 17.10.2018 в 15:08

source

1 answer

Browse array and replace How to know the type of field in the database with EntityFramewors C # [UWP]

score 0 · Accepted Answer

You were fine only that the callback is onOpenEnd , like this:

document.addEventListener('DOMContentLoaded', function() {

  var collapsible = document.querySelectorAll('.collapsible');
  var options = {
    onOpenEnd: function(){
      var carousel = document.querySelectorAll('.carousel');
      var cInstances = M.Carousel.init(carousel,{
        indicators: true
      });
      
    }
  };
  var instances = M.Collapsible.init(collapsible, options);
  
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<ul class="collapsible">
  <li>
    <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
  <li>
    <div class="collapsible-header"><i class="material-icons">place</i>Carousel</div>
    <div class="collapsible-body">
      <div class="carousel">
        <a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a>
        <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2"></a>
        <a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3"></a>
        <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4"></a>
        <a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5"></a>
      </div>
    
    </div>
  </li>
  <li>
    <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
    <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
  </li>
</ul>
        
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>