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，使其正確顯示在其他位置之一。