Блог

У меня возникли проблемы с созданием карусели с помощью jQuery: в настоящее время я добавляю и удаляю классы с помощью next () или prev (), но я хотел бы бесконечно перебирать все слайды при нажатии. Вот прекрасный пример того, что я хотел бы сделать: mfglabs.com.

Вот мой код:

 <div class="container-slider">
        <ul>
            <li class="slide current">
                <article>
                 // My content
                </article>
            </li>
            <li class="slide">
                <article>
                // My content
                </article>
            </li>
        </ul>
</div>
  

И вот мой jQuery :

 $(document).ready(function() {
    $(".next").click(function () {
        $(".slide").removeClass("current");
        $(".slide").next().addClass("current");   
    });
    $(".prev").click(function () {
        $(".slide").removeClass("current");
        $(".slide").prev().addClass("current");   
    });
});
  

Спасибо!

Класс ‘ slide ‘ является универсальным для всех элементов. Вы можете применить обычные стили CSS, используя это, но не можете выбрать один конкретный элемент с помощью этого класса ‘ slide ‘. Вам нужно выбрать элемент по чему-то уникальному. в данном случае — его класс ‘ current ‘.

Это может быть хорошим подходом-

 $(document).ready(function() {
        $(".next").click(function () {
            if($(".current").next().length){
                // if Next element Exists
                var nextElem = $(".current").next();
                $(".current").removeClass("current");
                nextElem.addClass("current");   
            }else{
                // No Next item i.e. reached Last item
                // Selecting first item to make it 'current'
                var firstElem = $(".current").parent().children().first();
                $(".current").removeClass("current");
                firstElem..addClass("current");   
            }
        });
        $(".prev").click(function () {
            // something similar
        });
    });