Full responsive touch jQuery slider or accordion plugin. Image slider using jQuery.
Download and use it free.
jQuery Plugins: tossnSlider
Thorsten Gading
Thorsten Gading
![tossn.de](https://tossn.de/files/tossn/image/logo/logo-mint.png)
2019-10-15T07:08:28+00:00
![](https://tossn.de/files/tossn/image/8bit/vvg-self-portrait.jpg)
https://tossn.de/jquery-plugins-en.html
Examples
![](files/tossn/image/thumbs/750/93f34d371aa3c5a4a192851b148718eb.jpg)
Lorem ipsum dolor sit amet
Consetetur sadipscing elitr, sed diam.
![](files/tossn/image/thumbs/750/e873662fd0328c103d5e2c503c395232.jpg)
Et dolore magna aliquyam
At vero eos et accusam et justo duo.
![](files/tossn/image/thumbs/750/cc887a45fad0d8c32dc4b6d34dbe2de8.jpg)
Stet clita kasd gubergren
No sea takimata sanctus est.
Code:
$('#tossnSliderExample2').tossnSlider();
![](files/tossn/image/thumbs/750/65a8f2509e83078e692f1765ccf80ba7.jpg)
![](files/tossn/image/thumbs/750/d7c597f20c7575ef26e5d24ec7abd728.jpg)
![](files/tossn/image/thumbs/750/cc887a45fad0d8c32dc4b6d34dbe2de8.jpg)
Code:
$('#tossnSliderExample1').tossnSlider({
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>
</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>
</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>
</div>
</div>
</div>
4. Fire plugin using jQuery selector
$(document).ready(function() {
$('#example1').tossnSlider();
});
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. |