FlexSlider: получить заголовок вертикально с правой стороны

Question

Я использую классный Felxslider для показа слайд-шоу на установке sharepoint. она работает достаточно хорошо, но я все еще есть два вопроса:

1-Как отобразить заголовок (вы знаете, маленький прозрачный фон с заголовком/описанием картины) не на день изображения, но с правой стороны?

И не зависните изображение, если это возможно.

2- У меня есть N изображений для whos, но ползунок всегда отображает N + N изображений, первые дополнительные - это клоны изображений, но последнее всегда просто пустое. Например, у меня есть 3 изображения, но слайдер генерирует 6 слайдов: число 4 и число 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> 

Обратите внимание: вы можете сделать надпись на любой стороне слайда flexslider, удалив спецификацию позиции .right css «right: 0px» и добавив «left: 0px», «top: 0px;» или "bottom: 0px;" в зависимости от того, где вы хотите, чтобы он появился. Вам также нужно будет настроить CSS-форматирование текста/фона, чтобы он отображался правильно в одной из этих других позиций.