Carousel materialize does not work

Asked

Viewed 233 times

-1

I’m using the default startup code of materialize, but it doesn’t work

Carousel

<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>

    /* inicializacao */

    document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.carousel');
    var instances = M.Carousel.init(elems, options);
  });

Screenshot of the IDE with code

javascript html materialize

  • Good morning, Before anything, start doing the tour to understand how the community works; then read the How to ask to see how you can improve your question. Post your full code and so it can be helped and will help others in the future.

1 answer

1

So, as you can see in the example below, it works perfectly. The problem: you simply copied the documentation code, and the documentation is to demonstrate how things are done and what you can do. Note that the image you put in the question is the same as the documentation, but, that options is to demonstrate that you can enter the options for Carousel and not simply put the word option there and that’s it. Probably if you open the browser console you use you will see an error, exactly by this option that does not exist. 

document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.carousel');
  var instances = M.Carousel.init(elems);
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>


<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>

Tip: First learn the basics (Html, Css and Javascript) and then go to these CSS frameworks (Bootstrap, Materialize, etc.) and Javascript.

Browser other questions tagged javascript html materialize

You are not signed in. Login or sign up in order to post.