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

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/