Question

如果有人知道我的问题的解决方案，你将不胜感激。我要找的是屏幕上有多个幻灯片，还有一个缩略图寻呼机。

enter image description here

这可以实现吗？

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的外部服务器中随机获取的，该服务器为食物，时装，体育等不同标签生成随机图像。

我可以有minslides，maxslides并且还有缩略图寻呼机吗？

1 个答案: