samuelsimoes/sam-slider

Lightweight jQuery plugin to help you create simple and flexible sliders

#jQuery.samSlider

jQuery.samSlider is a lightweight (~191 LOC) jQuery plugin to help you create simple and flexible sliders with slide or fade effect (but you can create your custom slide transition strategy too) with pagination and next/previous button.

##How to use To use SamSlider, you first need create the basic markup of your slider and add the basic CSS style.

<div class="container" id="slider">
  <div class="slides">
    <img src="1.jpeg" class="slide" />
    <img src="2.jpeg" class="slide" />
  </div>

  <div class="pagination-ctn">
  </div>

  <div class="controls">
    <a href="#" class="previous-btn">
      Previous slide
    </a>
    <a href="#" class="next-btn">
      Next slide
    </a>
  </div>
</div>

.container .slides,
.container .slide {
  width: 640px;
  height: 300px;
}

.container .slides {
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  position: relative;
}

After this you need call the plugin:

$("#slider").samSlider(options);

##Options

Option	Description	Default
previousButtonSelector, nextButtonSelector	Previous/Next control buttons.	.previous-btn, .next-btn
auto	Automatic slides change.	true
interval	Slide wait interval in ms.	2000
pagination	If you want generate the slides pagination control.	true
paginationContainerSelector	The pagination container CSS selector.	.pagination-ctn
effect	The slide transition effect.	slide
slidesContainerSelector	The container CSS selector with the slides.	.slides
slideSelector	The node CSS selector of a slide.	.slide
customTransitionStrategy	Your custom slide transition strategy.	--

##Events/Triggers

Event Name	Description
sam-slider:showing-slider	Triggered when a new slider is shown.
sam-slider:show-slide	Trigger to show an specific slide based in the index (starting with 0).
sam-slider:next-slide, sam-slider:previous-slide	Trigger to show the next/previous slide.

##Custom slide transition

You can create custom slide transition strategies and use in SamSlider, below an example, the default fade transition strategy of SamSlider.

SamSlider.FadeTransition = function(rootNode, childrenNodes) {
  this.nodes = childrenNodes;
};

SamSlider.FadeTransition.prototype = {
  showNode: function (options) {
    var nodeToShow = this.nodes.eq(options.nodeToShowIndex);

    if (typeof options.visibleNodeIndex != "undefined") {
      this.nodes.eq(options.visibleNodeIndex).fadeOut(250);
    }

    nodeToShow.delay(250).fadeIn(500);
  }
};

---

Samuel Simões ~ (@samuelsimoes)