How to initialize carousel full-width and indicators with vanilla java-script in materialize?

Question

I am trying to enable indicators and full-width on carousel slider with vanilla Javascript in materialize but miserably failed.

I have tried it with jquery and it worked.

Here is my js vanilla script:

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

How to make it work?

Answer 1

Welcome to StackOverflow :)

Explanation

As from the docs in the .init() method you have to pass as first parameter the element you'd like to init. This is why your code didn't work. Materialize simply didn't know what element you wanted to initialize :)

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

Btw, since you're using the .AutoInit() method at the same time, you should exclude the manually initialized element from the AutoInit...

From the Docs:

Ignoring Elements

If you want M.AutoInit() to ignore a certain element, you can add the class .no-autoinit to the element and it will not be initialized by autoinit.

---

Final code

Here is the code you should use as reference for your purpose. For the sake of completeness i've added 2 other modules from MaterializeCss (Autocomplete and Dropdown) which are initialized with the .AutoInit(). You can see that only the Carousel is not Auto-Initialized thanks to the .no-autoinit class

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>