Newsletter #2: Beautiful Sliders with Bootstrap + SwiperJS

by

bootstrap-slider-swiperjs

Hi and welcome to the AZMIND newsletter!

(This is the web version, I’m also publishing these emails on the website for future reference and for those who prefer to read them on the website.)

The Bootstrap front-end framework is great if you ask me, but it has some weak points, for example:

  • It has a learning curve: you have to dive into its documentation for a few days to begin using it successfully;
  • It can be a bit heavy if you’re aiming for website speed;
  • And the point we’ll be focusing in this email: it can make websites built with it very similar if you don’t heavily customize it.
  • Actually, there’s another point for today: its images slider doesn’t have many features.

But, there are also good points: Bootstrap is very flexible, offering many components, a great documentation, and you can integrate and enrich it with many other libraries.

Want to Save this Article?

Like for example: SwiperJS, a great slideshow Javascript library that is:

  • modern,
  • touch-enabled,
  • with hardware accelerated transitions,
  • with a myriad of different types of sliders (I provide two examples with free templates below).

I discovered it while looking for a slider to add to my next premium template, which I’ll release when I open my new subscription-based section of this website that’ll be ready next month, I hope. (I discussed it in the last email I sent you.)

And with these thoughts in mind (and also to become better at using this slider), I’ve created two templates with two different sliders that I’m offering you for free today. You can download and preview them from the links below.

I hope they can help you in your web design adventures: for client work, your personal projects, or just inspiration so you can see what’s possible with this library.

Some people may already know and use SwiperJS, and may be “laughing” now on the fact that I don’t know this famous JS library, to whom I can say: well, no one knows everything, and curiosity is what makes us love this web design thing.

But anyway, here are the templates:

Template 1: Text Slideshow with Parallax Background Image

A quite classic slideshow for various types of uses.

bootstrap-slider-swiperjs-1

LIVE PREVIEW – SUBSCRIBE TO DOWNLOAD

Template 2: Coverflow Effect Slider with Background Image

Interesting coverflow effect you can use to present products, for example. And amaze your clients!

bootstrap-slider-swiperjs-2

LIVE PREVIEW – SUBSCRIBE TO DOWNLOAD

Hope you like them!

Thanks for reading,
Anli

Leave a Comment