JQuery несколько слайдеров

Как я могу исправить приведенный ниже код jQuery, чтобы несколько ползунков работали правильно с использованием имен классов CSS (а не идентификаторов)?

Как вы можете видеть в CodePen, он повсюду и работает не так, как ожидалось. Ползунки работают некорректно.

CodePen

HTML

<body>
  <div>
    <div class = "slider-btn">
      <button class = "slider-prev"><</button>
      <button class = "slider-next">></button>
    </div>
    <div class = "slider">
      <div class = "slide active">
        <h2>Slide 1</h2>
      </div>
      <div class = "slide">
        <h2>Slide 2</h2>
      </div>
    </div> 
    <div>
      <p>Some other content here</p> 
    </div>
    <div class = "slider-btn">
      <button class = "slider-prev"><</button>
      <button class = "slider-next">></button>
    </div>      
    <div class = "slider">
      <div class = "slide active">
        <h2>Slide 1</h2>
      </div>
      <div class = "slide">
        <h2>Slide 2</h2>
      </div>
    </div> 
    <div>
      <p>Some other content here</p> 
    </div>      
  </div>
</body>

CSS

.slider {
  position: relative;
  width: 80%;
}

.slide {
    position: absolute;
    opacity: 0;
}

.active {
    transition: opacity 500ms ease;
    opacity:1;
}

var allSlides = $('.slide');
var activeSlide = 0;

setInterval('autoSlide()', 4000);

$(".slider-next").click(function() {
  if (activeSlide+1 >= allSlides.length) {
    allSlides.eq(activeSlide).removeClass("active");
    activeSlide = 0;
    allSlides.eq(0).addClass("active");
  }
  else {
    allSlides.eq(activeSlide).removeClass("active");
    activeSlide++;
    allSlides.eq(activeSlide).addClass("active");
  }
});
$(".slider-prev").click(function() {
  if (activeSlide-1 < 0) {
    allSlides.eq(0).removeClass("active");
    activeSlide = allSlides.length-1;
    allSlides.eq(activeSlide).addClass("active");
  }
  else {
    allSlides.eq(activeSlide).removeClass("active");
    activeSlide--;
    allSlides.eq(activeSlide).addClass("active");
  }
});

function autoSlide() {
    if (activeSlide+1 >= allSlides.length) {
      allSlides.eq(activeSlide).removeClass("active");
      activeSlide = 0;
      allSlides.eq(0).addClass("active");
    }
    else {
      allSlides.eq(activeSlide).removeClass("active");
      activeSlide++;
      allSlides.eq(activeSlide).addClass("active");
    }
}

javascript jquery html css

29.06.2018 16:59

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

Я не был уверен, что вы делаете со слайдерами, но мне удалось подключить обработчики и начать работу. Я устанавливаю массив для ползунков, затем при загрузке страницы подключаю обработчики к ползункам. Когда щелкают по ползункам, я думаю, вы хотите перебрать свой индекс ползунков и установить классы css в активное состояние. Я сделал это здесь. Имейте в виду, что выбор ползунка по индексу может быть нулевым. Адаптируйте ответ к своему использованию.

<!DOCTYPE html>

<html lang = "en" xmlns = "http://www.w3.org/1999/xhtml">
<head>
    <meta charset = "utf-8" />
    <title></title>
    <link id = "bs-css" href = "https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel = "stylesheet">
    <link id = "bsdp-css" href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel = "stylesheet">

    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
    <style type = "text/css">
        .slider {
            position: relative;
            width: 80%;
        }

        .slide {
            position: relative;
            opacity: 0;
        }

        .active {
            transition: opacity 500ms ease;
            opacity: 1;
        }
    </style>

    <script type = "text/javascript">
        //set the array to the slide div's we have here
        var allSlides = document.getElementsByClassName("slide");

        var activeSlide = 0;//start at 0

        setInterval('autoSlide()', 4000);
        $(function () { //when the document is ready, wire up the click functions
            $(".slider-next").click(function () {

                if (activeSlide + 1 >= allSlides.length) {
                    allSlides[activeSlide].className  = ""; //remove any css class on this item
                    activeSlide = 0;
                    allSlides[0].className["active"]; //careful, these items maybe null 
                }
                else {
                    allSlides[activeSlide].className = "";
                    activeSlide++;
                    allSlides[activeSlide].className = "active";
                }
            });
            $(".slider-prev").click(function () {
                if (activeSlide - 1 < 0) {
                    allSlides[0].className  = "";
                    activeSlide = allSlides.length - 1;
                    allSlides[activeSlide].className= "active";
                }
                else {
                    allSlides[activeSlide].className= "";
                    activeSlide--;
                    allSlides[activeSlide].className  = "active";
                }
            });
        });
        function autoSlide() {
            if (activeSlide + 1 >= allSlides.length) {
                allSlides[activeSlide].className = "";
                activeSlide = 0;
                allSlides[0].className  = "active";
            }
            else {
                allSlides[activeSlide].className = ""; 
                activeSlide++;
                allSlides[activeSlide].className  = "active";
            }
        }
    </script>
</head>
<body>
    <div>
        <div class = "slider-btn">
            <button class = "slider-prev"><</button>
            <button class = "slider-next">></button>
        </div>
        <div class = "slider">
            <div class = "slide active">
                <h2>Slide 1</h2>
            </div>
            <div class = "slide">
                <h2>Slide 2</h2>
            </div>
        </div>
        <div>
            <p>Some other content here</p>
        </div>
        <div class = "slider-btn">
            <button class = "slider-prev"><</button>
            <button class = "slider-next">></button>
        </div>
        <div class = "slider">
            <div class = "slide active">
                <h2>Slide 1</h2>
            </div>
            <div class = "slide">
                <h2>Slide 2</h2>
            </div>
        </div>
        <div>
            <p>Some other content here</p>
        </div>
    </div>
</body>
</html>

спасибо, однако, похоже, это не работает, так как просто случайным образом выводится «Слайд 2» в каждом слайдере, не скрывая «Слайд 1». Ползунки должны одновременно показывать только один слайд с автовоспроизведением и кнопки «следующий / предыдущий», которые также, похоже, не работают и выдают консольную ошибку «Uncaught TypeError: Cannot set property 'className' of undefined».

— 29.06.2018 22:11

29.06.2018 21:20