Beautiful & Powerful jQuery Image Carousel Plugin - Tonjoo

Tonjoo is a jQuery plugin that helps you to create a modern responsive image carousel/slideshow with lots of customization options.

Features:

• Responsive across different device sizes.
• Endless horizontal or vertical slide animations.
• Autoplay and pause on hover.
• Bullets and arrows navigation.
• Image loader with jQuery imageloaded plugin.
• Touch swipe and mouse drag supported.
• 4 built-in skins.
• Circular autoplay timer.
• Cross browser. Supports all the modern browsers and IE7+.

How to use it:

1. Include the jQuery library and other required JS libraries in the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>	
<script type="text/javascript" src="assets/js/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="assets/js/imagesloaded.min.js"></script>
<script type="text/javascript" src="assets/js/frs.js"></script>

2. Include the core stylesheet and a skin CSS in the web page.

<link rel="stylesheet" href="assets/css/frs.css">
<link rel="stylesheet" href="skins/frs-skin-default.css">

3. Create an image carousel slideshow following the markup structure like this:

<div class="frs-slideshow-container" id="demo">
  <div class="frs-slide-img-wrapper" style="display:none;">
    <div class="frs-slide-img"><img src="slide-1.jpg"></div>
    <div class="frs-slide-img"><img src="slide-2.jpg"></div>
    <div class="frs-slide-img"><img src="slide-3.jpg"></div>
    ...
  </div>
</div>

4. Initialize the image carousel with default options.

$('#demo').TonjooResponsiveSlideshow();

5. All the options.

'animation' : 'horizontal-slide', // horizontal-slide, vertical-slide, fade
'animationSpeed' : 1000, // how fast animtions are
'continousSliding' : true, // only works for horizontal-slide and vertical-slide
'timer' :  true, // true or false to have the timer
'advanceSpeed' : 3000, // if timer is enabled, time between transitions
'pauseOnHover' : true, // if you hover pauses the slider
'startClockOnMouseOut' : false, // if clock should start on MouseOut
'startClockOnMouseOutAfter' : 800, // how long after MouseOut should the timer start again
'directionalNav' : 'autohide', // autohide, show, none
'directionalNavShowOpacity' : '0.9', // from 0 to 1
'directionalNavHideOpacity' : '0.1', // from 0 to 1
'pagination' : 'bullet', // bullet, text, image, none
'paginationContent' : [], // can be text, image, or something
'paginationContentWidth': 200, // pagination content width in pixel
'skinClass' : 'trs-skin-default', // default: trs-skin-default
'width' : 500, // slideshow width (actually max-width)
'height' : 270, // slideshow height (will auto generate if width changed by browser size)
'jsOnly' : false // for development testing purpose

Change log:

2014-09-04

• rename function, add API

2014-09-03

• fixed themes.
• fixed js.

---

This awesome jQuery plugin is developed by harisrozak. For more Advanced Usages, please check the demo page or visit the official website.