'Responsive image slider using picture element?

Does anyone know of an open source code or snippet example of a responsive image slider with < > navigation controls that uses picture element when resized? I've tried repurposing so many free ones and nothing seems a good reliable fit. I would prefer it be pure css but I can work with JavaScript if need be.

Any suggestions would be appreciated.

Adam.

jqueryhtmlcssresponsive-design


Solution 1:[1]

Just recommended FlexSlider to someone else yesterday.

Solution 2:[2]

Slick Carousel will do the job...

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

In regards to using the picture element here is an example...

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>

JS

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

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

Available for WordPress here...

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

Unfortunately, the WordPress version is not open source :(

Solution 3:[3]

You can use below free sliders. My favorite is Owl Carousel.

Swiper- https://swiperjs.com/

Owl Carousel- https://owlcarousel2.github.io/OwlCarousel2/

Slick- https://kenwheeler.github.io/slick/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 noob
Solution 2
Solution 3

Related Questions