Bootstrap: przesuń tylko jedno zdjęcie spośród wielu obrazów w elemencie karuzeli.

Wdrażam karuzelę Bootstrap do wyświetlania wielu miniatur obrazu (4 obrazy) w każdym elemencie karuzeli. Kiedy kliknę na następną lub poprzednią kontrolę, powinien przesuwać tylko 1 obraz z 4. Jak mogę to osiągnąć.Bootstrap: przesuń tylko jedno zdjęcie spośród wielu obrazów w elemencie karuzeli.

Próbowałem już tego przykładu: suggested by skelly, ale po zaimplementowaniu pokazuje tylko jeden obraz na karuzeli, a po kliknięciu na kontrolkę prev/next wyświetla się jeszcze jedno zdjęcie, oprócz wcześniejszego. Potrzebuję czterech obrazów, które mają być wyświetlane przez cały czas. jeżeli 1 obrazek z lewej strony zgaśnie, to w tym samym czasie powinien być wstawiony jeszcze jeden obraz z prawej strony. Dodałem "jquery/1.11.1/jquery.min.js" i "bootstrap-3.2.0-dist/bootstrap.js" dodatkowo, ale nie działało.

mój kod jest realizowane jako:

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="./bootstrap-3.2.0-dist/js/bootstrap.js"></script> 

<script type="text/javascript"> 
$('#myCarousel').carousel({ 
interval: 4000 
}) 

$('.carousel .item').each(function(){ 
var next = $(this).next(); 
if (!next.length) { 
next = $(this).siblings(':first'); 
} 
next.children(':first-child').clone().appendTo($(this)); 

for (var i=0;i<2;i++) { 
next=next.next(); 
if (!next.length) { 
    next = $(this).siblings(':first'); 
} 

next.children(':first-child').clone().appendTo($(this)); 
} 
}); 
</script> 

<style type="text/css"> 
.carousel-inner .active.left { left: -25%; } 
.carousel-inner .next  { left: 25%; } 
.carousel-inner .prev { left: -25%; } 
.carousel-control  { width: 4%; } 
.carousel-control.left,.carousel-control.right {margin-left:15px;background-image:none;} 
</style> 

</head> 

<body> 
<div class="col-md-12 text-center"><h3>Bootstrap 3 Multiple Slide Carousel</h3></div> 
<div class="col-md-6 col-md-offset-3"> 
<div class="carousel slide" id="myCarousel"> 
<div class="carousel-inner"> 
<div class="item active"> 
    <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=1" class="img-responsive"></a></div> 
</div> 
<div class="item"> 
    <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/e477e4/fff&amp;text=2" class="img-responsive"></a></div> 
</div> 
<div class="item"> 
    <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=3" class="img-responsive"></a></div> 
</div> 
<div class="item"> 
    <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f4f4f4&amp;text=4" class="img-responsive"></a></div> 
</div> 
<div class="item"> 
    <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f566f5/333&amp;text=5" class="img-responsive"></a></div> 
</div> 
<div class="item"> 
    <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/f477f4/fff&amp;text=6" class="img-responsive"></a></div> 
</div> 
<div class="item"> 
    <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive"></a></div> 
</div> 
<div class="item"> 
    <div class="col-xs-3"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&amp;text=8" class="img-responsive"></a></div> 
</div> 
</div> 
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> 
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> 
</div> 
</div> 

</body> 
</html>

Wszelkie sugestie będą bardzo mile widziane.

Źródło

2014-07-24 NawazSE

Zobacz przykład: http://bootply.com/94452 – ZimSystem

Dzięki @skelly za podstawową pracę tutaj. Dla przyszłych pracowników Google zmodyfikowałem to tak, aby zwinąć, aby pokazać 2, przenieść 1 na tablecie i pokazać 1, przenieść 1 na telefon: http://www.bootply.com/PMDIAzc1Qo – rtpHarry

Próbowałem zaadaptować ten przykład do * * witryna jekyll ** i nie działała poprawnie, po wielu godzinach walki w końcu udało mi się ją uruchomić poprzez zamknięcie ** kodu javascript ** wewnątrz '$ (document) .ready (function() {' ** javascript ** ' } ' –

Zaimplementowałem suwak od bootply, ale poprzedni przycisk nie działa zgodnie z oczekiwaniami. Naprawiłem to, dodając .carousel-inner .active.right { left: 25%; } w pliku CSS.

Źródło

2014-11-10 18:09:15 Alex

twoje rozwiązanie naprawiło mój problem dzięki –

Podziękowania dla @skelly i Alex za podstawową pracę tutaj Dla przyszłych pracowników Google'a zmodyfikowałem to tak, że zwija się, aby pokazać 2, przenieść 1 na tablecie i pokazać 1, przenieść 1 na telefon: http://www.bootply.com/PMDIAzc1Qo – rtpHarry

Dzięki temu działa idealnie. –

Znalazłem, że działa Skelly's suggestion: jeden obraz jest usuwany po dodaniu innego, tak że są wyświetlane cztery obrazy w tym samym czasie.

Źródło

2014-08-19 14:47:21 mongol

Bootstrap: przesuń tylko jedno zdjęcie spośród wielu obrazów w elemencie karuzeli.

Odpowiedz

Powiązane problemy