Question

我想添加以下效果 - 获得4个缩略图，单个缩略图=不同的相册：

单击后应指示轮播：

我不知道如何将缩略图和轮播放在一起。我可以使用什么来自动添加带有图库专辑的页面，并在Bootstrap 3上管理它们？

<section id="gallery">
<div class="container bg-5 text-center">
    <div class="row">
        <h2>Gallery</h2>
            <center>
            <div class="col-md-3">
                <a href="#">
                    <img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
                </a>
                39
            </div>
            <div class="col-md-3">
                <a href="#">
                    <img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
                </a>
                38
            </div>
            <div class="col-md-3">
                <a href="#">
                    <img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
                </a>
                37
            </div>
            <div class="col-md-3">
                <a href="#">
                    <img class="img-responsive img-rounded" src="http://placehold.it/350x250" alt="">
                </a>
                36
            </div>
            </center>
    </div>

    <div class="row">
        <div class="col-md-12">
            <ul class="pagination">
                <li>
                    <a href="#">&laquo;</a>
                </li>
                <li class="active">
                    <a href="#">1</a>
                </li>
                <li>
                    <a href="#">2</a>
                </li>
                <li>
                    <a href="#">3</a>
                </li>
                <li>
                    <a href="#">...</a>
                </li>
                <li>
                    <a href="#">&raquo;</a>
                </li>
            </ul>
        </div>
    </div> 
</div>

Carousel

Answer 1

在此，旋转木马缩略图出现两次，位于旋转木马滑梯的顶部和底部。我不明白为什么!! ：）

<html>
<head>
    <title>Stackoverflow Trials</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

     <link rel="stylesheet" href="css/bootstrap.css" media="screen">

     <style>

         h4 {
            margin: 20px 10px 10px;
        }
        p {
            margin: 10px;
        }

        #carousel-example-generic {
            margin: 20px auto;
            width: 400px;
        }


        #carousel-example-generic .carousel-indicators {
            margin: 10px 0 0;
            overflow: auto;
            position: static;
            text-align: left;
            white-space: nowrap;
            width: 100%;
        }
        #carousel-example-generic .carousel-indicators li {
            background-color: transparent;
            -webkit-border-radius: 0;
            border-radius: 0;
            display: inline-block;
            height: auto;
            margin: 0 !important;
            width: auto;
        }
        #carousel-example-generic .carousel-indicators li img {
            display: block;
            opacity: 0.5;
        }
        #carousel-example-generic .carousel-indicators li.active img {
            opacity: 1;
        }
        #carousel-example-generic .carousel-indicators li:hover img {
            opacity: 0.75;
        }
        #carousel-example-generic .carousel-outer {
            position: relative;
        }
     </style>

</head>
<body>
        <section id="gallery">
        <div class="container bg-5 text-center">
            <div class="row">
                <h2>Gallery</h2>
                    <center>
                    <div class="col-md-3">
                        <a href="#">
                            <img class="img-responsive img-rounded thumbnail" id="thumb1" src="http://placehold.it/350x250" alt="">
                        </a>
                        39
                    </div>
                    <div class="col-md-3">
                        <a href="#">
                            <img class="img-responsive img-rounded thumbnail" id="thumb2" src="http://placehold.it/350x250" alt="">
                        </a>
                        38
                    </div>
                    <div class="col-md-3">
                        <a href="#">
                            <img class="img-responsive img-rounded thumbnail" id="thumb3" src="http://placehold.it/350x250" alt="">
                        </a>
                        37
                    </div>
                    <div class="col-md-3">
                        <a href="#">
                            <img class="img-responsive img-rounded thumbnail" id="thumb4" src="http://placehold.it/350x250" alt="">
                        </a>
                        36
                    </div>
                    </center>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <ul class="pagination">
                        <li>
                            <a href="#">&laquo;</a>
                        </li>
                        <li class="active">
                            <a href="#">1</a>
                        </li>
                        <li>
                            <a href="#">2</a>
                        </li>
                        <li>
                            <a href="#">3</a>
                        </li>
                        <li>
                            <a href="#">...</a>
                        </li>
                        <li>
                            <a href="#">&raquo;</a>
                        </li>
                    </ul>
                </div>
            </div> 
        </div>
        </section>


        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <div class='carousel-outer'>
                <!-- Wrapper for slides -->
          <!-- Indicators -->
          <ol class="carousel-indicators"></ol>
          <!-- Wrapper for slides -->
          <div class="carousel-inner"></div>
          <!-- Controls -->
          <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>

            </div> 
              <ol class='carousel-indicators'>

            </ol>

        </div>


        <script>


            $(document).ready(function() {
                // create arrays of images to be displayed in each carousel for each thumbnails.
                // the array name is exactly the same as thumbnail id
                var thumb1 = new Array("book2.jpg","book3.jpg","book4.jpg","book5.jpg");
                var thumb2 = new Array("book3.jpg","book4.jpg","book5.jpg","book2.jpg");
                var thumb3 = new Array("book4.jpg","book5.jpg","book2.jpg","book3.jpg");
                var thumb4 = new Array("book5.jpg","book4.jpg","book3.jpg","book2.jpg");

                var $carousel = $('#carousel-example-generic .carousel-inner');
                var $carouselInd =  $('#carousel-example-generic .carousel-indicators');

                $( ".thumbnail" ).click(function() {

                    var numberOfSlides = $('.item').length;

                    if(numberOfSlides >0) {
                        // remove all items from the carousel before adding the new ones to it.
                        $carousel.empty(); 
                        //$carouselInd.empty();

                    }

                    var m = this.id;
                    m = eval(m);

                    //alert(m.length);

                    for(var i=0 ; i< m.length ; i++) {
                        var j= i+1;
                      $('<div class="item"><img src="images/'+m[i]+'"><div class="carousel-caption"></div>   </div>').appendTo('.carousel-inner');
                      $('<li data-target="#carousel-example-generic" data-slide-to="'+i+'"><img src="http://placehold.it/100x50&text=slide'+j+'" alt="" /></li>').appendTo('.carousel-indicators');

                    }
                    $('.item').first().addClass('active');
                    $('.carousel-indicators > li').first().addClass('active');
                    $('#carousel-example-generic').carousel();                      

                });

            }); 

        </script>
</body>

Bootstrap画廊缩略图与旋转木马博

1 个答案: