jQuery nivo 滑块 - 向滑块添加文本

nivo slider - add text to the slider

提问by oliverbj

I am currently using the nivo slider on my homepage, to show different images. It works perfectly. Although, next to the images there are some text, which I would like to follow each picture.

我目前正在主页上使用 nivo 滑块来显示不同的图像。它完美地工作。虽然，在图像旁边有一些文字，我想跟随每张图片。

Here is the HTML code:

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

As you can see in the HTML code, there is the <div id="slider">, which is the nivo slider. Although, I wish to have the <div id="text1">to follow each picture. Then have a <div id="#text2">to follow the next image and so on.

正如您在 HTML 代码中看到的，有<div id="slider">，这是 nivo 滑块。虽然，我希望有<div id="text1">跟踪每张照片。然后有一个<div id="#text2">跟随下一个图像等等。

The jQuery code to control the nivo slider:

控制 nivo 滑块的 jQuery 代码：

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

Thanks in advance.

提前致谢。

回答by Starx

Use titleattribute in the <img />to define text to appear as caption in the slider.

使用 中的title属性<img />来定义要在滑块中显示为标题的文本。

---

---

Lets see an example:

让我们看一个例子：

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

---

---

Update

更新

Without hacking the code, you can override the default class to appear as a separate text box.

在不修改代码的情况下，您可以覆盖默认类以显示为单独的文本框。

Find .nivo-captionstyle and make some changes to it

找到.nivo-caption样式并对其进行一些更改

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

Update 2

更新 2

Here is a demowith your slider working with the workaround i mentioned.

这是一个演示，您的滑块与我提到的解决方法一起工作。

SO far as this question goes, this is where i stop. Hope it helps.

就这个问题而言，这就是我停下来的地方。希望能帮助到你。

回答by Abhilash Shamsunder

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

Here's my css:

这是我的CSS：

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

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

Hope this helps.

希望这可以帮助。

回答by Riz

See this demo, they have captions.

看这个演示，他们有字幕。

回答by Sunil Silumala

Put your text in the title and then you can make css changes to class nivo-caption, for example try giving width and float.

将您的文本放在标题中，然后您可以对 class 进行 css 更改nivo-caption，例如尝试提供宽度和浮动。

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

Or else you can switch to other slider sorry.

否则你可以切换到其他滑块抱歉。

Here is linkis this what you looking for?

这是您要找的链接？