Twitter Bootstrap Carousel События

Question

я работаю на начальной загрузки карусели создать новую карусель: Цель идеи состоит в том, что уменьшенное изображение содержит следующие слайд я прибыл один из решений, но есть три проблемы:
первый Проблема:
Миниатюра изображения не отображается до тех пор, пока смена слайдов, что мне нужно, при загрузке страницы изображение будет отображаться при загрузке страницы не при изменении слайда.
Вторая проблема:
Мне нужно изображение thumbnail получить следующий слайд текущего слайда, поскольку в моем коде есть проблема.
Третья проблема:
Когда я нажимаю в предыдущем управлении стрелкой, проблема возникает, пока код не работает должным образом.

$(document).ready(function() { 
 
    $('.carousel').carousel({ 
 
     interval: 250000 
 
    }) 
 
    $('#my-carousel').bind('slide.bs.carousel', function (e) { 
 
     $(".my img").attr("src", $(".active").next().children("img").attr("src")); 
 
    }); 
 
});

.my{ 
 
    width:100px; 
 
    height:100px; 
 
    margin:20px auto; 
 
    border:1px solid #808080; 
 
} 
 
.my img{ 
 
    width:100px; 
 
    height:100px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div id="my-carousel" class="carousel slide" data-pause="hover" data-ride="carousel" > 
 
     <!-- Indicators --> 
 
     <ol class="carousel-indicators"> 
 
      <li data-target="#my-carousel" data-slide-to="0" class="active"></li> 
 
      <li data-target="#my-carousel" data-slide-to="1"></li> 
 
      <li data-target="#my-carousel" data-slide-to="2"></li> 
 
      <li data-target="#my-carousel" data-slide-to="3"></li> 
 
     </ol> 
 
     <!-- Wrapper for slides --> 
 
     <div class="carousel-inner" role="listbox"> 
 
      <div class="item active"> 
 
       <img alt="First slide" src="https://twistedsifter.files.wordpress.com/2016/03/popular-images-with-a-twist-by-tony-futura-6.jpg?w=800&h=800"> 
 
       <div class="carousel-caption"> 
 
        <h3>Caption heading 1</h3> 
 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
       </div> 
 
      </div> 
 
      <div class="item"> 
 
       <img alt="Second slide" src="https://twistedsifter.files.wordpress.com/2016/03/popular-images-with-a-twist-by-tony-futura-12.jpg?w=800&h=800"> 
 
       <div class="carousel-caption"> 
 
        <h3>Caption heading 2</h3> 
 
        <p>Morbi eget libero quis metus consectetur semper.</p> 
 
       </div> 
 
      </div> 
 
      <div class="item"> 
 
       <img alt="Third slide" src="http://www.bascota.com/up/uploads/136917980117.jpg"> 
 
       <div class="carousel-caption"> 
 
        <h3>Caption heading 3</h3> 
 
        <p>Suspendisse ullamcorper massa eget eleifend iaculis.</p> 
 
       </div> 
 
      </div> 
 
      <div class="item"> 
 
       <img alt="forth slide" src="http://aurbaneman.s3.amazonaws.com/wp-content/uploads/2015/07/jared-leto-man-bun.jpg"> 
 
       <div class="carousel-caption"> 
 
        <h3>Caption heading 3</h3> 
 
        <p>Suspendisse ullamcorper massa eget eleifend iaculis.</p> 
 
       </div> 
 
      </div> 
 
     </div> 
 

 
     <!-- Controls --> 
 
     <a class="left carousel-control" href="#my-carousel" 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="#my-carousel" role="button" data-slide="next"> 
 
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
      <span class="sr-only">Next</span> 
 
     </a> 
 
    </div> 
 
    <div class="my"> 
 
     <img src="" alt="" /> 
 
    </div>

Answer 1

Вот решение вашей первой и второй задачи

$(document).ready(function() { 
    $('.carousel').carousel({ 
     interval: 250000 
    }) 
    $(".my img").attr("src", $(".active").next().children("img").attr("src")); 
    $('#my-carousel').bind('slid.bs.carousel', function (e) { 
     $(".my img").attr("src", $(".active").next().children("img").attr("src")); 
    }); 
}); 

Вы можете также проверить здесь на скрипке https://jsfiddle.net/bhumi/t05u7Lzu/

UPDATE: раствор третьего

$(document).ready(function() { 
    $('.carousel').carousel({ 
     interval: 250000 
    }) 
    $(".my img").attr("src", $(".active").next().children("img").attr("src")); 
    $('#my-carousel').bind('slid.bs.carousel', function (e) {console.log(e.direction); 
      if(e.direction=='left'){ 
     $(".my img").attr("src", $(".active").next().children("img").attr("src")); 
     }else{ 
     $(".my img").attr("src", $(".active").prev().children("img").attr("src")); 
     } 
    }); 
}); 

https://jsfiddle.net/bhumi/t05u7Lzu/1/