https://github.com/tomhazledine/nabslider.js

A lightweight image/tab slider, complete with controls, using as little code as possible.
https://github.com/tomhazledine/nabslider.js

Last synced: 9 days ago
JSON representation

A lightweight image/tab slider, complete with controls, using as little code as possible.

• Host: GitHub
• URL: https://github.com/tomhazledine/nabslider.js
• Owner: tomhazledine
• Created: 2014-06-18T06:25:23.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2014-07-02T20:30:41.000Z (over 10 years ago)
• Last Synced: 2024-11-16T09:40:34.600Z (2 months ago)
• Language: CSS
• Size: 20.6 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# **NAB Slider.js**: “Not another bloody slider...”

## Overview

A lightweight slider with controls and optional autoplay.

All the heavy lifting is done using some simple CSS/SASS, so **NAB Slider.js** is fully responisive and customizable right out of the box. All the jQuery does is add and remove the classes that trigger the CSS magic.

* Version 1.0

* Copyright 2014, [Tom Hazledine](http://thomashazledine.com)

---

## Dependancies

* jQuery

* nothing else.

---

## Usage

### Installation

Make sure you include jQuery, the **nabSlider** plugin, and your own scripts file (in that order):

    

    

    

### The Basic Set-up

Any slider on the page needs a wrapper element with a unique class/id.

Within that wrapper there need to be two things:

the slider itself, which sits within two divs – a `sliderOuter` and `sliderInner` – and the controls for operating the slider, which can go anywhere you like providing it's within the overall wrapper. I put my buttons inside a `selectors` element.

    

      


        


          // The slide content goes here

        

      

  

      


        // The slider selector-buttons go here

      


    

### The Slides

The slides themselves, which are the things we want to switch between, can be anything you like. I use an `article` element because, hey, semantics! But you can use any `html` element you like.

The important thing is that whatever kind of element you choose, you give it the following classes: `slide` (so the plugin knows it's a slide) and `numberX` (eg `number1` for the first slide, `number2` for the second, you get the idea...).

It must also have `data-selector` attribute that is the same as the slide number. For example, `data-selector="2"` for the slide with the class `number2`.

So in a slider that switches between three slides, you might see this:

    

      // Slide content goes here

    

    

      // Slide content goes here

    

    

      // Slide content goes here

    

### The Buttons

For the slider to be useful, we need some way to control it. **nabSlider** has three control methods that can be used all together or in isolation:

* **Direct slide buttons**: clicking one of these takes you straight to the relevant slide.

* **Next and previous buttons**: move you to the next or previous slide.

* **Autoplay**: automatically rotates to the next slide after a given time period (4 seconds, by default)

These methods can be used independently or in any combination. We'll come to the **Autoplay** feature later, but the buttons are quite straightforward. I like to use `button` elements, but you can use any kind of element you like, provided you can give it the relevant classes.

#### Direct Slide Buttons

These buttons navigate directly to the corresponding slide. This is done by applying matching `numberX` classes and `data-selector="X"` attributes.

The controls for a three-slide slider would look something like this:

    

      // Button content, if you want any, goes here

    

    

      // Button content, if you want any, goes here

    

    

      // Button content, if you want any, goes here

    

#### Next/Previous Buttons

These don't need a `data-selector` attribute, just two classes: `nextPrev` to denote the type of button it is, and either `next` or `prev` to further narrow it down.

    

    

#### Autoplay

The Autoplay setting is currently either `true` or `false`; which is to say it's either on or off. This state is decalred in the scripts file when an instance of the slider is created. More options will be available soon (hopefully).

--- 

## License

Released under the [DBAD license](http://www.dbad-license.org)