nivo 滑块 - 向滑块添加文本

2022-01-24 00:00:00 slider jquery html

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

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.

这是 HTML 代码:

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

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

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.

控制 nivo 滑块的 jQuery 代码:

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>

提前致谢.

推荐答案

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

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

让我们看一个例子:

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

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

Find .nivo-caption style and make some changes to it

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

更新 2

这是一个演示，您的滑块使用我提到的解决方法.

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.

相关文章