不相互控制的多个自定义轮播

Question

我是 JQuery / JavaScript 的新手，但我为网站制作了轮播，我想知道如何让按钮控制各自的轮播。

这是一个 JSFiddle - https://jsfiddle.net/z6q6bgzq/

HTML -

<div>
  <div class="carousel-slide">
    <div class="focus">
      SLIDE 1
    </div>
    <div>
      SLIDE 2
    </div>
    <div>
      SLIDE 3
    </div>
    <div>
      SLIDE 4
    </div>
    <div>
      SLIDE 5
    </div>
  </div>
  <div style="position: relative; top:20px;">
    <button class="arrow left">&lt;---</button>
    <button class="arrow right">---></button>
  </div>
</div>

<div style="position: relative; top:20px;">
  <div class="carousel-slide">
    <div class="focus">
      SLIDE 1
    </div>
    <div>
      SLIDE 2
    </div>
  </div>
  <div style="position: relative; top:20px;">
    <button class="left">&lt;---</button>
    <button class="right">---></button>
  </div>
</div>

jquery:

$(document).ready(function(){

    $(".right").click(function(){
        var $next = $(".focus").removeClass("focus").next("div",".carousel-slide");
        if ($next.length){
            $next.addClass("focus");
        }else{
            $("div:first",".carousel-slide").addClass("focus");
        }
    });

    $(".left").click(function){
        var $prev = $(".focus").removeClass("focus").prev("div",".carousel-slide");
        if ($prev.length){
            $prev.addClass("focus");
        }else{
            $("div:last",".carousel-slide").addClass("focus");
        }
    });
});

Answer 1

你可以这样做：

$(document).ready(function(e){
    
        $(".right").click(function(e){
            
            var $next = $(this).parent().prev().find(".focus").removeClass("focus").next("div");
            if ($next.length){
                $next.addClass("focus");
            }else{
               $(this).parent().prev().children().first().addClass("focus");
            }
        });

        $(".left").click(function(e){
            var $prev = $(this).parent().prev().find(".focus").removeClass("focus").prev("div");
            if ($prev.length){
                $prev.addClass("focus");
            }else{
                $(this).parent().prev().children().last().addClass("focus");
            }
        });
});

.carousel-slide > div{
    transition: opacity 400ms;
    opacity: 0;
    position: absolute;
}
.carousel-slide > .focus{
    opacity: 1;
    position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            
            <div class="carousel-slide"> <!--previous -->
                <div class="focus">
                    SLIDE 1
                </div>
                <div>
                    SLIDE 2
                </div>
                <div>
                    SLIDE 3
                </div>
                <div>
                    SLIDE 4
                </div>
                <div>
                    SLIDE 5
                </div>
            </div>
            <div style="position: relative; top:20px;"> <!--parent-->
                <button class="arrow left">&lt;---</button>
                <button class="arrow right">---></button>
            </div>
             
            
            <div style="position: relative; top:20px;">
            <div class="carousel-slide">
                <div class="focus">
                    SLIDE 1
                </div>
                <div>
                    SLIDE 2
                </div>
            </div>
              <div style="position: relative; top:20px;">
                  <button class="left">&lt;---</button>
                  <button class="right">---></button>
              </div>
           
</div>

因此，您必须相应地更改选择器 ($prev/$next vars) 和其他一些东西。为了便于理解，我在 HTML 中做了评论。您必须遍历 DOM，才能找到父按钮 div 和上一个兄弟按钮。 Now, when selectors are not 'greedy' (you aren't targeting all divs with .carousel-slide class on page), all should work fine.

P.S。如果您保持当前 HTML 结构，您可以通过这种方式添加更多轮播。

Answer 2

所以基本上，您需要一些东西来识别轮播 1 和轮播 2？这就是 ID 的用武之地。

$(document).ready(function(e){

        $("#C1Right").click(function(e){
            var $next = $("#carousel1 .focus").removeClass("focus").next("div",".carousel-slide");
           if ($next.length){
                $next.addClass("focus");
            }else{
                $("div:first","#carousel1 .carousel slide").addClass("focus");
            }
        });

        $("#C1Left").click(function(e){
            var $prev = $("#carousel1 .focus").removeClass("focus").prev("div",".carousel-slide");
            if ($prev.length){
                $prev.addClass("focus");
            }else{
                $("div:last","#carousel1 .carousel-slide").addClass("focus");
            }
    });

$("#C2Right").click(function(e){
            var $next = $("#carousel2 .focus").removeClass("focus").next("div",".carousel-slide");
            if ($next.length){
                $next.addClass("focus");
            }else{
                $("div:first","#carousel2 .carousel-slide").addClass("focus");
            }
        });

        $("#C2Left").click(function(e){
            var $prev = $("#carousel2 .focus").removeClass("focus").prev("div",".carousel-slide");
            if ($prev.length){
                $prev.addClass("focus");
            }else{
                $("div:last","#carousel2 .carousel-slide").addClass("focus");
            }
        });


    });

不相互控制的多个自定义轮播

multiple custom carousels that dont control each other

html

jquery

carousel