jQuery Plugins: tossnSlider

Thorsten Gading

Thorsten Gading

2019-10-15T07:08:28+00:00

1000 693

https://tossn.de/jquery-plugins-en.html

Examples

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.

Code:

$('#tossnSliderExample2').tossnSlider();

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