jQuery.rotatingSlideshow

Simple jQuery plugin that allows you to create unique, but limited slideshow layout. It is design only to contain 4 slides and it colors and images can be adjusted by changing the .psd files included into project.

Demo

Check out the demo example here.

Dependencies

The plugin requires jQuery 1.9 or higher.

Installation

To start using the plugin, simply include css file in the head section then add necessary html code and script file somewhere after jQuery library, preferably at the bottom of the page, like on the example below:

<!DOCTYPE html>
<html>
  <head>
    <!-- css -->
    <link href="~/jquery.rotatingSlideshow.css" rel="stylesheet" />
  </head>
  <body>
    <div class="rotating-slideshow">
        <div id="slider-main" data-position="1" data-deg="0">
            <div id="slider-btns" class="button">
                <a id="pos1" href="#" class="pos1" data-position="1"></a>
                <a id="pos2" href="#" class="pos2" data-position="4"></a>
                <a id="pos3" href="#" class="pos3" data-position="3"></a>
                <a id="pos4" href="#" class="pos4" data-position="2"></a>
            </div>
            <div class="slider-overlay">
                <div class="active" data-position="1">
                	<h3>Different</h3>
                  <p>Optional text goes here</p>
                </div>
                <div data-position="2">
                	<h3>Creative</h3>
                  <p>Optional text goes here</p>
                </div>
                <div data-position="3">
                	<h3>Fancy</h3>
                  <p>Optional text goes here</p>
                </div>
                <div data-position="4">
                	<h3>Solutions</h3>
                  <p>Optional text goes here</p>
                </div>
            </div>
            <div class="slides">
                <img class="active" src="images/slide1.jpg" data-position="1">
                <img src="images/slide4.jpg" data-position="2">
                <img src="images/slide3.jpg" data-position="3">
                <img src="images/slide2.jpg" data-position="4">
            </div>
            <img class="spinner-btn" src="images/button.png" alt="">
            <img class="spinner" src="images/slides-overlay.jpg" alt="">
        </div>
        <audio id="slider-sound" preload="auto">
            <source src="sound/sound.mp3">
            This browser does not support the HTML5 audio tag.
        </audio> 
    </div>
    
    <!-- scripts -->
    <script src="~/jquery.{>= 1.9}.min.js"></script>
    <script src="~/jquery.rotatingSlideshow.js"></script>
  </body>
</html>

Usage

After you included script into your page, you need to initialize slideshow plugin. It can be done like on the example below:

<!DOCTYPE html>
<html>
  <head>
    <!-- css -->
    <link href="~/jquery.rotatingSlideshow.css" rel="stylesheet" />
  </head>
  <body>
    <div class="rotating-slideshow">
        <div id="slider-main" data-position="1" data-deg="0">
            <div id="slider-btns" class="button">
                <a id="pos1" href="#" class="pos1" data-position="1"></a>
                <a id="pos2" href="#" class="pos2" data-position="4"></a>
                <a id="pos3" href="#" class="pos3" data-position="3"></a>
                <a id="pos4" href="#" class="pos4" data-position="2"></a>
            </div>
            <div class="slider-overlay">
                <div class="active" data-position="1">
                	<h3>Different</h3>
                  <p>Optional text goes here</p>
                </div>
                <div data-position="2">
                	<h3>Creative</h3>
                  <p>Optional text goes here</p>
                </div>
                <div data-position="3">
                	<h3>Fancy</h3>
                  <p>Optional text goes here</p>
                </div>
                <div data-position="4">
                	<h3>Solutions</h3>
                  <p>Optional text goes here</p>
                </div>
            </div>
            <div class="slides">
                <img class="active" src="images/slide1.jpg" data-position="1">
                <img src="images/slide4.jpg" data-position="2">
                <img src="images/slide3.jpg" data-position="3">
                <img src="images/slide2.jpg" data-position="4">
            </div>
            <img class="spinner-btn" src="images/button.png" alt="">
            <img class="spinner" src="images/slides-overlay.jpg" alt="">
        </div>
        <audio id="slider-sound" preload="auto">
            <source src="sound/sound.mp3">
            This browser does not support the HTML5 audio tag.
        </audio> 
    </div>
    
    <!-- scripts -->
    <script src="~/jquery.{>= 1.9}.min.js"></script>
    <script src="~/jquery.rotatingSlideshow.js"></script>
    <script>
  	$(document).ready(function(){
  	  $('.rotating-slideshow').rotatingSlideshow({
  		sliderHolder: '#slider-main',
  		btnsHolder: '#slider-btns',
  		audioHolder: '#slider-sound',
  		auto: true,
  		autoSpeed: '6000'
  	  });
  	});
	</script>
  </body>
</html>

###options (defaults)

sliderHolder [String] : ID of the main container.
btnsHolder [String] : ID of the buttons container.
audioHolder [String] : ID of the sound container.
auto [Boolean] : Turn on true or off false auto rotation.
autoSpeed [Number] : Delay between the slides (ms).

Licence