加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

带有图像缩略图的jQuery Slider

发布时间:2020-12-14 23:17:24 所属栏目:资源 来源:网络整理
导读:我需要一个带有thumnail卷轴的jquery滑块,类似于附加的这个图像.任何人都可以发送链接到这样的jquery carausel.谢谢:) 最佳答案 你有多个滑块可以实现这个目的. 我个人总是使用flexslider,但nivoslider也是一个不错的选择. http://flexslider.woothemes.com/

我需要一个带有thumnail卷轴的jquery滑块,类似于附加的这个图像.任何人都可以发送链接到这样的jquery carausel.谢谢:)

最佳答案
你有多个滑块可以实现这个目的.
我个人总是使用flexslider,但nivoslider也是一个不错的选择.

http://flexslider.woothemes.com/thumbnail-slider.html

http://creative.glenfield.net/nivoexamples3.aspx

你的滑块主要是css.

我认为对于你的情况你会使用flexslider.

你需要创建2个滑块.
1作为另一个的导航.
以下是flexslider所有选项的链接:
https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties

对于主滑块,您可以使用下方选项设置3项可见.

minItems    0   Number Minimum number of carousel items that should be visible.
maxItems    0   Number Maximum number of carousel items that should be visible.
move    0   Number Number of carousel items that should move on animation.

使用下面的代码将1个滑块用作另一个滑块.

$(window).load(function() {
  // The slider being synced must be initialized first
  $('#carousel').flexslider({
    animation: "slide",controlNav: false,animationLoop: false,slideshow: false,asNavFor: '#slider'
  });

  $('#slider').flexslider({
    animation: "slide",sync: "#carousel"
  });
});

希望我能把你推向正确的方向.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读