bxslider - 我可以拥有 minslides、maxslides 和缩略图寻呼机吗？

Question

如果有人知道我的问题的解决方案，您将不胜感激。我正在寻找的是在屏幕上有多张幻灯片，但在它下面还有一个缩略图寻呼机。

这可以实现吗？

Answer 1

干得好。

工作演示

HTML

<ul class="bxslider">
    <li>
        <img src="http://lorempixel.com/200/200/sports" />
    </li>
    <li>
        <img src="http://lorempixel.com/200/200/city" />
    </li>
    <li>
        <img src="http://lorempixel.com/200/200/fashion" />
    </li>
    <li>
        <img src="http://lorempixel.com/200/200/animals" />
    </li>
    <li>
        <img src="http://lorempixel.com/200/200/food" />
    </li>
</ul>

CSS

 .bx-wrapper .bx-pager {
     bottom: -95px;
 }
 .bx-wrapper .bx-pager img {
     width:40px;
     height:40px;
 }
 .bx-wrapper .bx-pager a {
     border: solid #ccc 1px;
     display: block;
     margin: 0 5px;
     padding: 3px;
 }
 .bx-wrapper .bx-pager a:hover, .bx-wrapper .bx-pager a.active {
     border: solid #5280DD 3px;
 }
 .bx-wrapper {
     margin-bottom: 120px;
 }

Javascript

$('.bxslider').bxSlider({
    slideWidth: 200,
    minSlides: 1,
    maxSlides: 3,
    moveSlides: 1,
    buildPager: function (slideIndex) {
        switch (slideIndex) {
            case 0:
                return '<img src="http://lorempixel.com/200/200/city">';
            case 1:
                return '<img src="http://lorempixel.com/200/200/fashion">';
            case 2:
                return '<img src="http://lorempixel.com/200/200/animals">';
            case 3:
                return '<img src="http://lorempixel.com/200/200/food">';
            case 4:
                return '<img src="http://lorempixel.com/200/200/sports">';
        }
    }

});

编辑：在小提琴中，滑块中的图像可能/可能与寻呼机中的图像不匹配。这不是代码问题，而是因为图像是从名为 LoremIpsum 的外部服务器随机获取的，该服务器为食物、时尚、运动等不同标签生成随机图像。