jquery rounded imagesスライダー

Question

丸い画像のjqueryスライダーを作成しています。ここではHTML

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

 

 
    var $lis = $('ul').find('li'), 
 
    length = $lis.length; 
 

 
    $lis.each(function(index, item) { 
 
    $(item).attr('data-id', index); 
 
    }); 
 

 

 
    function slider($lis, index, length) { 
 
    $lis.each(function(index, item) { 
 
     item.className = ''; 
 
    }); 
 
    index += length; 
 
    $($lis[index % length]).addClass('active'); 
 
    $($lis[(index - 1) % length]).addClass('left1'); 
 
    $($lis[(index - 2) % length]).addClass('left2'); 
 
    $($lis[(index + 1) % length]).addClass('right1'); 
 
    $($lis[(index + 2) % length]).addClass('right2'); 
 
    } 
 

 

 
    slider($lis, 2, length); 
 

 
    $lis.on('click', function(e) { 
 
    var id = parseInt($(e.target).parents('li').attr('data-id')); 
 
    slider($lis, id, length); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="peopleSlider" class="container text-center"> 
 
    <div class="row"> 
 
    <a href="#" class="scrollLeft" id="leftArrow">Left</a><a href="#" class="scrollRight" id="rightArrow">Right</a> 
 
    <ul> 
 
     <li class="left2"> 
 
     <img src="img/1.png" width="150" height="150"> 
 
     </li> 
 

 
     <li class="left1"> 
 
     <img src="img/2.png" width="150" height="150"> 
 
     </li> 
 

 
     <li class="active"> 
 
     <img src="img/3.png" width="150" height="150"> 
 
     </li> 
 

 
     <li class="right1"> 
 
     <img src="img/4.png" width="150" height="150"> 
 
     </li> 
 

 
     <li class="right2"> 
 
     <img src="img/5.png" width="150" height="150"> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
</div>

がある私の問題は、それが「左」と「右」ボタンをクリックした後に移動することです。私は頭の中にいくつかのアイデアを持っていますが、それらを実装する方法はわかりません。私はアクティブな画像のインデックスパラメータを取得し、 "左"と+1 "右"のためにそれを変更する必要があると思うが、私はこれを行う手掛かりがありません。ある人が私にヒントを与えたり、これに似た何かを見せることができるかもしれません。

Answer 1

概念上、あなたがしたいことは、あなたの要素の「左の」CSS位置をアニメートすることです。だから、あなたが必要とする最初の事は、各「スライド」の幅を知ることです。

var slide_width = $lis.first().outerWidth(true); 

その後、あなたは、例えば、第三のスライドにスライドするときに、それははるかに第三のスライドを置くことを意味と仮定しますあなたのスライダーを左に、あなたは自分のul要素の左のプロパティをアニメーション化することで、そうでしょう：

$('ul').animate({left: (0 - ((slide_index) * slide_width)) + "px"}); 

いいことには、あなたはおそらくも、あなたは非常に最後までスライドして頼めばことを確認したいと思いますたとえば、スライドさせて左にずらしてから、右に何も表示しないでください。あなたが計算する左の絶対の値が常にスライダの完全なinnerWidthよりも小さいことを確認したいとします。

あなたの周りのコンテナがoverflow: hidden;に設定されていることをcssで確認する必要があります。もちろん、position: relative; top: 0; left: 0;とする必要があります。

希望すると便利です。

Answer 2

私はそれをしました。とてもシンプルでした。コードは次のとおりです。

$('#leftArrow').click(function(e){ 
    var id = parseInt($('.left1').attr('data-id')); 
    slider($lis,id,length); 
}); 
$('#rightArrow').click(function(e){ 
    var id = parseInt($('.right1').attr('data-id')); 
    slider($lis,id,length); 
});