jquery abgerundete Bilder Slider

Question

Ich erstelle einen jquery Schieberegler von gerundeten Bildern. Hier ist 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>

Mein Problem ist, um es nach Klick machen bewegen auf "Links" und "Rechts" Tasten. Ich habe ein paar Ideen in meinem Kopf, weiß aber nicht, wie ich sie umsetzen soll. Ich denke, ich brauche den Index-Parameter von .active image und ändere es in -1 für "links" und +1 für "rechts", aber ich habe keine Ahnung, wie das geht. Vielleicht kann mir jemand einen Hinweis geben oder etwas Ähnliches zeigen.

Answer 1

Also konzeptionell, was Sie tun möchten, ist die "linke" CSS-Position Ihres Elements zu animieren. Das erste, was Sie brauchen, ist die Breite der einzelnen „gleitet“ wissen:

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

Dann, wenn Sie in der 3. Folie Folie wollen, zum Beispiel, unter der Annahme, dass bedeutet die dritte Folie in die weit Platzierung links des Schiebers, werden Sie so einfach tun, indem Sie die linke Eigenschaft Ihres ul-Element animieren:

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

zu schön, werden Sie wahrscheinlich wollen auch sicherstellen, wenn Sie zum allerletzten gleiten fragen z. B. gleitet es nicht ganz nach links und hat dann rechts nichts mehr zu zeigen. Sie möchten sicherstellen, dass der linke absolute Wert, den Sie berechnen, immer kleiner ist als die volle innere Breite Ihres Schiebereglers.

Sie müssen sicherstellen, dass der Container um Ihre ist auf overflow: hidden; in css, natürlich, mit position: relative; top: 0; left: 0; und das sollte es tun!

Hoffe, das hilft!

Answer 2

Ich habe es getan. Es war so einfach. Hier ist der Code:

$('#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); 
});