シンプルスライダーを適応させる

Question

私はこのようにすべき基本的なスライダーを使用していますが、ページ上に複数のスライダーを置くと、右または左ボタンの1つがクリックされると同時にスライダーがすべります。

これらをそれぞれ独自のものにするにはどうすればよいですか？

の作業の例では、ここで見つけることができますありがとうござい

を与えられた任意の助けに感謝 - >https://codepen.io/zuraizm/pen/vGDHl < -

jQuery(document).ready(function ($) { 
 
    $('#checkbox').change(function(){ 
 
    setInterval(function() { 
 
     moveRight(); 
 
    }, 3000); 
 
    }); 
 

 
    var slideCount = $('#slider ul li').length; 
 
    var slideWidth = $('#slider ul li').width(); 
 
    var slideHeight = $('#slider ul li').height(); 
 
    var sliderUlWidth = slideCount * slideWidth; 
 

 
    $('#slider').css({ width: slideWidth, height: slideHeight }); 
 
    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); 
 
    $('#slider ul li:last-child').prependTo('#slider ul'); 
 

 
    function moveLeft() { 
 
    $('#slider ul').animate({ 
 
     left: + slideWidth 
 
    }, 200, function() { 
 
     $('#slider ul li:last-child').prependTo('#slider ul'); 
 
     $('#slider ul').css('left', ''); 
 
    }); 
 
    }; 
 

 
    function moveRight() { 
 
    $('#slider ul').animate({ 
 
     left: - slideWidth 
 
    }, 200, function() { 
 
     $('#slider ul li:first-child').appendTo('#slider ul'); 
 
     $('#slider ul').css('left', ''); 
 
    }); 
 
    }; 
 

 
    $('a.control_prev').click(function() { 
 
    moveLeft(); 
 
    }); 
 

 
    $('a.control_next').click(function() { 
 
    moveRight(); 
 
    }); 
 

 
});

#slider { 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin: 20px auto 0 auto; 
 
    border-radius: 4px; 
 
    width: 100% !important; 
 
    height: auto !important; 
 
} 
 

 
#slider ul { 
 
    position: relative; 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 200px; 
 
    list-style: none; 
 
} 
 

 
#slider ul li { 
 
    position: relative; 
 
    display: block; 
 
    float: left; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: auto; 
 
    height: auto; 
 
    background: #ccc; 
 
    text-align: center; 
 
    line-height: 300px; 
 
} 
 

 
a.control_prev, a.control_next, a.control_prev_1, a.control_next_1 { 
 
    position: absolute; 
 
    top: 40%; 
 
    z-index: 999; 
 
    display: block; 
 
    padding: 4% 3%; 
 
    width: auto; 
 
    height: auto; 
 
    background: #2a2a2a; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    font-weight: 600; 
 
    font-size: 18px; 
 
    opacity: 0.8; 
 
    cursor: pointer; 
 
} 
 

 
a.control_prev:hover, a.control_prev_1:hover, a.control_next:hover, a.control_next_1:hover { 
 
    opacity: 1; 
 
    -webkit-transition: all 0.2s ease; 
 
} 
 

 
a.control_prev, a.control_prev_1 { 
 
    border-radius: 0 2px 2px 0; 
 
} 
 

 
a.control_next, a.control_next_1 { 
 
    right: 0; 
 
    border-radius: 2px 0 0 2px; 
 
} 
 

 
.slider_option { 
 
    position: relative; 
 
    width: 100%; 
 
    margin: 10px auto; 
 
} 
 

 
.slider_option > label { 
 
    padding-top: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 

 
<div id="slider"> 
 
    <a href="javascript:void(0);" class="control_next">>></a> 
 
    <a href="javascript:void(0);" class="control_prev"><</a> 
 
    <ul> 
 
     <li><img src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg" alt="" class="img-responsive" /></li> 
 
     <li><img src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg" alt="" class="img-responsive" /></li> 
 
     <li><img src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg" alt="" class="img-responsive" /></li> 
 
     <li><img src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg" alt="" class="img-responsive" /></li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="slider_option"> 
 
    <input type="checkbox" id="checkbox"> 
 
    <label for="checkbox">Autoplay Slider</label> 
 
    </div>

Answer 1

あなたのすべてのコードはHTMLに基づいて要素を扱いますidの属性dは、ページ上の単一の要素に対して一意になるようにします。

すでにjQueryを使用しているので、ページの複数の要素に適用できるpluginの一部として関数を構造化することをお読みになることをお勧めします。