Draggable Carousel with 3 ways to Navigate

A standard carousel with the addition ability to drag or swipe slides using a mouse. This include left and right navigation, dot navigation and swipe navigation.

Features

• Tablet touch swipe or mouse drag swipping.
• Horizontal or Vertical layout.
• Continuous Scroll with end bounce.
• Or single panel image swipe.
• Multiple mouseSwipes on single page.
• Auto scroll with or without rewind.

Requirements

• jQuery 1.9
• Javascript file
• jQuery swipe overwrite
• CSS file

Javascript

This code is required in the head section to initiate the carousel.

$(document).ready(function () {

$(document).bind("dragstart", function() { return false; });

$('#panelSwipe').swipe({
TYPE:'panelSwipe',
HORIZ: true,
SNAPDISTANCE:20,
DURATION:750,
EASING:'easeOutBack',
ARROWS:true,
FADEARROWS:false,
SLIDESHOWTIME:4000,
AUTOSTART:100,
PAUSEONHOVER:false,
PAGENUM:'#pagenum'
});
});

This code is required in the head section to use the dots below the carousel.

$(document).ready(function () {
  $('.dots1').click(function(){
    changePanel(1)
  });
  $('.dots2').click(function(){
    changePanel(2)
  });
  $('.dots3').click(function(){
    changePanel(3)
  });

  function changePanel(panelNum) {
  var panelPos = $('.panel').width() * (panelNum -1);
  $('#carousel').stop(true,true).animate({left:-panelPos},{duration:1000, easing:'easeOutBack', complete: function(){ ;}});
  $('#pagenum2').html("<style>.dots" + panelNum + " { background:#000; }</style>");
  };

});

The Settings you can change:

• HORIZ: true or false – horizontal or vertical display. / default = true.
• TYPE: ’mouseSwipe’ – drag scroll or touch swipe one or more panels.
• TYPE: ‘panelSwipe’- swipe slides one panel length at a time. / default = ‘mouseSwipe’
• SNAPDISTANCE: number - pixel distance before panel changes. / default = 20
• DURATION: number – time it takes for next panel to slide in. / default = 250
• EASING: string – must include jquery.easing.1.3.js types or / default = ‘swing’
• ARROWS: true or false – display button arrows on sides of panel / default = false
• FADEARROWS: true or false – do not show first or last panel arrows / default = false
• SLIDESHOWTIME: number – auto scroll time in milliseconds / default = 4000
• AUTOSTART: number > 0 - delay before autoscroll starts on load / default = 0
• PAUSEONHOVER: true or false – stop auto slide on mouseover hover / default = false
• PAGENUM: string – id of div or element to display page# / default = ‘#pagenum’

HTML

Below is the HTML configuration to work the carousel. To customise, simple edit the css stylesheet.

<div id="carouselwrapper">
  <div class="content">
    <div id="viewport" onselectstart="return false;">
      <div id="carousel" style="width: 2700px; left: -50px;">
        <div class="panel" style="float: left;">Panel 1</div>
        <div class="panel" style="float: left;">Panel 2</div>
        <div class="panel" style="float: left;">Panel 3</div>
      </div>
      <div class="navLeft" style="display: none;"></div>
      <div class="navRight" style="display: none;"></div>
    </div>
    <div id="pagenum2"></div>
    <div id="dots">
      <div onclick="changePanel(1)" class="dots1"></div>
      <div onclick="changePanel(2)" class="dots2"></div>
      <div onclick="changePanel(3)" class="dots3"></div>
    </div>
  </div>
</div>

This project was based on torontographic - mouseSwipe Jquery Touch Content Slider Plugin