A jQuery plugin for displaying sliding html content
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
images
README
README.md
blank.gif
iepngfix.htc
index.html
jquery.contentSlider.js
jquery.contentSlider.min.js
style.css

README.md

Content Slider

jQuery Plugin

Content Slider is a simple and elegant jQuery plugin that displays sliding html content. This plugin was inspired by Chris Coyier's Start/Stop Slider which i came across when i was working on a project that required a slide showcase for products.

Features:

  • Slides any type of html content
  • Shows navigation buttons on hover
  • Pauses slide show on hover
  • Transparent png fix for IE6 users
  • Runs in all major browsers (IE6 included)

Browser Support

  • Internet Explorer v6+
  • Firefox v2+
  • Apple Safari
  • Google Chrome
  • Opera

How to use

Content Slider uses the following files:

  • jQuery-1.6.1.js
  • content-slider.css
  • jquery.contentSlider.js
  • iepngfix.htc (for png fix in IE6)

CSS

<link href="style.css" rel="stylesheet" type="text/css" />

Include the Content Slider css in the head section of of your html page.

HTML

<div id="slider">
    <div id="mover">
        <div class="slide">
		    <!-- Slide content here -->
        </div>
		
        <div class="slide">
		    <!-- Slide content here -->
        </div>
		
        <div class="slide">
		    <!-- Slide content here -->
        </div>
		
        <div class="slide">
		    <!-- Slide content here -->
        </div>
    </div>
</div>

Make sure the content is wrapped inside divs with a 'slide' class name JavaScript.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#mover").contentSlider({
        autoStart: true,
        registerButtons: ture,      
        animateImg: true,
        timeOut: 5000,
        repeats: 0,
        speed: 300
    });	
});
</script>

Include the javaScript code above at the botttom of your page(just before the closing body tag) and edit necessary options.

OPTIONS:

  • autoStart - (@boolean, @default = true) Triggers the Content Slider to run as soon as the page loads.
    $(document).ready(function() {
        $("#mover").contentSlider({
            autoStart: true
        });	
    });
  • registerButtons - (@boolean, @default = true) If set to true, navigation buttons are displayed when the mouse hovers over sliding content.
    $(document).ready(function() {
        $("#mover").contentSlider({
            registerButtons: true
        });	
    }); 
  • animateImg - (@boolean, @default = true) Creates the "slide up and down" animation for images inside each panel slide.
    $(document).ready(function() {
        $("#mover").contentSlider({
            autoStart: true
        });	
    });
  • timeOut - (@int, @default = 5000) Interval between slides in microseconds.
    $(document).ready(function() {
        $("#mover").contentSlider({
            timeOut: 7000
        });	
    }); 
  • repeats - (@int, @default = 0) The number of times the Content Slider should repeat, a default of 0 will run the Content Slider only once.
    $(document).ready(function() {
        $("#mover").contentSlider({
            repeats: 0
        });	
    }); 
  • speed - (@int, @defaults = 300) The speed of animation transitions. Ranges between 200 and 600.
    $(document).ready(function() {
        $("#mover").contentSlider({
            speed: 300
        });	
    });