jquery - Twitter Bootstrap 轮播事件

Question

我在 bootstrap carousel 上工作以创建新的 Carousel: 这个想法的目标是图像缩略图包含以下幻灯片 我到达了解决方案之一，但存在三个问题:
第一个问题:
图像缩略图直到幻灯片更改才出现，我需要的是在页面加载时，图像缩略图在页面加载时出现，而不是在幻灯片更改时出现。
第二个问题:
我需要图像缩略图获取当前幻灯片的下一张幻灯片，因为我的代码有问题。
第三个问题:
当我点击上一个箭头控件时，问题出现，直到代码无法正常工作。

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

您也可以在此处查看 fiddle https://jsfiddle.net/bhumi/t05u7Lzu/

更新:第三种解决方案

$(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/