Full responsive touch jQuery Slider bzw. Akkordeon Plugin. Frei herunterladen und nutzen.
jQuery Plugins: tossnSlider
Thorsten Gading
Thorsten Gading
2019-10-15T07:08:28+00:00
1000
693
https://www.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
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. |