Bootstrap Karussell bewegen einzelnes Element in einem einzigen Klick

Ich habe dieses KarussellBootstrap Karussell bewegen einzelnes Element in einem einzigen Klick

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

.carousel-inner .active.left { left: -25%; } 
 
.carousel-inner .next  { left: 25%; } 
 
.carousel-inner .prev \t \t { left: -25%; } 
 
.carousel-control \t \t \t { width: 4%; } 
 
.carousel-control.left,.carousel-control.right {margin-left:15px;background-image:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<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>

https://jsfiddle.net/r5twtm22/

dieses feine arbeitet.

Ich muss nur einzelne Bilder auf einmal verschieben. Es bewegt sich alle 4 Bilder ..

Quelle

2016-06-06 Atul Sharma

wie meinst du das? Du willst nur ein Bild zeigen? denn wenn du einen bewegst, musst du den Rest bewegen ... –

@ Håkan aktuell bewegt sich die ganze Reihe Wie wenn 1,2,3,4 angezeigt wird, dann wird als nächstes() zuerst 1,2,3,4 nach bewegt links und dann neu 2,3,4,5 wird hochkommen .. rechts. Ich muss bewegen wie, wenn 1,2,3,4 angezeigt wird die nächste() wird 1 aus dem sichtbaren Teil und 5 auf der Rückseite hinzufügen. –

ist das nicht das Gleiche? –

Aus irgendeinem Grund zeigt Snippet nicht das genaue Ergebnis. Bitte überprüfen Sie die Geige

FIDDLE (sauber und gut funktionierende Version)

$('#myCarousel').carousel({ 
 
    interval: 10000 
 
}) 
 

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

#myCarousel .carousel-inner .active.left { 
 
    left: -33%; 
 
} 
 
#myCarousel .carousel-inner .active.right { 
 
    left: 33%; 
 
} 
 
#myCarousel .carousel-inner .next { 
 
    left: 33%; 
 
} 
 
#myCarousel .carousel-inner .prev { 
 
    left: -33%; 
 
} 
 
#myCarousel .carousel-control.left { 
 
    background-image: none; 
 
} 
 
#myCarousel .carousel-control.right { 
 
    background-image: none; 
 
} 
 
#myCarousel .carousel-inner .item { 
 
    background: white; 
 
    transition: all ease .5s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<div id="myCarousel" class="carousel slide"> 
 

 
    <div class="carousel-inner"> 
 
    <div class="item active"> 
 
     <div class="col-xs-4"> 
 
     <a href="#"> 
 
      <img src="http://placehold.it/500/bbbbbb/fff&amp;text=1" class="img-responsive"> 
 
     </a> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <div class="col-xs-4"> 
 
     <a href="#"> 
 
      <img src="http://placehold.it/500/CCCCCC&amp;text=2" class="img-responsive"> 
 
     </a> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <div class="col-xs-4"> 
 
     <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-4"> 
 
     <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-4"> 
 
     <a href="#"> 
 
      <img src="http://placehold.it/500/fcfcfc/333&amp;text=5" class="img-responsive"> 
 
     </a> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <div class="col-xs-4"> 
 
     <a href="#"> 
 
      <img src="http://placehold.it/500/f477f4/fff&amp;text=6" class="img-responsive"> 
 
     </a> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div>

Quelle

2016-06-06 05:43:17

Ich glaube wirklich nicht, dass es das Ergebnis ist, das er erwartet hat. Warum müssen Sie alle Elemente verschieben? er muss nur einen bewegen. –

Überprüfen Sie die Geige, es funktioniert gut. Ich weiß nicht, warum dieses merkwürdige Ding in diesem Schnipsel passiert. :/ –

Es erzeugt Unschärfe-Effekt für den Text in "Element" beim Scrollen. Gibt es irgendwelche Arbeiten, um zu vermeiden, dass Text verschwimmt? Ich habe es teilweise gelöst, indem ich einen weißen Hintergrund zu "item" hinzugefügt habe und dieser Weg ist nicht transparent, so dass man nicht sieht, dass die zweite Reihe hinterher gleitet. Irgendeine bessere Idee? – StefaDesign

ich das gleiche Problem hatte, und ich habe es nur Schlitten durch ein Element zu eine Zeit durch Hinzufügen dieses Codes zum css:

#myCarousel .carousel-inner .item { 
    background: white; 
    transition: transform; 
}

Versuchen Sie folgendes: JS:

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

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;} 

#myCarousel .carousel-inner .item { 
    background: white; 
    transition: transform; 
}

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title></title> 
    <link rel="stylesheet" href="bootstrapCarousel.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <!-- <script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-transition.js"></script> 
    <script type="text/javascript" src="http://twitter.github.io/bootstrap/assets/js/bootstrap-carousel.js"></script> --> 
    </head> 
    <body> 
    <div class="col-md-12 text-center"><h3>Product Carousel</h3></div> 

<div class="col-md-6 col-md-offset-3"> 
<div class="carousel slide row" data-ride="carousel" data-type="multi" data-interval="3000" id="myCarousel"> 
    <div class="carousel-inner"> 
    <div class="item active"> 
     <div class="col-md-3 col-sm-6 col-xs-12"><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-md-3 col-sm-6 col-xs-12"><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-md-3 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=3" class="img-responsive" /></a></div> 
    </div> 
    <div class="item"> 
     <div class="col-md-3 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/f4f4f4&amp;text=4" class="img-responsive" /></a></div> 
    </div> 
    <div class="item"> 
     <div class="col-md-3 col-sm-6 col-xs-12"><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-md-3 col-sm-6 col-xs-12"><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-md-3 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive" /></a></div> 
    </div> 
    <div class="item"> 
     <div class="col-md-3 col-sm-6 col-xs-12"><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> 

<script src="https://code.jquery.com/jquery-2.0.2.min.js" type="text/javascript"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
<script type="text/javascript" src="bootstrapCarousel.js"> 
</script> 
</body> 
</html>

Jetzt versuche ich, einen CSS-Übergangseffekt zu finden jedes Element bewegen zu machen der nächste Artikel reibungsloser.

Quelle

2017-01-17 15:43:28 Kimmiekim

Haben Sie dies jemals mit einem Übergang aktualisiert? Würde es gerne sehen, dass es zu Ihrer Antwort hinzugefügt wurde, um es weicher zu machen. – becca

Bootstrap Karussell bewegen einzelnes Element in einem einzigen Klick

Antwort

Verwandte Themen