bxSlider不允许幻灯片中的HTML文本 | bxSlider不允许幻灯片中的HTML文本

本文介绍了bxSlider不允许幻灯片中的HTML文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我希望每张幻灯片的左侧都有一个图像，右侧有文本，但这是行不通的.当只有图像时，该滑块可以正常工作，但是一旦我添加一个字母，整个滑块就会中断.

I want each slide to have an image on the left and text sitting to the right of it, but it just won't work. The slider works just fine when there are only images but as soon as I add a single letter, the whole slider breaks.

我是否缺少某些东西，或者bxSlider不允许使用纯旧的HTML文本?

Am I missing something or does bxSlider not allow plain old HTML text?

谢谢.

推荐答案

您可以使用div代替li标签来订购幻灯片.这是一个将Foundation 5 Framework应用于滑块只是为了生成行/列的示例.

You can use divs instead of li tags to order your slides. Here is an example with Foundation 5 Framework applied to the slider simply to generate rows/columns.

<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文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！