CODEWITHSUNDEEP
jqueryhtmlcssresponsive-design
adambwhitten
adambwhitten

Reputation: 116

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.

Upvotes: 0

Views: 3017

Answers (3)

user3767035
user3767035

Reputation:

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/

Upvotes: 0

Kenneth Stoddard
Kenneth Stoddard

Reputation: 1449

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

Upvotes: 1

noob
noob

Reputation: 490

Just recommended FlexSlider to someone else yesterday.

Upvotes: 1

Related Questions