jquery rounded images slider

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>

Моя проблема заключается, чтобы сделать это движение после щелчка на «левых» и «правых» кнопок. У меня есть несколько идей в моей голове, но я не знаю, как их реализовать. Я думаю, мне нужно получить индексный параметр .active изображения и изменить его на -1 для «left» и +1 для «right», но я не знаю, как это сделать. Может быть, кто-нибудь может дать мне подсказку или показать что-то похожее на это.

Answer 1

Так что концептуально, что вы хотите сделать, это анимировать «левую» позицию CSS вашего элемента. Поэтому первое, что вам нужно, это знать ширину каждую «горки»:

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

Затем, когда вы хотите, чтобы скользить на 3-й слайд, например, при условии, что означает размещение 3-го слайда к далекому слева от ползунка, вы будете делать так просто анимировать левую свойство вашего уль элемента:

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

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

Вам необходимо убедиться, что контейнер вокруг вашего установлен в overflow: hidden; в css, конечно же, wihta 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); 
});