jQuery Plugins: tossnSlider

Thorsten Gading

Thorsten Gading

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

1000 693

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

Beispiele

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 Seitenanfang

1. jQuery laden

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

2. tossnSlider laden

<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. Erstelle beliebig viele Sliderelemente und umhülle sie mit einem Containerelement

<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. Das Plugin mithilfe eines jQuery Selektors ausführen

$(document).ready(function() {
	$('#example1').tossnSlider();
});

Globale Optionen Seitenanfang