CODEWITHSUNDEEP
javascripthtmlmaterialize
Arianne
Arianne

Reputation: 69

materializecss carousel next method using button inside the slider (javascript)

I'm using materializecss carousel what i have right now is 2 button. when i click the "working" button (outside the carousel) the carousel goes to the next slide. But when i click the "not working" button (inside the carousel) it always goes to the first slide even you're in the first slide.

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

  window.next = function() {
    var el = document.querySelector(".carousel");
    var l = M.Carousel.getInstance(el);
    l.next(1);
  }
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="carousel">
  <a class="carousel-item red" href="#one!">
    <button class="btn next" onclick="next()">Not working</button>
  </a>
  <a class="carousel-item yellow" href="#two!"></a>
  <a class="carousel-item green" href="#three!"></a>
  <a class="carousel-item teal" href="#four!"></a>
  <a class="carousel-item blue" href="#five!"></a>
</div>
<button class="btn next" onclick="next()">Working</button>

I also used a method where if i click the "not working" button it will trigger "working" button click event..sadly same result.. What i want is the "not working" button should go to the next slide without using jquery

Upvotes: 1

Views: 2318

Answers (2)

Oliver
Oliver

Reputation: 335

This is for Materialize Version 1.0.0

HTML Example

                <a onclick="prev()" class="prev btn-floating btn waves-effect waves-light red"><i class="fas fa-chevron-left"></i></a>
    
                <a onclick="next()" class="next btn-floating btn waves-effect waves-light red"><i class="fas fa-chevron-right"></i></a>

            <div class="carousel carousel-slider center">
              <div class="carousel-fixed-item center">
                <a class="btn waves-effect white grey-text darken-text-2">button</a>
              </div>

              <div class="carousel-item amber white-text" href="#two!">
                <h2>Second Panel</h2>
                <p class="white-text">This is your second panel</p>
              </div>
              <div class="carousel-item green white-text" href="#three!">
                <h2>Third Panel</h2>
                <p class="white-text">This is your third panel</p>
              </div>
              <div class="carousel-item blue white-text" href="#four!">
                <h2>Fourth Panel</h2>
                <p class="white-text">This is your fourth panel</p>
              </div>
            </div>

Javascript Part

//the function below are functions that run after the Dom Content has been loaded
          document.addEventListener('DOMContentLoaded', function() {
                M.AutoInit();

               

                //carousel activation
                var elems = document.querySelectorAll('.carousel');
                var xinstances = M.Carousel.init(elems, 
                {
                  fullWidth: true,
                  indicators: true,
                  numVisible: 3
                });

                //carousel Next function
                window.next = function() {
                  var el = document.querySelector(".carousel");
                  var l = M.Carousel.getInstance(el);
                  l.next(1);
                }

                //carousel previous function
                window.prev = function() {
                  var el = document.querySelector(".carousel");
                  var l = M.Carousel.getInstance(el);
                  l.prev(1);
                }
           }

Upvotes: 1

Ahmad
Ahmad

Reputation: 12737

Each click inside the button element, is also a click inside the anchor tag. Both of these elements are doing conflicting actions, or actions that you don't want to take place. So you will have to stop one of them.

One way to do that is to tell each button to register the click event, and to stop telling its parent element about the click event, resulting in the anchor tag ignoring the click.

Since you don't want to use jquery, you will have to attach this behavior manually to each element.

var pages = document.querySelectorAll(".carousel-item button");

for(var i=0; i<pages.length;i++) {
    pages[i].addEventListener("click", function(e){
      e.stopPropagation();
    });
}


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

  window.next = function() {
    var el = document.querySelector(".carousel");
    var l = M.Carousel.getInstance(el);
    l.next(1);
  }
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="carousel">
  <a class="carousel-item red" href="#one!">
    <button class="btn next" onclick="next()">Not working</button>
  </a>
  <a class="carousel-item yellow" href="#two!"></a>
  <a class="carousel-item green" href="#three!"></a>
  <a class="carousel-item teal" href="#four!"></a>
  <a class="carousel-item blue" href="#five!"></a>
</div>
<button class="btn next" onclick="next()">Working</button>

Upvotes: 0

Related Questions