11 #permalink Slider
Sliders allow to slide certain content elements. Usually you use them to make image galleries slidable
Source:
slider/css/imageslider.css, line 1
Example
Markup
<div data-widget="ImageSlider"
data-imageslider-arrow-next="fa fa-angle-right"
data-imageslider-arrow-prev="fa fa-angle-left"
data-autoplay="true"
data-imageslider-speed="8000">
<div class="imageslider_mainoverlay">
<div class="imageslider_main" data-imageslider-main>
<div>
<img class="imageslider_main_img slide_img" data-lazy="http://placehold.it/1600x680?text=1">
</div>
<div>
<img class="imageslider_main_img slide_img" data-lazy="http://placehold.it/1600x480?text=2">
</div>
<div>
<img class="imageslider_main_img slide_img" data-lazy="http://placehold.it/1600x680?text=3">
</div>
<div>
<img class="imageslider_main_img slide_img" data-lazy="http://placehold.it/1600x680?text=4">
</div>
</div>
<div class="imageslider_overlay" data-imageslider-overlays>
<div class="imageslider_overlay_inner">
<p>Inhalt für Slide 1</p>
</div>
<div class="imageslider_overlay_inner">
<p>Inhalt<br>für Slide 2</p>
</div>
<div class="imageslider_overlay_inner">
<p>Inhalt<br>für<br>Slide<br>3</p>
</div>
<div class="imageslider_overlay_inner">
<p>Inhalt<br>für<br>Slide 4</p>
</div>
</div>
</div>
<div class="imageslider_thumbs" data-imageslider-thumbs>
<div>
<img class="imageslider_thumb slide_img" data-lazy="http://placehold.it/1600x680?text=1">
</div>
<div>
<img class="imageslider_thumb slide_img" data-lazy="http://placehold.it/1600x680?text=2">
</div>
<div>
<img class="imageslider_thumb slide_img" data-lazy="http://placehold.it/1600x680?text=3">
</div>
<div>
<img class="imageslider_thumb slide_img" data-lazy="http://placehold.it/1600x680?text=4">
</div>
</div>
</div>
Source:
slider/css/imageslider.css, line 9
Example
Markup
<div data-widget="ImageSlider"
data-imageslider-arrow-next="fa fa-angle-right"
data-imageslider-arrow-prev="fa fa-angle-left">
<div class="imageslider_mainoverlay">
<div class="imageslider_main" data-imageslider-main>
<div>
<img class="imageslider_main_img slide_img" data-lazy="http://placehold.it/1600x680?text=1">
</div>
<div>
<img class="imageslider_main_img slide_img" data-lazy="http://placehold.it/1600x680?text=2">
</div>
<div>
<img class="imageslider_main_img slide_img" data-lazy="http://placehold.it/1600x680?text=3">
</div>
<div>
<img class="imageslider_main_img slide_img" data-lazy="http://placehold.it/1600x680?text=4">
</div>
</div>
<div class="imageslider_overlay" data-imageslider-overlays>
<div class="imageslider_overlay_inner">
<p>Inhalt für Slide 1</p>
</div>
<div class="imageslider_overlay_inner">
<p>Inhalt<br>für Slide 2</p>
</div>
<div class="imageslider_overlay_inner">
<p>Inhalt<br>für<br>Slide<br>3</p>
</div>
<div class="imageslider_overlay_inner">
<p>Inhalt<br>für<br>Slide 4</p>
</div>
</div>
</div>
</div>
Source:
slider/css/imageslider.css, line 97
Example
Markup
<div data-widget="ImageSlider"
data-imageslider-arrow-next="fa fa-angle-right"
data-imageslider-arrow-prev="fa fa-angle-left">
<div class="imageslider_mainoverlay">
<div class="imageslider_main" data-imageslider-main>
<div>
<img class="imageslider_main_img slide_img" data-lazy="http://placehold.it/1600x680?text=1">
</div>
<div>
<img class="imageslider_main_img slide_img" data-lazy="http://placehold.it/1600x680?text=2">
</div>
<div>
<img class="imageslider_main_img slide_img" data-lazy="http://placehold.it/1600x680?text=3">
</div>
<div>
<img class="imageslider_main_img slide_img" data-lazy="http://placehold.it/1600x680?text=4">
</div>
</div>
</div>
<div class="imageslider_thumbs" data-imageslider-thumbs>
<div>
<img class="imageslider_thumb slide_img" data-lazy="http://placehold.it/1600x680?text=1">
</div>
<div>
<img class="imageslider_thumb slide_img" data-lazy="http://placehold.it/1600x680?text=2">
</div>
<div>
<img class="imageslider_thumb slide_img" data-lazy="http://placehold.it/1600x680?text=3">
</div>
<div>
<img class="imageslider_thumb slide_img" data-lazy="http://placehold.it/1600x680?text=4">
</div>
</div>
</div>
Source:
slider/css/imageslider.css, line 144
Example
Markup
<div data-widget="ImageSlider"
data-imageslider-arrow-next="fa fa-angle-right"
data-imageslider-arrow-prev="fa fa-angle-left">
<div class="imageslider_mainoverlay">
<div class="imageslider_main" data-imageslider-main>
<div>
<img class="imageslider_main_img slide_img" data-lazy="http://placehold.it/1600x680?text=1">
</div>
<div>
<img class="imageslider_main_img slide_img" data-lazy="http://placehold.it/1600x680?text=2">
</div>
<div>
<img class="imageslider_main_img slide_img" data-lazy="http://placehold.it/1600x680?text=3">
</div>
<div>
<img class="imageslider_main_img slide_img" data-lazy="http://placehold.it/1600x680?text=4">
</div>
</div>
</div>
</div>
Source:
slider/css/imageslider.css, line 191
Example
Markup
<div class="bgimageslider" data-widget="BGImageSlider"
data-imageslider-arrow-next="fa fa-angle-right"
data-imageslider-arrow-prev="fa fa-angle-left"
data-imageslider-show-arrows="false"
data-imageslider-show-pager="false"
data-imageslider-autoplay="true" data-imageslider-speed="8000">
<div class="bgimageslider_mainoverlay">
<div class="bgimageslider_main" data-imageslider-main>
<div>
<div class="bgimageslider_main_img"
data-rbg='["//placehold.it/1500x500"]'>
</div>
</div>
<div>
<div class="bgimageslider_main_img"
data-rbg='["//placehold.it/1500x500/000000"]'>
</div>
</div>
</div>
<div class="bgimageslider_overlays" data-imageslider-overlays>
<div class="bgimageslider_overlay">
<div class="pagesize">
<div class="bgimageslider_overlay_insert">
<span class="bgimageslider_overlay_insert_text">Slider Insert oben.</span>
</div>
<div class="bgimageslider_overlay_insert">
<span class="bgimageslider_overlay_insert_text bgimageslider_overlay_insert_text--bottom">Und unten auch eins.</span>
</div>
</div>
</div>
<div class="bgimageslider_overlay bgimageslider_overlay--right">
<div class="pagesize">
<div class="bgimageslider_overlay_insert">
<span class="bgimageslider_overlay_insert_text">Slider Insert oben.</span>
</div>
<div class="bgimageslider_overlay_insert">
<span class="bgimageslider_overlay_insert_text bgimageslider_overlay_insert_text--bottom">Und unten auch eins.</span>
</div>
</div>
</div>
</div>
</div>
</div>
Source:
slider/css/bgimageslider.css, line 1