Full responsive touch jQuery Slider bzw. Akkordeon Plugin. Frei herunterladen und nutzen.
jQuery Plugins: tossnSlider
Thorsten Gading
Thorsten Gading
![tossn.de](https://www.tossn.de/files/tossn/image/logo/logo-mint.png)
2019-10-15T07:08:28+00:00
![](https://www.tossn.de/files/tossn/image/8bit/vvg-self-portrait.jpg)
https://www.tossn.de/jquery-plugins.html
Beispiele
![](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 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
Key | Typ | Standard | Beschreibung |
---|---|---|---|
autoSlide | bool | true | Automatisches wechseln der einzelnen Sliderelemente. |
defaultDelay | integer | 10 | Zeit in Sekunden, die ein einzelnes Element standardmäßig angezeigt wird, wenn das Attribut 'data-delay' am Element nicht gesetzt ist. |
animationTime | integer | 400 | Animationszeit in Millisekunden. |
showNavButtons | bool | true | Navigationsbuttons anzeigen. |
browseTiles | bool | false | Kacheln zur Navigation anzeigen. |
browseTilesPosition | string | outside | Position der Kacheln zur Navigation ("inside" oder "outside"). |
showProgressBar | bool | true | Fortschrittsbalken anzeigen. |
progressBarColor | string | #ffffff | Farbe des Fortschrittsbalkens als hexadecimalen Farbwert. |
preloadImages | bool | true | Bilder laden bevor der Slider angezeigt wird. |
defaultCaptionDelay | integer | 0 | Zeit in Sekunden, nachdem der Bildtext standardmäßig eingeblendet wird, wenn Attribut 'data-delay' für den Bildtext nicht gesetzt ist. |
captionAnimationTime | integer | 400 | Animationszeit des Bildtextes in Millisekunden. |