Jquery 如何使用Bxslider一行仅显示4张幻灯片_Jquery_Html_Css_Bxslider

Jquery 如何使用Bxslider一行仅显示4张幻灯片

jquery html css

Jquery 如何使用Bxslider一行仅显示4张幻灯片,jquery,html,css,bxslider,Jquery,Html,Css,Bxslider,我的页面上有Bxslider和两个滑块首先，在这里和在工程伟大第二个是底部滑块它会生成越来越多的行（因为我向slider添加了新项目），但我所需要的是，它在一行中只显示4个幻灯片（我不需要其他行）下面是它在代码中的外观 <div class="popular-slider"> <ul class="bxslider"> <li> <div class="popular">

我的页面上有Bxslider和两个滑块

首先，在这里和在工程伟大

第二个是底部滑块

它会生成越来越多的行（因为我向slider添加了新项目），但我所需要的是，它在一行中只显示4个幻灯片（我不需要其他行）

下面是它在代码中的外观

<div class="popular-slider">
    <ul class="bxslider">
        <li>
            <div class="popular">
                <div class="item">
                    <img src="img/popular1.jpg"><br>
                    <p>
                        <a href="#">Item text 1</a>
                    </p>
                </div>
                <div class="item">
                    <img src="img/popular2.jpg"><br>
                    <p>
                        <a href="#">Item text 2</a>
                    </p>
                </div>
                <div class="item">
                    <img src="img/popular3.jpg"><br>
                    <p>
                        <a href="#">Item text 3</a>
                    </p>
                </div>
                <div class="item">
                    <img src="img/popular4.jpg"><br>
                    <p>
                        <a href="#">Item text 4</a>
                    </p>
                </div>
                <div class="item">
                    <img src="img/popular4.jpg"><br>
                    <p>
                        <a href="#">Item text 5</a>
                    </p>
                </div>
                <div class="item">
                    <img src="img/popular4.jpg"><br>
                    <p>
                        <a href="#">Item text 6</a>
                    </p>
                </div>
                <div class="item">
                    <img src="img/popular4.jpg"><br>
                    <p>
                        <a href="#">Item text 7</a>
                    </p>
                </div>
                <div class="clear"></div>
            </div>
        </li>
    </ul>
</div>

这是我的bxslider代码

$(function(){
  $('.bxslider').bxSlider({
    auto: true,
    autoControls: true,
    speed: 500
  });
});

用js编写：

$('.bxslider').bxSlider({
  minSlides: 2,
  maxSlides: 2,
  slideWidth: 360,
  slideMargin: 10
});

我对你的HTML结构做了一些细微的调整。请参阅下文：

<div class="popular-slider bx-viewport">
<div class="bx-controls-direction"><a class="bx-prev" href="">Prev</a><a class="bx-next" href="">Next</a></div>
<ul class="bxslider">
    <li>
        <div class="popular">
            <div class="item"> <img src="img/popular1.jpg">
                <br>
                <p> <a href="#">Item text 1</a> </p>
            </div>
        </div>
    </li>
    <li>
        <div class="popular">
            <div class="item"> <img src="img/popular2.jpg">
                <br>
                <p> <a href="#">Item text 2</a> </p>
            </div>
        </div>
    </li>
    <li>
        <div class="popular">
            <div class="item"> <img src="img/popular3.jpg">
                <br>
                <p> <a href="#">Item text 3</a> </p>
            </div>
        </div>
    </li>
    <li>
        <div class="popular">
            <div class="item"> <img src="img/popular4.jpg">
                <br>
                <p> <a href="#">Item text 4</a> </p>
            </div>
        </div>
    </li>
    <li>
        <div class="popular">
            <div class="item"> <img src="img/popular4.jpg">
                <br>
                <p> <a href="#">Item text 5</a> </p>
            </div>
        </div>
    </li>
    <li>
        <div class="popular">
            <div class="item"> <img src="img/popular4.jpg">
                <br>
                <p> <a href="#">Item text 6</a> </p>
            </div>
        </div>
    </li>
    <li>
        <div class="popular">
            <div class="item"> <img src="img/popular4.jpg">
                <br>
                <p> <a href="#">Item text 7</a> </p>
            </div>
            <div class="clear"></div>
        </div>
    </li>
</ul></div>

根据布局调整滑块宽度值。希望这有帮助

变化

滑块显示如此多幻灯片的原因是您将bxSlider分配给了一个只有一个巨大幻灯片的

。要解决此问题，请执行以下操作：

删除了
和
将bxSlider插件重新分配给
将每个
指定为幻灯片。看

