https://github.com/samuelsimoes/sam-slider

Lightweight jQuery plugin to help you create simple and flexible sliders
https://github.com/samuelsimoes/sam-slider

Last synced: 5 days ago
JSON representation

Lightweight jQuery plugin to help you create simple and flexible sliders

• Host: GitHub
• URL: https://github.com/samuelsimoes/sam-slider
• Owner: samuelsimoes
• Created: 2012-10-03T21:54:52.000Z (over 12 years ago)
• Default Branch: master
• Last Pushed: 2014-09-06T21:32:55.000Z (over 10 years ago)
• Last Synced: 2024-11-07T21:14:23.666Z (about 2 months ago)
• Language: JavaScript
• Homepage:
• Size: 307 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
#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.

```html



  


    

    

  


  


  


  


    

      Previous slide

    

    

      Next slide

    

  



```


```css

.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:

```javascript

$("#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.

```javascript

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)**