使用图片元素的响应式图像滑块？答案

【问题标题】：Responsive image slider using picture element?使用图片元素的响应式图像滑块？
【发布时间】：2016-08-04 02:13:19
【问题描述】：

有谁知道带有导航控件的响应式图像滑块的开源代码或 sn-p 示例，在调整大小时使用图片元素？我尝试过重新利用这么多免费的，但似乎没有什么是可靠的。我希望它是纯 css，但如果需要，我可以使用 JavaScript。

任何建议将不胜感激。

亚当。

【问题讨论】：

你试过 Slick kenwheeler.github.io/slick 吗？

标签： jquery html css responsive-design

【解决方案1】：

昨天刚刚向别人推荐了FlexSlider。

【讨论】：

你可以在没有 Wordpress 的情况下使用它吗？
是的，你可以在没有 wordporess 的情况下使用它

【解决方案2】：

Slick Carousel 将完成这项工作...

http://kenwheeler.github.io/slick/

关于使用图片元素这里是一个例子......

HTML

<div class="your-class">
  <picture>
     <img src="http://placehold.it/350x150">
  </picture>
  <picture>
     <img src="http://placehold.it/351x151">
  </picture>
  <picture>
     <img src="http://placehold.it/352x152">
  </picture>
</div>

$(document).ready(function(){
    $('.your-class').slick({
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1
    });
});

JsFiddle： https://jsfiddle.net/kennethcss/u0b9dx8a/

在此处可用于 WordPress...

http://maxgalleria.com/downloads/slick-slider-for-wordpress/

很遗憾，WordPress 版本没有开源:(

【讨论】：

当定义了多个来源时，Slick 实际上不适用于图片元素（这确实是使用图片元素的唯一原因）。

【解决方案3】：

您可以参考 jssor 以获取响应式滑块以及更多内容。下面是链接，看看就好。

http://www.jssor.com/download.html

【讨论】：