Enabling Thumbnails with the Nivo Slider

circujoker_06

于 2016-11-14 10:09:35 发布

阅读量256

点赞数

分类专栏：【jQuery插件---Nivo】

【jQuery插件---Nivo】专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何通过设置 controlNavThumbs 为 true 并利用 data-thumb 属性来指定图片的缩略图 URL，从而实现滑动展示中图片预览效果。此方法适用于希望在网页中加入图片轮播功能并带有缩略图预览的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

To use thumbnails with your slider you need to make sure controlNavThumbs is set to true. Then the slider will look for the URL of the thumbnail in the data-thumbattribute of the image. If no URL is provided, no thumbnail will be shown. For example:

<code><div id="slider"> 
    <img src="images/up.jpg" alt="" data-thumb="images/up_thumb.jpg" /> 
    <img src="images/monstersinc.jpg" alt="" data-thumb="images/monstersinc_thumb.jpg" /> 
    <img src="images/nemo.jpg" alt="" data-thumb="images/nemo_thumb.jpg" />     <img src="images/walle.jpg" alt="" data-thumb="images/walle_thumb.jpg" /> </div>