Jun 24, 2015

Plugin That Lets You Create a Responsive Slider

blogpost author photo
Paweł Przymusiała
blogpost cover image
Simple steps to beautify your website. ;)

Step 1 – Choose slider

10 examples:

Plugin: flexslider Demo/download: http://woothemes.com/flexslider

Plugin: camera slider Demo/download: http://pixedelic.com/plugins/camera

Plugin: unslider Demo/download: http://unslider.com

Plugin: tympanus – StackSlider Demo/download: http://tympanus.net/Development/StackSlider

Plugin: tympanus – ItemSlider Demo/download: http://tympanus.net/Tutorials/ItemSlider

Plugin: pgwjs Demo/download: http://pgwjs.com/pgwslider

Plugin: responsiveslides Demo/download: http://responsiveslides.com

Plugin: jssor Demo/download: http://jssor.com/demos/list-slider.html

Plugin: basic-slider Demo/download: http://basic-slider.com

Plugin: owlcarousel Demo/download: http://owlcarousel.owlgraphic.com/demos/demos.html

Step 2 – Include files

Depending on the chosen solution, add CSS/JS files in the <head> section, e.g.

<link rel="stylesheet" href="....css" type="text/css">
<script src="jquery.min.js"></script>
<script src="....js"></script>

Step 3 – Add markup

Prepare a list of slides according to the requirements of the plugin, e.g.

<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
  <ul class="slides">
      <img src="slide1.jpg" />
      <img src="slide2.jpg" />
      <img src="slide3.jpg" />

Step 4 – Call the plugin

Finally, call the slider initializer function (e.g. in <head>) and that’s all. You can find examples on plugins pages.

Step 5 – Customizing

Do you need to change the template of content? Animations, colors, etc? All plugins are customizable!

That’s all. Enjoy!