Question

我希望每张幻灯片的左侧都有一个图片，而文本位于右侧，但它不起作用。当只有图像时，滑块工作正常，但只要我添加一个字母，整个滑块就会断开。

我是否遗漏了某些内容或者bxSlider不允许使用普通的旧HTML文本？

感谢。

Answer 1

您可以使用div而不是li标签来订购幻灯片。下面是一个将Foundation 5 Framework应用于滑块的示例，只是为了生成行/列。

<div class="bxslider">
<div class="row collapse slide-pane">
    <div class="small-6 medium-6 large-6 columns">
        <img src="http://placehold.it/350x250/5E7074/FFFFFF&text=Slide-One" />
    </div>
    <div class="small-6 medium-6 large-6 columns text-pane">       
<h1>Are you ready for the truth?</h1>
    </div>
</div>
<div class="row collapse slide-pane">
    <div class="small-6 medium-6 large-6 columns">
        <img src="http://placehold.it/350x250/5E7074/FFFFFF&text=Slide-Two" />
    </div>
    <div class="small-6 medium-6 large-6 columns text-pane">       
<h1>Are you ready for the truth?</h1>
    </div>
</div>
<div class="row collapse slide-pane">
    <div class="small-6 medium-6 large-6 columns">
        <img src="http://placehold.it/350x250/5E7074/FFFFFF&text=Slide-Three" />
    </div>
    <div class="small-6 medium-6 large-6 columns text-pane">          
<h1>Are you ready for the truth?</h1>
    </div>
</div>

小提琴：http://jsfiddle.net/defonic/E8NgR/

bxSlider不允许在幻灯片中使用HTML文本

1 个答案: