Materialisecss Карусель следующий метод с помощью кнопки внутри слайдера (JavaScript) - PullRequest
Новая
       7

Materialisecss Карусель следующий метод с помощью кнопки внутри слайдера (JavaScript)

0 голосов
/ 02 декабря 2018

Я использую карусель materializecss, теперь у меня есть 2 кнопки.когда я нажимаю «рабочую» кнопку (за пределами карусели), карусель переходит к следующему слайду.Но когда я нажимаю кнопку «не работает» (внутри карусели), она всегда переходит к первому слайду, даже если вы находитесь на первом слайде. 

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>

Я также использовал метод, при котором, если я нажму кнопку «не работает», это вызовет событие нажатия кнопки «работает» .. такой же результат .. Чтоя хочу, чтобы кнопка "не работает" должна перейти к следующему слайду без использования jquery

1 Ответ

0 голосов
/ 02 декабря 2018

Каждый щелчок внутри элемента кнопки также является щелчком внутри тега привязки.Оба эти элемента выполняют противоречивые действия или действия, которые вы не хотите совершать.Поэтому вам придется остановить один из них.

Один из способов сделать это - указать каждой кнопке зарегистрировать событие click и перестать сообщать родительскому элементу о событии click, что приведет к игнорированию тега привязки.щелчок.

Поскольку вы не хотите использовать 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>
...