nivo滑块 - 向滑块添加文本 [英] nivo slider - add text to the slider

问题描述

我目前在我的主页上使用nivo滑块，以显示不同的图像。它完美的作品。虽然，在图片旁边有一些文字，我希望按照每张图片。

以下是HTML代码：

 <！ -  Splash  - > 
< div class =splash> 
< div class =splash-content> 
< div id =text1> 
< h1>为您的网站带来更多流量< / h1> 
< p> Lorem ipsum dolor sit amet，consectetur adipiscing elitectetur adipis。在ulles malesuada est eu laoreet。 Nullam eget tellus ac lacus bibendum egestas et at libero。 Vestibulum commodo magna ut suscipit。< / p> 
< / div> 
< / div> 
 
< div id =sliderclass =nivoSlider nivo-right theme-default> 
< img src =images / splash.pngalt =title =/> 
< img src =images / splash.pngalt =title =/> 
< img src =images / splash.pngalt =title =/> 
< img src =images / splash.pngalt =title =/> 
 
< / div> 
 
 
< / div><！ -  End Splash  - > 
  

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

用于控制nivo滑块的jQuery代码：

 < script type =text / javascript> 
 $（window）.load（function（）{
 $（'＃slider'）。nivoSlider（{
 effect：'sliceUp'，//指定集合：'fold，fade ，sliceDown'
}）; 
}）; 
< / script> 
  

预先致谢。

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

---

让我们看一个例子：

 < div id =sliderclass =nivoSlider> 
< img src =images / slide1.jpgalt =/> 
< img src =images / slide2.jpgalt =title =＃htmlcaption/> 
 <！ -  ^这是一种带标题的方法 - > 
  <！ -  ^这是另一种方式 - > 
< / div> 
 
 <！ - 这部分标题从上面的第二个图像链接调用，请参阅`＃htmlcaption`那里 - > 
< div id =htmlcaptionclass =nivo-html-caption> 
< strong>这个< / strong>是< em> HTML< / em>的一个示例。带有< a href =＃>链接< / a>的标题。 
< / div> 
  

---

更新

$
$ b 找到 .nivo- b $ b

标题样式并对其进行一些更改

  .nivo-caption {
 width：为200px; 
 height：250px; 
 left：-200px; / *与宽度相同* / 
} 
  

更新2

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

就这个问题而言，这就是我停止的地方。希望它有帮助。

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.

Here is the HTML code:

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

The jQuery code to control the nivo slider:

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

Thanks in advance.

解决方案

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

---

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-caption style and make some changes to it

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

Update 2

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

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

这篇关于nivo滑块 - 向滑块添加文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！