jQuery Plugins: tossnSlider

Full responsive touch jQuery slider or accordion plugin. Image slider using jQuery.
Download and use it free.


Lorem ipsum dolor sit amet

Consetetur sadipscing elitr, sed diam.

Et dolore magna aliquyam

At vero eos et accusam et justo duo.

Stet clita kasd gubergren

No sea takimata sanctus est.





	defaultDelay: 4,
	showNavButtons: false,
	browseTiles: true,
	browseTilesPosition: 'inside',
	progressBarColor: '#222222',


How to use top

1. load jQuery

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

2. load tossnSlider

<script type="text/javascript" src="tossnSlider/js/tossn-slider.min.js"></script>
<link rel="stylesheet" type="text/css" href="tossnSlider/css/tossn-slider.min.css" media="all" />

3. create several slider elements and wrap them with a container

<div id="example1" style="height:300px;">
	<div class="tossnSliderElement">
		<img src="images/image1.jpg" alt="" />
		<div class="text">
			<h2>Lorem ipsum dolor sit amet</h2>
			<div>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.</div>
	<div class="tossnSliderElement">
		<img src="images/image2.jpg" alt="" />
		<div class="text">
			<h2>Et dolore magna aliquyam</h2>
			<div>At vero eos et accusam et justo duo dolores et ea rebum.</div>
	<div class="tossnSliderElement">
		<img src="images/image3.jpg" alt="" />
		<div class="text">
			<h2>Stet clita kasd gubergren</h2>
			<div>No sea takimata sanctus est Lorem ipsum dolor sit amet.</div>

4. Fire plugin using jQuery selector

$(document).ready(function() {

Global options top

Key Type Default Description
autoSlide bool true Make the slider automatically slide the elements.
defaultDelay integer 10 Delay time in seconds if attribute 'data-delay' is not set for element.
animationTime integer 400 Animation time in milli seconds.
showNavButtons bool true Show navigation buttons.
browseTiles bool false Show navigation tiles.
browseTilesPosition string outside Navigation tile position ("inside" or "outside").
showProgressBar bool true Show progress bar.
progressBarColor string #ffffff Progress bar color as hexadecimal color reference.
preloadImages bool true Preload images before displaying slider.
defaultCaptionDelay integer 0 Caption delay time in seconds if attribute 'data-delay' is not set for caption.
captionAnimationTime integer 400 Caption animation time in milli seconds.



Download our latest release tossnSlider v2.0.1