Question

我能够合并http://codepen.io/srkimir/pen/mGbrf和http://codepen.io/transportedman/pen/NPWRGq来创建一个带有缩略图的渐变（而不是滑动）轮播，如http://codepen.io/kikibres/pen/gpZoXz中所示。

然而，当我尝试将此应用于我的代码时，我无法使我的代码工作。幻灯片能够以设定的间隔淡入，但我无法获得缩略图和间隔：false工作。另外，我的Dreamweaver文本编辑器告诉我，缩略图的javascript可能有错误，说明了var conf = {缺少“use strict”语句。但是，我不明白为什么它在codepen中工作正常但在实际网站上却没有。（我正在localhost的网站上工作。）

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>$30.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轮播无效

1 个答案: