带有缩略图的自定义 Bootstrap 轮播无法正常工作

Question

我能够合并 http://codepen.io/srkimir/pen/mGbrf and http://codepen.io/transportedman/pen/NPWRGq to create an fading (instead of sliding) carousel with thumbnails as seen in http://codepen.io/kikibres/pen/gpZoXz。

但是，当我尝试将此应用于我的代码时，我无法使我的代码运行。幻灯片能够以设定的间隔淡入淡出，但我无法让缩略图和 interval:false 工作。此外，我的 Dreamweaver 文本编辑器告诉我缩略图的 javascript 可能有错误，说 var conf = { 缺少 "use strict" 语句。但是，我不明白为什么它在 codepen 中运行良好但在实际网站上运行不正常。（我正在本地主机上的网站上工作。）

HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>KINCARDINE DIVE LOCKER</title>

<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/productdetails.css" type="text/css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="http://fonts.googleapis.com/css?family=Oswald:400,300,700" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script>
$('#carouselHacked').carousel({
  interval: false
});

;(function(window, $, undefined) {

    var conf = {
        center: true,
        backgroundControl: false
    };

    var cache = {
        $carouselContainer: $('.thumbnails-carousel').parent(),
        $thumbnailsLi: $('.thumbnails-carousel li'),
        $controls: $('.thumbnails-carousel').parent().find('.carousel-control')
    };

    function init() {
        cache.$carouselContainer.find('ol.carousel-indicators').addClass('indicators-fix');
        cache.$thumbnailsLi.first().addClass('active-thumbnail');

        if(!conf.backgroundControl) {
            cache.$carouselContainer.find('.carousel-control').addClass('controls-background-reset');
        }
        else {
            cache.$controls.height(cache.$carouselContainer.find('.carousel-inner').height());
        }

        if(conf.center) {
            cache.$thumbnailsLi.wrapAll("<div class='center clearfix'></div>");
        }
    }

    function refreshOpacities(domEl) {
        cache.$thumbnailsLi.removeClass('active-thumbnail');
        cache.$thumbnailsLi.eq($(domEl).index()).addClass('active-thumbnail');
    }   

    function bindUiActions() {
        cache.$carouselContainer.on('slide.bs.carousel', function(e) {
            refreshOpacities(e.relatedTarget);
        });

        cache.$thumbnailsLi.click(function(){
            cache.$carouselContainer.carousel($(this).index());
        });
    }

    $.fn.thumbnailsCarousel = function(options) {
        conf = $.extend(conf, options);

        init();
        bindUiActions();

        return this;
    };

})(window, jQuery);

$('.thumbnails-carousel').thumbnailsCarousel();
</script>

</head>

<body>
<header>
</header>
<div class="wrapper">

    <div class="productdetails">
        <div class="productbox">
            <div class="productcolumn">
                 <div id="carouselHacked" class="carousel slide carousel-fade productslider" data-ride="carousel">
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <img src="images/scuba-gear_small.jpg" alt="tank" class="img-responsive" />
                        </div>
                        <div class="item">
                            <img src="images/alg-scuba-jpg.jpg" alt="scuba" class="img-responsive" />
                        </div>
                    </div>

                   <!-- Thumbnails --> 
                  <ul class="thumbnails-carousel clearfix">
                    <li><img src="images/scuba-gear_small.jpg" alt="tank"></li>
                    <li><img src="images/alg-scuba-jpg.jpg" alt="scuba"></li>
                  </ul>

                </div>
            </div>
            <div class="productcolumn2">
                <h1>Scuba Tank</h1>
                <h2>.00</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae lectus a nibh eleifend euismod. Mauris in eros et est malesuada congue. Cras vel porttitor ligula, eu tempus ex. Nunc sit amet leo eu orci fringilla vestibulum ut in eros. Maecenas vestibulum diam lectus, ac pellentesque eros faucibus eget. Mauris a arcu eget justo ullamcorper scelerisque vitae id mi. Fusce egestas luctus leo vel rhoncus. Sed id magna fringilla, feugiat sem id, elementum risus. Donec a consectetur justo, a suscipit enim. Sed ultricies semper est in rutrum. Sed fringilla cursus risus.</p>
                <hr class="grayline">
                <div class="shopsection">
                <div class="qualityselect">
                    <form>
                        <select>
                            <option value="1">1</option>
                          <option value="2">2</option>
                          <option value="3">3</option>
                          <option value="4">4</option>
                          <option value="5">5</option>
                          <option value="6">6</option>
                          <option value="7">7</option>
                          <option value="8">8</option>
                          <option value="9">9</option>
                          <option value="10">10</option>
                          <option value="11">11</option>
                          <option value="12">12</option>
                          <option value="13">13</option>
                          <option value="14">14</option>
                          <option value="15">15</option>
                          <option value="16">16</option>
                          <option value="17">17</option>
                          <option value="18">18</option>
                          <option value="19">19</option>
                          <option value="20">20</option>
                        </select>
                    </form>
                </div>
                <div class="shopbutton">
                    <a href="#" >ADD TO CART</a>
                </div>
                </div>
                <hr class="grayline">
        </div>
        <div class="productcontent">
        <hr class="grayline">
        <div class="productdescription">
            <h2>PRODUCT DESCRIPTION</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae lectus a nibh eleifend euismod. Mauris in eros et est malesuada congue. Cras vel porttitor ligula, eu tempus ex. Nunc sit amet leo eu orci fringilla vestibulum ut in eros. Maecenas vestibulum diam lectus, ac pellentesque eros faucibus eget. Mauris a arcu eget justo ullamcorper scelerisque vitae id mi. Fusce egestas luctus leo vel rhoncus. Sed id magna fringilla, feugiat sem id, elementum risus. Donec a consectetur justo, a suscipit enim. Sed ultricies semper est in rutrum. Sed fringilla cursus risus.</p>
        </div>
        </div>
    </div>
    </div>

</div>
<footer>
</footer>
</body>
</html>

CSS

.productdetails { width: 80%; margin-left: auto; margin-right: auto; }
.productbox { width: 100%; display: block; margin: 100px auto;}
.productcolumn {width:49%; display: inline-block; vertical-align: top; padding-right: 30px;}
.productcolumn2 {width:49%; display: inline-block; vertical-align: top; }

/* Bootstrap Carousel slider */
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.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-fade .carousel-control {
  z-index: 2;
}

/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}

