Tips and Tricks: carouFredSel: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
Tm (Diskussion | Beiträge) Die Seite wurde neu angelegt: „== Some Basics == === Using with Bootstrap Grids === Do not convert a Bootstrap Grid-Div into a CarouFredSel-Slider: <pre> <div class="col-xs-8" id="slides…“ |
Tm (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 6: | Zeile 6: | ||
<pre> | <pre> | ||
<div class="col-xs-8" id="slideshow"> | |||
<img src="assets/img/1.jpg" width="663" height="491"> | |||
<img src="assets/img/2.jpg" width="663" height="491"> | |||
<img src="assets/img/3.jpg" width="663" height="491"> | |||
<img src="assets/img/4.jpg" width="663" height="491"> | |||
</div> | |||
</pre> | </pre> | ||
| Zeile 17: | Zeile 17: | ||
<pre> | <pre> | ||
<div class="col-xs-8"> | |||
<div id="slideshow"> | |||
<img src="assets/img/1.jpg" width="663" height="491"> | |||
<img src="assets/img/2.jpg" width="663" height="491"> | |||
<img src="assets/img/3.jpg" width="663" height="491"> | |||
<img src="assets/img/4.jpg" width="663" height="491"> | |||
</div> | |||
</div> | |||
</pre> | </pre> | ||
| Zeile 32: | Zeile 32: | ||
<pre> | <pre> | ||
<div id="slideshow"> | |||
<img src="assets/img/1.jpg" width="663" height="491"> | |||
<img src="assets/img/2.jpg" width="663" height="491"> | |||
<img src="assets/img/3.jpg" width="663" height="491"> | |||
<img src="assets/img/4.jpg" width="663" height="491"> | |||
</div> | |||
</pre> | </pre> | ||
| Zeile 43: | Zeile 43: | ||
<pre> | <pre> | ||
$(function(){ | |||
$('#slideshow').carouFredSel(); | |||
}) | |||
</pre> | </pre> | ||
Version vom 2. März 2014, 14:11 Uhr
Some Basics
Using with Bootstrap Grids
Do not convert a Bootstrap Grid-Div into a CarouFredSel-Slider:
<div class="col-xs-8" id="slideshow"> <img src="assets/img/1.jpg" width="663" height="491"> <img src="assets/img/2.jpg" width="663" height="491"> <img src="assets/img/3.jpg" width="663" height="491"> <img src="assets/img/4.jpg" width="663" height="491"> </div>
This will break the Grid Layout. Use instead an own Div for the Slideshow:
<div class="col-xs-8">
<div id="slideshow">
<img src="assets/img/1.jpg" width="663" height="491">
<img src="assets/img/2.jpg" width="663" height="491">
<img src="assets/img/3.jpg" width="663" height="491">
<img src="assets/img/4.jpg" width="663" height="491">
</div>
</div>
Simple Slider
HTML:
<div id="slideshow"> <img src="assets/img/1.jpg" width="663" height="491"> <img src="assets/img/2.jpg" width="663" height="491"> <img src="assets/img/3.jpg" width="663" height="491"> <img src="assets/img/4.jpg" width="663" height="491"> </div>
JS:
$(function(){
$('#slideshow').carouFredSel();
})