nivo slider - добавить текст в слайдер

Question

В настоящее время я использую слайдер nivo на своей домашней странице, чтобы показывать разные изображения.Работает отлично.Хотя рядом с изображениями есть некоторый текст, который я хотел бы проследить за каждой картинкой.

Вот код HTML:

     <!-- Splash -->
            <div class="splash">
              <div class="splash-content">
<div id="text1">                
<h1>More traffic to your website</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elitectetur adipis. In ultrices malesuada est eu laoreet. Nullam eget tellus ac lacus bibendum egestas et at libero. Vestibulum commodo magna ut suscipit.</p>
</div>                
              </div>

            <div id="slider" class="nivoSlider nivo-right theme-default">
                <img src="images/splash.png" alt="" title="" />
                <img src="images/splash.png" alt="" title="" />
                <img src="images/splash.png" alt="" title="" />
                <img src="images/splash.png" alt="" title="" />

            </div>


        </div><!-- End Splash -->

Как вы можете видеть в коде HTML,есть <div id="slider">, который является ползунком nivo.Хотя я бы хотел, чтобы <div id="text1"> следил за каждой картинкой.Затем укажите <div id="#text2">, чтобы следовать за следующим изображением и т. Д.

Код jQuery для управления ползунком nivo:

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'sliceUp', // Specify sets like: 'fold,fade,sliceDown'
    });
});
</script> 

Заранее спасибо.

Answer 1

Используйте атрибут title в <img />, чтобы определить текст, который будет отображаться в качестве заголовка на слайдере.

---

Давайте рассмотрим пример:

<div id="slider" class="nivoSlider">
    <img src="images/slide1.jpg" alt="" />
    <img src="images/slide2.jpg" alt="" title="#htmlcaption" />
                                             <!-- ^ This is one way to bring caption -->
    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
                                             <!-- ^ This is ANOTHER way -->
</div>

<!-- This part of caption is called from the second image link above see  `#htmlcaption` there -->
<div id="htmlcaption" class="nivo-html-caption">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>

---

Обновление

Не взламывая код, вы можете переопределить класс по умолчанию для отображения в виде отдельного текстового поля.

Найти стиль .nivo-caption и внести в него некоторые изменения

.nivo-caption { 
       width: 200px; 
       height: 250px; 
       left: -200px; /* same as the width */
 }

Обновление 2

Вот демоверсия с вашим ползунком, работающим с упомянутым мною обходным путем.

ТАК, насколько этот вопрос идет, вот где я остановлюсь. Надеюсь, это поможет.

Answer 2

<div id="slider" class="nivoSlider">
 <div class="slide slide_0">
   <img class="slide-image" src='img1.png' width="100%"  title="#htmlcaption_0">
 </div>
 <div class="slide slide_1">
   <img class="slide-image" src='img2.png' width="100%"  title="#htmlcaption_1">
 </div>
 <div class="slide slide_2">
   <img class="slide-image" src='img3.png' width="100%"  title="#htmlcaption_2">
 </div>
</div>

<div id="htmlcaption_0" class="nivo-html-caption">
 <h1 class="slide-h1">Title</h1>
 <h2 class="slide-h2">Description</h2>
 <h3 class="slide-h3">
   <a href="#" title="">Learn More &raquo;</a>
 </h3>
</div>
<div id="htmlcaption_1" class="nivo-html-caption">
 <h1 class="slide-h1">Title</h1>
 <h2 class="slide-h2">Description</h2>
 <h3 class="slide-h3">
   <a href="#" title="">Learn More &raquo;</a>
 </h3>
</div>
<div id="htmlcaption_2" class="nivo-html-caption">
 <h1 class="slide-h1">Title</h1>
 <h2 class="slide-h2">Description</h2>
 <h3 class="slide-h3">
   <a href="#" title="">Learn More &raquo;</a>
 </h3>
</div>

Вот мой css:

.nivo-caption {
  color: #FFFFFF;
  min-width: 550px;
  overflow: hidden;
  position: absolute;
  top: 180px;
  z-index: 8;
}

.nivo-html-caption {
  display:none;
}

Надеюсь, это поможет.

Answer 3

Посмотрите эту демонстрацию, у них есть подписи.

Answer 4

Поместите свой текст в заголовок, и затем вы можете внести изменения css в класс nivo-caption, например, попробуйте указать width и float.

.nivo-caption{width:40px;float:right;}

Или вы можете переключиться на другой слайдер извините.

Вот ссылка это то, что вы ищете?