使用滑块内的按钮实现 carousel next 方法 (javascript)

Question

我正在使用 materializecss carousel 我现在拥有的是 2 个按钮。当我单击 "working" 按钮（轮播外）时，轮播转到下一张幻灯片。但是，当我单击 "not working" 按钮（在旋转木马内）时，它总是转到第一张幻灯片，即使您在第一张幻灯片中也是如此。

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>

我还使用了一种方法，如果我单击 "not working" 按钮，它将触发 "working" 按钮单击事件。遗憾的是，结果相同。我想要的是 "not working" 按钮应该在不使用 jquery

的情况下转到下一张幻灯片

Answer 1

按钮元素内的每次点击，也是锚标记内的一次点击。这两个元素都在执行相互冲突的操作，或者您不希望发生的操作。所以你必须停止其中之一。

一种方法是告诉每个按钮注册点击事件，并停止将点击事件告知其父元素，导致锚标记忽略点击。

由于您不想使用 jquery，因此您必须手动将此行为附加到每个元素。

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>

Answer 2

这是针对 Materialise 版本 1.0.0

HTML 例子

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

//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);
                }
           }

使用滑块内的按钮实现 carousel next 方法 (javascript)

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

html

javascript

materialize