CSS中使用了

。主要内容

，而HTML中使用了

。流行的滑块

。我将

更改为

。如果没有此修复，您的CSS将无法工作

使用以下bxSlider选项一次显示4张幻灯片：

通过…锁定幻灯片的数量
…将相同的号码分配给
…这三种选择。你的情况是4
…创建旋转木马（一次显示多个幻灯片的滑块）时，需要使用
```
slideWidth
```
选项指定单个幻灯片的宽度
关于旋转木马，还有一件事情不是很明显，你应该注意。在确定需要的幻灯片数量时，请使用以下简单规则：将您计划的幻灯片总数除以您打算一次显示的幻灯片数量。如果结果是一个整数（例如1，2，3…），那么就可以了。在你的情况下，你应该有4（但那很无聊），8，12，16，20。。。原因是，如果您的旋转木马有7张幻灯片（我添加了第8张幻灯片），那么它不会在幻灯片上持续停止或暂停：
- 第一步：幻灯片5现在处于第一个位置
- 第二步：幻灯片2现在处于第一个位置
- 第三步：幻灯片6现在处于第一个位置

一小条

$（函数（）{
$（'.popular'）.bxSlider({
是的，
自动控制：正确，
速度:500,，
幻灯片选择器：“div.item”，
米斯利德斯：4，
maxSlides:4，
移动幻灯片：4，
滑动宽度：200
});
});
。主要内容。流行{
背景：#fff；
}
.主要内容.流行.项目{
浮动：左；
宽度：25%；
文本对齐：居中；
位置：相对位置；
垫底：20px；
}
.主要内容.流行.项目：之后{
内容：“；
宽度：2倍；
身高：100%；
背景:#f5；
位置：绝对位置；
右：0；
排名：0；
}
.主要内容.流行.第p项{
文本对齐：左对齐；
左侧填充：20px；
}
.主要内容.流行.项目p a{
字体大小：16px；
颜色：#414a56；
}

































请将图片包括在帖子中，而不是链接到其他网站。这使得这个问题对网站很有用，因为它不依赖可能消失的外部链接。照目前的情况，这个问题将被归类为不明确和封闭。谢谢你们的理解。嗨，特雷弗，谢谢你们的建议，但我是新来的，系统说我不能附加屏幕，它只显示链接。谢谢。我已经为你做了一个编辑，包括图片。只是等待它通过，应该很快（希望如此）。祝你好运。谢谢，我根据你的代码做了一些改进，但现在有另一个问题。现在不是显示所有项目，而是显示白色屏幕。和@ildar显示空白的原因是因为您有7个项目，并且一次显示4张幻灯片。详细信息请参见我的答案。太好了！请单击绿色复选标记接受此答案，否则此答案可能会被隐藏且不被注意。与您有相同问题的人将来可能没有机会从这个答案中获益。
<div class="popular-slider bx-viewport">
<div class="bx-controls-direction"><a class="bx-prev" href="">Prev</a><a class="bx-next" href="">Next</a></div>
<ul class="bxslider">
    <li>
        <div class="popular">
            <div class="item"> <img src="img/popular1.jpg">
                <br>
                <p> <a href="#">Item text 1</a> </p>
            </div>
        </div>
    </li>
    <li>
        <div class="popular">
            <div class="item"> <img src="img/popular2.jpg">
                <br>
                <p> <a href="#">Item text 2</a> </p>
            </div>
        </div>
    </li>
    <li>
        <div class="popular">
            <div class="item"> <img src="img/popular3.jpg">
                <br>
                <p> <a href="#">Item text 3</a> </p>
            </div>
        </div>
    </li>
    <li>
        <div class="popular">
            <div class="item"> <img src="img/popular4.jpg">
                <br>
                <p> <a href="#">Item text 4</a> </p>
            </div>
        </div>
    </li>
    <li>
        <div class="popular">
            <div class="item"> <img src="img/popular4.jpg">
                <br>
                <p> <a href="#">Item text 5</a> </p>
            </div>
        </div>
    </li>
    <li>
        <div class="popular">
            <div class="item"> <img src="img/popular4.jpg">
                <br>
                <p> <a href="#">Item text 6</a> </p>
            </div>
        </div>
    </li>
    <li>
        <div class="popular">
            <div class="item"> <img src="img/popular4.jpg">
                <br>
                <p> <a href="#">Item text 7</a> </p>
            </div>
            <div class="clear"></div>
        </div>
    </li>
</ul></div>

// CAROUSEL
    minSlides: 4,
    maxSlides: 4,
    moveSlides: 4,
    slideWidth: 300,