jQuery-Slider is lightweight content sliders with no html or css overhead
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
images
Readme.md
demo.html
vulsaiSlider.js
vulsaiSlider.min.js

Readme.md

jQuery Vulsai Slider

vulsaiSlider is a jQuery plugin that allows you to create fancy and lightweight content sliders with no html or css overhead.

How to install

Download from https://github.com/Vulsai/jQuery-Slider/downloads

How to use (Example)

Add your markup

  <div id="controls">
    <a id="prev" href="#">&laquo; Previous</a>
    <a id="next" href="#">Next &raquo;</a>
  </div>
  <div id="slider">
    <ul>
      <li><img src="images/1.jpg" alt="" /></li>
      <li><img src="images/2.jpg" alt="" /></li>
      <li><img src="images/3.jpg" alt="" /></li>
      <li><img src="images/4.jpg" alt="" /></li>
      <li><img src="images/5.jpg" alt="" /></li>
    </ul>
  </div>
  <div id="thumbs">
    <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
    </ul>
  </div>

After adding your jQuery script tag insert

<script type="text/javascript" src="your/path/to/vulsaiSlider.min.js"></script>
<script>
  $(function(){
        $('#mydiv').vulsaiSlider(options);
    });
</script>

Required CSS

/*- Define a width for the container and the slides -*/
#slider, #slider li {width:500px; overflow:hidden;}
#slider li img {display:block; width:100%; height:auto;}

/*- If the animation is fade you need to define a height to the container and the slide -*/
#slider.fade,
#slider.fade li {height:315px;}
#slider.fade li {position:absolute; left:0; top:0; z-index:1;}
#slider.fade li img {min-height:315px;}

/*- If the animation is slide, you must float the slides -*/
#slider.slide ul, #slider.slide li {float:left;}
#slider.slide ul {position:relative; width:32767px;}

Features

  • Support for slide and fade transitions
  • Next / Prev controls
  • Selectable thumbnails
  • Automatic mode with time interval option
  • Infinite mode (After the last element goes back to the first one)
  • Controls opacity

Options

  • transition defaults to fade

    • The transition type, 'fade' and 'slide' are currently supported
  • thumb_list_id defaults to #thumbs

    • The thumbs container, can be any DOM element
  • prev defaults to #prev

    • The previous control, can be any DOM element
  • next defaults to #next

    • The next control, can be any DOM element
  • nav_opacity defaults to .3

    • The disabled control opacity, values from 0 to 1 are useful
  • fade_opacity defaults to .2

    • The transition fade opacity, values from 0 to 1 are useful
  • infinite defaults to false

    • Enable or disable the infinite repetition of the content
  • automatic defaults to false

    • Enable or disable the auto start of the slider transitions
  • width defaults to false

    • Set the width for setting how many pixels the slider should move. Default gets the slider element width.
  • steps defaults to null

    • The number of steps you want to use, useful to move just a segment of the slider.

    • steps defaults to null

    • The number of steps you want to use, useful to move just a segment of the slider.

    • onBeforeSlide defaults to null

    • Callback to trigger before a slide
  • onBeforeSlide defaults to null

  • Callback to trigger after a slide