FlexSlider：在右侧垂直获取标题 [英] FlexSlider : get the caption vertically on right side
问题描述
我使用酷的Felxslider在共享点安装上显示幻灯片。
它运行得很好，但我仍然有两个问题：
I'm using the cool Felxslider to display a slideshow on a sharepoint installation. it works quite well, but i still have two questions :
1 - 如何显示标题（）（ ）
如果可能的话，不要悬停图片。
And not hover the picture, if possible.
2 - 我有N张图片给谁，但滑块总是显示N + N张图片，第一张额外的图片是图片的克隆，但最后一个总是空白。
例如，我有3张图片要显示，但滑块会生成6张幻灯片：数字4和数字5是数字1和数字2的克隆，而数字6是完全空白。
无论我有多少张图片，我都会显示这些额外的图片（如果我有2张图片要显示，将显示4张）。
2- I have N images to whos, but the slider always shows N+N images, the first extra ones are clones of the images, but the last is always just blank. For example, i have 3 pictures to show, but the slider generates 6 slides : Number 4 and number 5 are clones of number 1 and number2, and number 6 is totally blank. It displays such extra pictures no matter how many pictures I have (if i have 2 pictures to display, it will display 4).
你对如何摆脱所有这些克隆有什么想法？
感谢很多回答，并有一个愉快的一天！
Thanks a lot to answer, and have a nice day!
推荐答案
为了让标题出现在右侧我添加了一些CSS规则和一个特定的HTML字幕格式。
in order to have the caption appear on the right side I added some css rules and a specific HTML caption format.
这是右侧字幕显示的jfiddle： http： //jsfiddle.net/tyuth1sr/23/
Here's a jfiddle of the right caption display: http://jsfiddle.net/tyuth1sr/23/
在您网站的自定义样式表中使用以下css，然后使用HTML格式的字幕：
Use the following css on your website's custom stylesheet, then use the HTML format for the captions:
CSS
/*
* flexslider slide styling
*/
.slides {
overflow: hidden !important;
}
.slides div .flex-caption {
overflow: scroll !important;
}
/*
* flexslider caption styling
*/
.flex-caption {
position: absolute;
text-align: left;
font-size: 11px;
background:rgba(255, 255, 255, 0.7);
z-index: 100;
padding: 20px 10px 35px 30px;
width: 287px;
padding-top: 100%;
bottom: 0px;
color: #000;
}
.right {
right: 0;
margin-bottom: 0px;
}
.show-caption {
position: absolute;
top: 48%;
right: 240px;
z-index: 99;
opacity: 0.7;
filter: alpha(opacity=70); /* For IE8 and earlier */
pointer-events: none;
}
并格式化您的flexslider标题，如下所示：
HTML
And format your flexslider captions like so: HTML
<ul class="slides" id="slideshow" ondragstart="return false;">
<li>
<img src="https://iluvmafuckinglife.files.wordpress.com/2012/04/256989-a-sphere-sculpture-made-from-easter-eggs-is-on-display-on-the-day-of-i.jpg" />
<div class="flex-caption right">
<div class="caption-content">
<p><span class="hcaption">Caption 1</span></p>
<br /><br />
<p class="hcap">Caption 1 text goes here.</p>
</div>
</div>
</li>
<li>
<img src="http://s3-ec.buzzfed.com/static/enhanced/web05/2012/2/8/11/enhanced-buzz-wide-29760-1328717305-32.jpg" />
<div class="flex-caption right">
<div class="caption-content">
<p><span class="hcaption">Caption 2</span></p>
<br /><br />
<p class="hcap">Caption 2 text goes here.</p>
</div>
</div>
</li>
请注意，您可以通过删除flexslider幻灯片的任何一面，使字幕出现。右css位置指定right：0px，并添加left：0px，top：0px;或bottom：0px;取决于你想要它出现在哪里。您还必须调整文本格式/背景填充CSS，使其正确显示在其他位置。
Please note that you can make the caption appear on over any side of the flexslider slide by removing the .right css position specification of "right: 0px" and adding "left: 0px", "top: 0px;" or "bottom: 0px;" depending on where you want it to appear. You would also have to tweak the text formatting/background padding CSS to make it appear properly in one of those other positions.
这篇关于FlexSlider：在右侧垂直获取标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
