simpleslider

Slider jquery plugin

Document

There is a new way of slider plugin and the plugin creating.

Before use this plugin, you use two CSS files:
Default.css // There is an Eric Meyer's reset tool
simpleslider.css // The simpleslider CSS

Here is the config variables:

• sliderItemClass : '.slider-item' // List item class
• navigationItems: // Navigation item object
  • arrows: // Arrows object
    • enabled : true, // If true the arrow is show
    • isStartAllArrows : true, // If true, show two arrows at begin
    • leftArrow:
      • btnId : 'left-btn', // DOM id
      • btnString : '' // Button string
    • rightArrow:
      • btnId : 'right-btn',
      • btnString : ''
    • pagination: // Pagination object
      • enabled : true, // If true, the pagination is display
      • properties:
        • listContainerClass : 'slider-pagination',
        • isDiplayNumber : false // If true, show the pagination number

  	</ul>
  </li>
  <li>
  	<strong>autoPlayProperties: // Autoplay object</strong>
  	<ul>
  		<li>
  			enabled : false, // If true, the autoplay slide start
  		</li>
  		<li>
  			timeValue : 1000 // Autoplay time
  		</li>
  	</ul>
  </li>
  <li>
  	<strong>animationProperties: // Animation object</strong>
  	<ul>
  		<li>
  			speed : 1000, // Animation speed
  		</li>
  		<li>
  			easing : 'swing' // Animation easing, use the easing.js plugin
  		</li>
  	</ul>
  </li>
  <li>	
  	displayShowItemNumber : 1, // Display slide item
  </li>
  <li>
  	enableItemClickEvent : false, // If true, the slide item is clicking 
  </li>
  <li>
  	position : 'relative', // The slide container position
  </li>
  <li>
  	onClickedItemEvent : function(el) { console.info(el); } // Clicked item function, el param is the clicked element
  </li>
  

  For example, see in the index.html file