Basic Any Content Slider Plugin For jQuery - Flexi Slider

File Size: 2.95 MB
Views Total: 1696
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Basic Any Content Slider Plugin For jQuery - Flexi Slider

Flexi slider is a simple, easy, flexible jQuery slider plugin that you can put whatever you want inside it. It does not matter if it is a wall of text or a picture. You can even load it from a database through PHP or whatever you feel like.

How to use it:

1. Load jQuery Javascript library and the jQuery flexi slider plugin in the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/flexi-slider.js"></script>

2. Create the left arrow container for your slider. You can put whatever image in here and the slider will count its height and will position it right in the middle

<div class="left-arrow-container">
  <img class="slider-left" src="img/left.png" alt="left arrow"> 
</div>

3. Create slides for your slider. Each slide is a separate div element, CSS is included in the slider app so you need to style only the things you put inside the div with class="slide".

<div class="slides">
  <div class="slide"> Slide 1 </div>
  <div class="slide">
    <div class="slide2"> Slide 2 </div>
  </div>
  <div class="slide">
    <div class="slide3"> Slide 3 </div>
  </div>
</div>

4. This is the right arrow remember to put first the left arrow then the slides and then the right arrow or if you do not want to, you do not have to put the arrows they just will not appear.

<div class="right-arrow-container"> 
  <img class="slider-right" src="img/right.png" alt="right arrow"> 
</div>

5. Wrap the arrow containers and slides in a wrapper 'slider' and you're done.

<div class="slider"> 

 ...

</div>

This awesome jQuery plugin is developed by StillNotDead. For more Advanced Usages, please check the demo page or visit the official website.