滑块外的自己的div中的字幕 [英] captions in own div outside of slider
问题描述
我正在使用 bxslider .它对我来说效果很好,但是我有1个问题.我想要字幕在bxwrapper之外.
I am using the bxslider. It works very well for me, but I have 1 problem. I want the captions outside of the bxwrapper.
滑块的html看起来像这样,只有div字幕是我创建的
The html of the slider looks like this only the div captions is created by me
<div class="captions"></div>
<ul class="bxslider">
<li><img src="images/1.jpg" title="headline, text" /></li>
<li><img src="images/1.jpg" /></li>
<li><img src="images/1.jpg" title="text" /></li>
<li><img src="images/1.jpg" title="text" /></li>
</ul>
标题是使用以下代码从图像的标题中生成的:
The captions are generated out of the title from the images with this code:
* Appends image captions to the DOM
*/
var appendCaptions = function(){
// cycle through each child
slider.children.each(function(index){
// get the image title attribute
var title = $(this).find('img:first').attr('title');
// append the caption
if (title != undefined && ('' + title).length) {
$(this).append('<div class="bxcaptions"><span>' + title + '</span></div>');
}
});
}
我试图设置字幕的样式,使其位于滑块之外,但是滑块使用了隐藏的溢出标记,因此这是不可能的.
i tried to style the captions that they are outside of the slider, but the slider uses overflow hidden and so its impossible.
所以我希望将字幕写到<div class="captions"></div>
中,以便我可以按照自己的方式进行定位.
So i want that the captions are written into the <div class="captions"></div>
which i can position the way i want it.
另外,我可能希望用h1突出显示,之前的标题,而其他标题是正常的,但这仅仅是附加的.
Further i maybe want that the headline before the , is highlighted with h1 and the rest is normal but thats just additional.
感谢您的帮助!
推荐答案
我认为您想要这样. 下面的代码段是对bx滑块字幕外面的更好的解决方案
I think you want like this. below snippet is better solution for bx slider caption outside
jQuery('.bxslider').bxSlider({
nextSelector: '#slider-next',
prevSelector: '#slider-prev',
nextText: 'next',
prevText: 'prev',
pager: true,
prependtxt: 'Examples ',
pagerType: 'short',
mode: 'fade',
auto: true,
onSliderLoad: function(currentIndex) {
$(".slider-txt").html($('.bxslider li').eq(currentIndex).find("img").attr("title"));
},
onSlideBefore: function($slideElement, oldIndex, newIndex) {
$(".slider-txt").html($slideElement.find("img").attr("title"));
}
});
.slider-txt{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://bxslider.com/lib/jquery.bxslider.css" rel="stylesheet" />
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<div class="image-slider">
<ul class="bxslider">
<li>
<img src="http://www.menucool.com/slider/prod/image-slider-2.jpg" alt="Letterhead" title="Letterhead" />
</li>
<li>
<img src="http://www.menucool.com/slider/prod/image-slider-2.jpg" alt="Business Card" title="Business Card" />
</li>
<li>
<img src="http://www.menucool.com/slider/prod/image-slider-2.jpg" alt="Compliment Slip" title="Compliment Slip" />
</li>
<li>
<img src="http://www.menucool.com/slider/prod/image-slider-2.jpg" alt="Envelope" title="Envelope" />
</li>
<li>
<img src="http://www.menucool.com/slider/prod/image-slider-2.jpg" alt="Folder" title="Folder" />
</li>
<li>
<img src="http://www.menucool.com/slider/prod/image-slider-2.jpg" alt="Referral Card" title="Referral Card" />
</li>
<li>
<img src="http://www.menucool.com/slider/prod/image-slider-2.jpg" alt="Single Sided Referral Pad" title="Single Sided Referral Pad" />
</li>
<li>
<img src="http://www.menucool.com/slider/prod/image-slider-2.jpg" alt="Post, note or thank you card" title="Post, note or thank you card" />
</li>
<li>
<img src="http://www.menucool.com/slider/prod/image-slider-2.jpg" alt="WEBSITE (OPTIONAL)" title="WEBSITE (OPTIONAL)" />
</li>
</ul>
<div class="outside"><span id="slider-prev"></span><span id="slider-next"></span>
</div>
<div class="slider-txt"></div>
</div>
这篇关于滑块外的自己的div中的字幕的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!