FlexSlider：在右侧垂直获取标题

Question

我正在使用酷酷的Felxslider在SharePoint安装上显示幻灯片。 它工作得很好，但我仍然有两个问题：

如何显示字幕（你知道，小透明背景的图片的标题/描述）没有在底部的图片，但在右侧？

如果可能的话，不要悬停图片。

2-我有N张图片给谁，但滑块总是显示N + N图像，第一个额外的图像是克隆，但最后总是空白。 例如，我有3张照片可以显示，但滑块会生成6张幻灯片：Number 4和Number 5是编号1和编号2的克隆，编号6是完全空白的。 无论我有多少张照片（如果我有2张照片要显示，它都会显示4张），它会显示如此多的照片。

你对如何摆脱所有这些克隆有任何想法吗？

非常感谢你的回答，祝你有美好的一天！

Answer 1

为了让标题出现在右侧，我添加了一些css规则和特定的HTML标题格式。

这里是正确的字幕显示的jfiddle：http://jsfiddle.net/tyuth1sr/23/

使用在您的网站的自定义样式表下面的CSS，然后使用字幕的HTML格式：

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

   <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> 

请注意，您可以通过删除.right css位置规范“right：0px”并添加“left：0px”，“top：0px;”来使标题出现在flexslider幻灯片的任何一侧。或“bottom：0px;”取决于你想要它出现在哪里。你还必须调整文本格式/背景填充CSS，使其正确显示在其他位置之一。