/* just for demo purpose */
    .productslider .carousel,
    .productslider .carousel-inner,
    .productslider .carousel-inner .item {
      height: /*100%*/ 200px;
      width: 100%;
    }
ul.thumbnails-carousel {
    padding: 5px 0 0 0;
    margin: 0;
    list-style-type: none;
    /*text-align: center;*/
}
ul.thumbnails-carousel .center {
    display: inline-block;
}
ul.thumbnails-carousel li {
    margin-right: 5px;
    float: left;
    cursor: pointer;
    display: inline-block;
}
.active-thumbnail {
    opacity: 0.4;
}
.thumbnails-carousel li { width: 80px; height: 50px;}
.thumbnails-carousel img { display: block; width: 80px; max-width: 100%; height: 50px; max-height: 100%; object-fit: cover;}

.productcolumn2 h1 { padding-bottom: 25px;}
.productcolumn2 h2 { padding-bottom: 10px;}
hr.grayline {  border: 0;
    height: 0;
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
}
.shopsection { width: 100%; display: block; padding: 10px 0;}
.qualityselect { width: 40px; display: inline-block;}
.shopbutton { width: 300px; display: inline-block; margin: 0 15px;}
.shopbutton a { background-color: #2a286a; color: #fff; width: 80%; padding: 15px 25px; border-radius: 5px;}
.shopbutton a:hover { text-decoration: none; background-color: #eb3237; color: #fff;}

.productdescription h2 { padding-bottom: 10px;}

Answer 1

您得到 "Uncaught ReferencError" 的原因是因为 Jquery 在您的代码执行时尚未加载或完成加载。

这是抛出错误的代码：

$('#carouselHacked').carousel({
  interval: false
});

为了解决这个问题，我们将它放在 $(function() { }); 中，这样它将在 DOM 准备就绪时执行。

您的代码应如下所示：

$(function() {
    $('#carouselHacked').carousel({
      interval: false
    });

    // let's put this code also so it won't throw an error when it runs
    $('.thumbnails-carousel').thumbnailsCarousel();
});

带有缩略图的自定义 Bootstrap 轮播无法正常工作

Custom Bootstrap carousel with thumbnails isn't working

css

jquery

thumbnails

carousel

twitter-bootstrap