Bootstrap Karussell Animation überlappend

Question

Ich habe das Bootstrap Karussell so eingerichtet, wie ich es will, aber die Animation überlappt und ich kann nicht herausfinden, warum. Wenn die Folie passiert, gibt es eine Überlappung der aktuellen Folie auf sich selbst, die einen verschwommenen Effekt ergibt.

Bitte helfen, wo ich falsch gelaufen bin.

DEMO JSFIDDLE

HTML:

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-12 PridelCr"> 
      <div class="carousel slide" id="myCarousel"> 
       <div class="carousel-inner"> 
        <div class="item active"> 
         <div class="col-xs-4"> 

<a href="#"><img src="https://s32.postimg.org/u7dfocir9/pridel_header_1.jpg" class="img-responsive"></a> 
<h3>Slide 1</h3> 
<p>This is the first slide which is going to be awesome.</p> 

         </div> 
        </div> 
        <div class="item"> 
         <div class="col-xs-4"> 

<a href="#"><img src="https://s32.postimg.org/nuyaeifp1/pridel_header_2.jpg" class="img-responsive"></a> 
<h3>Slide 2</h3> 
<p>This is the second slide which is not as awesome.</p> 

         </div> 
        </div> 
        <div class="item"> 
         <div class="col-xs-4"> 

<a href="#"><img src="https://s32.postimg.org/r32rrk1yt/pridel_header_3.jpg" class="img-responsive"></a> 
<h3>Slide 3</h3> 
<p>This is the most awesome slide of them all</p> 
         </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> 
    </div> 
</div> 

CSS:

.carousel { 
     overflow: hidden; 
    } 
    .career-carousel { 
     padding: 0px; 
    } 
    /* .carousel-inner { 
     width: 240%; 
     left: -70%; 
    }*/ 
    .carousel-inner { 
     width: 240%; 
     left: -69%; 
    } 
    .carousel-inner > .item.next, 
    .carousel-inner > .item.active.right { 
     left: 0; 
     -webkit-transform: translate3d(33%, 0, 0); 
     transform: translate3d(33%, 0, 0); 
    } 
    .carousel-inner > .item.prev, 
    .carousel-inner > .item.active.left { 
     left: 0; 
     -webkit-transform: translate3d(-33%, 0, 0); 
     transform: translate3d(-33%, 0, 0); 
    } 
    .carousel-control.left, .carousel-control.right { 
     background: rgba(255, 255, 255, 0.3); 
     width: 5%; 
    } 

Javascript:

$(document).ready(function() { 
     $('#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 { 
       $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); 
      } 
     }); 
    }); 

Answer 1

Sie sind c loning jede Folie 3 mal.

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

     // Clone() creates one additional copy here 
     next.children(':first-child').clone().appendTo($(this)); 
     if (next.next().length > 0) { 

      // And also here 
      next.next().children(':first-child').clone().appendTo($(this)); 
     } else { 
      $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); 
     } 
    }); 

Entfernen Sie die Klonanweisungen, und Sie werden keine überlappenden Folien sehen. In der Tat sehe ich nicht den Zweck hinter dem gesamten Code innerhalb der $.each() Funktion.

Siehe ein Arbeitsbeispiel here.

EDIT

Da Sie einen Klon der vorherigen und nächsten Objektträger innerhalb jeder Folie zu schaffen, wenn sie sich gegenseitig überlagern, übergehen. Es ist in den Bildern nicht sichtbar, aber im Text gut sichtbar.

Um dies zu umgehen, müssen Sie die überlappenden Objektträger beim Übergang ausblenden.

Das folgende CSS sollte es tun:

.carousel-inner > .item.prev.right > div:nth-child(2), 
.carousel-inner > .item.prev.right > div:nth-child(3){ 
    display: none; 
} 

.carousel-inner > .item.active.left > div:nth-child(2), 
.carousel-inner > .item.active.left > div:nth-child(3){ 
    display: none; 
} 

Sehen Sie ein funktionierendes Beispiel here.

Answer 2

Ich kämpfte eine Weile mit der Animation - und dachte dann, dass das Verschieben des Containers anstatt der Slides effizienter sein sollte.

Hier ist der Code:

.carousel-inner { 
    width: 200%; 
} 
.carousel-inner > .item { 
    width: 50%; float: left; 
} 
.carousel-inner.prev { 
    left: -100%; 
} 
.carousel-inner.move { 
    -webkit-transition: .6s ease-in-out margin-left; 
    -o-transition: .6s ease-in-out margin-left; 
    transition: .6s ease-in-out margin-left; 
} 
.carousel-inner > .item.active, 
.carousel-inner > .item.out { 
    display: block; 
} 
.carousel-inner.move.right { 
    margin-left: 100%; 
} 
.carousel-inner.move.left { 
    margin-left: -100%; 
} 
.carousel-inner.move.cycle > .item { 
    float: right; 
} 

Und die JS, die mit ihm geht:

return this.fx(function(state) { 
    return show.items.map(function(items) { 
     if (state.next < 0) { 
      items.classList.add('cycle'); 
      state.next = items.childElementCount - 1; 
     }else if (state.next == items.childElementCount) { 
      items.classList.add('cycle'); 
      state.next = 0; 
     } 
     var anim = [].slice.call(items.children).reduce(function(res, el, idx) { 
      if (idx == state.next) { 
       state.curr = state.next; 
       state.next = 0; res.next = el; 
      }else if (idx == state.prev) { 
       res.curr = el; 
      } 
      return res; 
     }, {}); 
     anim.curr.classList.add('out'); 
     anim.curr.classList.remove('active'); 
     items.classList.add(state.ctrl); 
     anim.next.classList.add('active'); 
     items.classList.add('move'); 
     show.end.run(items, function() { 
      items.className = 'carousel-inner'; 
      anim.curr.classList.remove('out'); 
     }).classList.add(state.move); 
     return state; 
    }).run(); 
});