How to Build a Responsive Image Slider With Swiper.js

Sliders are a very useful pattern in web development because they’re an interactive way of presenting content. You can use them for image sliders, showcasing products, or even blog entries—they’re extremely versatile!

00:00 Introduction
02:26 Our project and course files
06:38 Let’s create a simple fade slider
20:35 Let’s create a complex slider

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

[kynunck]

Thank you! I struggled a lot with Swiper, and then I found your masterpiece! You're lifesaver.

[sameerasmr]

Amazing, Simple and Great way of teaching... I watch, write them and read all to get the idea (even though my desktop broken).
Thank you and long well 🙏

[nnejiben]

This video is so very helpful. This is one of the best I've seen on Swiper. The source code included is also very helpful. Thank you so much!

[randy]

Great class, I finally figured out how to have a swiperjs fill a responsive grid cell, this is so much easier than other methods, thank you!

[keinermendoza]

The best tutorial of swiper i've ever seen. 👏👏👏

[KorakotJarunongkran-dmue]

Thank you. This is very helpful I have looking centeredSlides all day.

[BilalMohammed]

Awesome tutorial. I like it so much. Expecting more content like this.❤

[RafaelHEscobar]

Thank you. This is a super clear and concise tutorial on how to use swiper.js.
As I'm pretty new to this language, I'd like to ask how could we activate multiple sliders on the same page with a single 'pack' of JS code and without one slider affecting the others in terms of functionality, because I tried to do it and what happened is that the nav elements nested in one section also move the images from other swipers across the whole page.

[tothemaxguy]

Hi Adi! Can you make a complete Javascript tutorial for beginners and advanced in the future? Thanks!

[abdulazizoqilov]

Assalam alekum thank you bro. Amazing, Simple and Great way of teaching...

[christogonusobasi]

Thanks for the awesome training.

Are items from the envato elements allowed of a Software as a Service app? For instance, can I use a HTML administrator theme for my client-area?

[frontEnd-qmmg]

What shortcut did you apply to comment on the div end ? Thanks

[kberwager]

How do I set Swiper slider images that are portrait (taller height) in a predominantly landscape orientation slider to auto fit and center so that it doesn't push the swiper viewport down the page and it looks bad.

[ankitchaudhary]

The pagination bullets are not visible after I wrote the Js code. Can anyone help me?

[pndvgaming]

how can we add comments like you, which extension are you using?

[SreekalaA]

Amazing..Can add forms to swiper js slides other than images?I want to add form validations too.

[lisofsky]

Здравствуйте! this slider only for mobile ?

[hamodi]

That’s a great tutorial, but you’re throwing way too much unnecessary sentences, just to expand the video duration