Как инициализировать карусель в полном размере и индикаторы с помощью ванильного java-скрипта в материализации?

Question

Я пытаюсь включить индикаторы и полноразмерную на карусельном слайдере с ванильным Javascript в материализации, но с треском провалился.

Я пробовал это с jquery, и это сработало.

Вот мой скрипт js vanilla:

<script>
    M.AutoInit();
    var instance = M.Carousel.init({fullWidth: true, indicators: true});
</script>

Как заставить это работать?

Answer 1

Добро пожаловать в StackOverflow:)

Объяснение

Начиная с документов в методе .init(), вы должны передать в качестве первого параметра элемент, который вы хотите инициализировать. Вот почему ваш код не работает. Материализация просто не знала какой элемент вы хотели бы инициализировать:)

document.addEventListener('DOMContentLoaded', function() {
    M.AutoInit();
    var options = {
        fullWidth: true, 
        indicators: true
    };
    var elem = document.querySelector('.carousel');
    var instance = M.Carousel.init(elem, options);
});

Кстати, поскольку вы используете метод .AutoInit() одновременно, вы должны исключить инициализированный вручную элемент из AutoInit ...

Из Документов :

Игнорирование элементов

Если вы хотите, чтобы M.AutoInit() игнорировал определенный элемент, вы можете добавить класс .no-autoinit к элементу, и он не будет инициализирован autoinit.

---

Финальный код

Вот код, который вы должны использовать для справки. Ради полноты я добавил 2 других модуля из MaterializeCss ( Autocomplete и Dropdown ), которые инициализируются с помощью .AutoInit(). Вы можете видеть, что только Карусель не инициализируется автоматически благодаря классу .no-autoinit

document.addEventListener('DOMContentLoaded', function() {
  M.AutoInit();

  var options = {
    fullWidth: true,
    indicators: true
  };
  var elems = document.querySelector('.carousel.no-autoinit');
  console.log(elems)
  var instances = M.Carousel.init(elems, options);
})

<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="row">
  <div class="col s12">
    <div class="row">
      <div class="input-field col s12">
        <i class="material-icons prefix">textsms</i>
        <input type="text" id="autocomplete-input" class="autocomplete">
        <label for="autocomplete-input">This is auto-initialized!</label>
      </div>
    </div>
  </div>
</div>

<!-- Dropdown Trigger -->
<a class='dropdown-trigger btn' href='#' data-target='dropdown1'>This is auto-initialized too!</a>

<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider" tabindex="-1"></li>
  <li><a href="#!">three</a></li>
  <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
  <li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
</ul>

<div class="carousel carousel-slider no-autoinit">
  <a class="carousel-item" href="#one!"><img src="https://lorempixel.com/800/400/food/1"></a>
  <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/800/400/food/2"></a>
  <a class="carousel-item" href="#three!"><img src="https://lorempixel.com/800/400/food/3"></a>
  <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/800/400/food/4"></a>
</div>