Question

我有一些带有几张幻灯片的典型Bootstrap Carousel，我遇到的问题是我希望每当新幻灯片出现时滑块下的部分都会改变。我在index-3.html中添加了一个javascript片段但无法让它正常运行。这是HTML：

<!DOCTYPE html>
<html>    
<head>    
    <!-- Website Title & Description for Search Engine purposes -->
    <title>Code a Responsive Website with Twitter Bootstrap 3</title>
    <meta name="description" content="Learn how to code your first responsive website with the new Twitter Bootstrap 3.">    
    <!-- Mobile viewport optimized -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">    
    <!-- Bootstrap CSS -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="includes/css/bootstrap-glyphicons.css" rel="stylesheet">    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="includes/css/styles.css">    
    <!-- Include Modernizr in the head, before any other Javascript -->
    <script src="includes/js/modernizr-2.6.2.min.js"></script>    
</head>    
<body>    
    <div class="container" id="main">    
        <!-- Carousel -->
        <div class="carousel slide" id="myCarousel">    
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li class="active" data-slide-to="0" data-target="#myCarousel"></li>
                <li data-slide-to="1" data-target="#myCarousel"></li>
                <li data-slide-to="2" data-target="#myCarousel"></li>
            </ol>    
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="item active" id="slide1">
                    <div class="carousel-caption">
                        <h4>Bootstrap 3</h4>
                        <p>Learn how to build your first responsive website with the brand new Twitter Bootstrap 3!</p>
                    </div>
                    <!-- end carousel-caption-->
                </div>
                <!-- end item -->    
                <div class="item" id="slide2">
                    <div class="carousel-caption">
                        <h4>Learn to code a website in 4-hours!</h4>
                        <p>PSD to HTML5 &amp; CSS3 is a popular Udemy course that has helped thousands of aspiring web designers launch their web design career.</p>
                    </div>
                    <!-- end carousel-caption-->
                </div>
                <!-- end item -->    
                <div class="item" id="slide3">
                    <div class="carousel-caption">
                        <h4>Web Hosting 101</h4>
                        <p>Learn how to buy a perfect domain name and hosting package, and get your website live on the web with ease.</p>
                    </div>
                    <!-- end carousel-caption-->
                </div>
                <!-- end item -->
            </div>
            <!-- carousel-inner -->

            <!-- Controls -->
            <a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="icon-prev"></span></a>
            <a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="icon-next"></span></a>

        </div>
        <!-- end myCarousel -->    
        <div id="collapseGroup">
            <div class="collapse for-slide-0 in">
                <div class="well">
                    <h3>Text for Slide 0</h3>
                </div>
            </div>
            <div class="collapse for-slide-1 for-slide-3">
                <div class="well">
                    <h3>Text for Slides 1 and 3</h3>
                </div>
            </div>
            <div class="collapse for-slide-2">
                <div class="well">
                    <h3>Text for Slide 2</h3>
                </div>
            </div>
        </div>
    </div>

Javascript片段：

<script>
    $(document).ready(function() {
        $('#myCarousel').on('slide.bs.carousel', function(e) {
            var forSlide = $('.for-slide-' + $(e.relatedTarget).index());
            if (!forSlide.hasClass('in')) {
                $('#collapseGroup>.collapse.in').collapse('hide');
                forSlide.collapse('show');
            }
        })
    });
</script>

我将不胜感激任何帮助！

Bootstrap Carousel - 更改滑块下的部分

0 个答案: