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

Question

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

Answer 1

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>