Skip to content
jQuery Tools Full Width Scrollable Plugin
CSS JavaScript HTML Makefile
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
.gitignore
README.md
index.html

README.md

Full window width content slider

jQuery tools scrollable full window width plugin

Demo

###Setup

<style>
  #slider{
    width: 100%;
    height: 400px;
    overflow: hidden;
    position: relative;     
  }
  #items{  
    width: 2000em;
    position: absolute;
  }
  #items > div{
    float: left;
  }
  #items > div > div {
    width: 960px;
    margin: 0 auto;
  }
</style>

<script src="jquery.js"></script>
<script src="scrollable.all.min.js"></script>

<script>$('#slider').scrollable().fullwidth();</script>  

<div id="slider">
  <div id="items">
    <div>
      <div>
        <h1>Slide 1</h1>
      </div>
    </div>
    <div>
      <div>
        <h2>Slide 2</h2>
      </div>
    </div>
    <div>
      <div>
        <h3>Slide 3</h3>
      </div>
    </div>
  </div>
</div>

###Full on settings:

$('#slider').scrollable({ 
  circular: true, 
  touch: false, 
  easing: 'linear', 
  speed: 400
}).navigator({ 
  navi: '#navigation',
  history: true,
  idPrefix: 'slide_'
}).autoscroll({ 
  autoplay: true,
  autopause:true, 
  interval: 5000 
}).fullwidth({
  width: 960 // If you need a static width
});

Include the easing js file if you want a none default easing.

You can’t perform that action at this time.