Image slider
Imageslider
Slides only
<div id="exampleSlider0" data-image-slider="cycle" data-buttons="false" class="env-image-slider env-image-slider--slide">
<div class="env-image-slider__inner">
<div class="env-image-slider__item env-image-slider__item--active">
<img src="https://unsplash.it/g/800/400/?blur" class="env-embedded__img" alt="First slide">
</div>
<div class="env-image-slider__item">
<img src="https://unsplash.it/g/800/400/" class="env-embedded__img" alt="Second slide">
</div>
<div class="env-image-slider__item">
<img src="https://unsplash.it/g/800/400/?blur" class="env-embedded__img" alt="Third slide">
</div>
</div>
</div>
Slides with controls
<div id="exampleSlider1" data-image-slider class="env-image-slider env-image-slider--slide">
<div class="env-image-slider__inner">
<div class="env-image-slider__item env-image-slider__item--active">
<img src="https://unsplash.it/g/800/400/?blur" class="env-embedded__img" alt="First slide">
</div>
<div class="env-image-slider__item">
<img src="https://unsplash.it/g/800/400" class="env-embedded__img" alt="First slide">
</div>
<div class="env-image-slider__item">
<img src="https://unsplash.it/g/800/400/?blur" class="env-embedded__img" alt="First slide">
</div>
</div>
</div>
With indicators
<div id="exampleSlider2" data-image-slider="cycle" class="env-image-slider--slide env-image-slider">
<div class="env-image-slider__inner">
<div class="env-image-slider__item env-image-slider__item--active">
<img src="https://unsplash.it/800/400/?blur" class="env-embedded__img" alt="First slide">
</div>
<div class="env-image-slider__item">
<img src="https://unsplash.it/800/400" class="env-embedded__img" alt="Second slide">
</div>
<div class="env-image-slider__item">
<img src="https://unsplash.it/800/400/?blur" class="env-embedded__img" alt="Third slide">
</div>
</div>
<ol class="env-image-slider__indicators">
<li data-target="#exampleSlider2" data-move-to="0"></li>
<li data-target="#exampleSlider2" data-move-to="1"></li>
<li data-target="#exampleSlider2" data-move-to="2"></li>
</ol>
</div>
With captions
<div id="exampleSlider3" data-image-slider class="env-image-slider--slide env-image-slider">
<div class="env-image-slider__inner">
<div class="env-image-slider__item env-image-slider__item--active">
<img src="https://unsplash.it/800/400/?blur" class="env-embedded__img" alt="First slide">
<div class="env-image-slider__caption">
<h3>Lorem ipsum</h3>
<p>dolor sit amet, consectetur</p>
</div>
</div>
<div class="env-image-slider__item">
<img src="https://unsplash.it/800/400" class="env-embedded__img" alt="Second slide">
<div class="env-image-slider__caption">
<h3>Lorem ipsum</h3>
<p>dolor sit amet, consectetur</p>
</div>
</div>
<div class="env-image-slider__item">
<img src="https://unsplash.it/800/400/?blur" class="env-embedded__img" alt="Third slide">
<div class="env-image-slider__caption">
<h3>Lorem ipsum</h3>
<p>dolor sit amet, consectetur</p>
</div>
</div>
</div>
</div>
Slider with thumbnails
<div id="exampleSlider4" data-image-slider="cycle" class="env-image-slider--slide env-image-slider">
<div class="env-image-slider__inner">
<div class="env-image-slider__item env-image-slider__item--active">
<img src="https://unsplash.it/g/800/400/?blur" class="env-embedded__img" alt="First slide">
</div>
<div class="env-image-slider__item">
<img src="https://unsplash.it/g/800/400" class="env-embedded__img" alt="Second slide">
</div>
<div class="env-image-slider__item">
<img src="https://unsplash.it/g/800/400/?blur" class="env-embedded__img" alt="Third slide">
</div>
</div>
<ol class="env-image-slider__thumbnails">
<li data-target="#exampleSlider4">
<img data-target="#exampleSlider4" src="https://unsplash.it/g/800/400/?blur" class="env-image-slider__thumbnail env-image-slider__item--active"
data-move-to="0" alt="First thumbnail">
</li>
<li data-target="#exampleSlider4">
<img data-target="#exampleSlider4" src="https://unsplash.it/g/800/400" class="env-image-slider__thumbnail"
data-move-to="1" alt="Second thumbnail">
</li>
<li data-target="#exampleSlider4">
<img data-target="#exampleSlider4" src="https://unsplash.it/g/800/400/?blur" class="env-image-slider__thumbnail"
data-move-to="2" alt="Third thumbnail">
</li>
</ol>
</div>
Usage
Attribute data-image-slider
is required to instantiate a image slider and if there is more then one image, buttons will be generated to move the image slider to the next or previous item. Automatic genereted buttons can be prevented by using attribute data-buttons="false"
.
The data-image-slider="cycle"
attribute is used to start the imageslider animation at page load. data-image-slider
attribute will instantiate a image slider with no automatic.
Via data attributes
Use data attributes to control the imageslider. data-move
accepts the values prev
or next
, which alters the imageslide position relative to its current position. You can use data-move-to
to pass a slide index to the imageslider data-move-to="1"
, which shifts the position to a particular index beginning with 0
.
Via JavaScript
To make image slider cycle through items you can call:
$('#myImageSlider').envImageslider({ imageSlider : 'cycle' })
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as in data-interval=""
.
interval = 5000
The amount of delay between automatically cycling through slides.
keyboard = false
Whether the imageslider should react to keyboard events.
pause = 'hover'
If set to hover
, pauses the cycling of the imageslider on mouseenter
and resumes on mouseleave
. If set to null
, hovering wont pause the imageslider.
wrap = true
Whether the imageslider should cycle continuously or have hard stops.
buttons = true
Will generate slide
buttons even if there is only one image in the image slider.
swipe = false
Will disable swipe functionallity on mobile devices.
Methods
Initialize the imageslider with an optional object
and starts cycling through slides.
$('#myImageSlider').envImageslider({
interval: 2000
});
.envImageslider('cycle')
Cycles through the imageslider
.envImageslider('pause')
Pauses the imageslider
.envImageslider('next')
Cycles to the next item
.envImageslider('prev')
Cycles to the previous item
.envImageslider('number')
Cycles the imageslider to a particular slide.
Events
Slid - Fires when slider transition is finished.
Slide - Fires before slider transition starts.
$('#myImageslider').on('slid.env.image-slider', () => {
// do something...
});
$('#myImageslider').on('slide.env.image-slider', () => {
// do something...
});