Карусельные изображения не исчезают

Question

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

CSS:

#mainContent div.activelink { 
    position: absolute; 
} 

.carousel-fade .carousel-inner .item {opacity: 0; transition-property: opacity; -webkit-transition-property: opacity; } 
.carousel-fade .carousel-inner .active {opacity: 1;} 
.carousel-fade .carousel-inner .active.left {left: 0; opacity: 0.5; z-index: 1;} 
.carousel-fade .carousel-inner .active.right {left: 0; opacity: 0; z-index: 1;} 
.carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right {opacity: 1;} 

.carousel-inner > .item { 


    -webkit-transition: 3s ease-in-out left; 
    -moz-transition: 3s ease-in-out left; 
    -o-transition: 3s ease-in-out left; 
    transition: 3s ease-in-out left; 

} 

HTML

<div class="activelink" id="link-6" data-toggle="modal" data-target="#modalVideo-trailer"> 
          <div id="carousel-link-6" class="carousel slide carousel-fade" data-ride="carousel"> 
           <div class="carousel-inner" role="listbox"> 
            <div class="item active"><a href="#"><img src="images/grouptrailer-1.png" alt=""></a></div> 
            <div class="item"><a href="#"><img src="images/grouptrailer-2.png" alt=""></a></div> 
            <div class="item"><a href="#"><img src="images/grouptrailer-3.png" alt=""></a></div> 
            <div class="item"><a href="#"><img src="images/grouptrailer-4.png" alt=""></a></div> 
           </div> 
          </div> 
         </div> 

Answer 1

Я понял ваш метод анимации, извините. Вы должны использовать функцию карусели Bootstrap (так как я не мог заставить ваш код работать без добавления компонентов Bootstrap). CSS в решении в this SO post применяется к вашему коду. Я добавил, что CSS для вашего HTML в этом jsbin (с использованием изображений imgur для демонстрационной цели), и он работает так, как вы планируете.