Examples | PixieSlider

Basic Slider

<div id="slider-1">
    <div data-slide data-media="/img1.jpg"></div>
    <div data-slide data-media="/img2.jpg"></div>
    <div data-slide data-media="/img3.jpg"></div>
</div>

new PixieSlider('slider-1')

Lazy Slider

<div id="slider-2">
    <div data-slide data-media="/img1.jpg"></div>
    <div data-slide data-media="/img2.jpg"></div>
    <div data-slide data-media="/img3.jpg"></div>
    <div data-slide data-media="https://picsum.photos/id/1003/800/450"></div>
    <div data-slide data-media="https://picsum.photos/id/1035/800/450"></div>
    <div data-slide data-media="https://picsum.photos/id/1051/800/450"></div>
    <div data-slide data-media="https://picsum.photos/id/1043/800/450"></div>
</div>

new PixieSlider('slider-2', {lazyLoad: true})

Fullscreen Slider

<div id="slider-3">
    <div data-slide data-media="/img1.jpg"></div>
    <div data-slide data-media="/img2.jpg"></div>
    <div data-slide data-media="/img3.jpg"></div>
</div>

new PixieSlider('slider-3', {fullscreen: true})

Video Slider

<div id="slider-4">
    <div data-slide data-media="/img1.jpg"></div>
    <div data-slide data-media="https://static.videezy.com/system/resources/previews/000/004/382/original/COWS_AT_THE_GRASS.mp4" data-media-type="video"></div>
    <div data-slide data-media="/img2.jpg"></div>
</div>

new PixieSlider('slider-4', { videoAwareness: true })

Thumbnails Slider

<div id="thumbnails-slider">
    <div data-slide data-media="/img1.jpg"></div>
    <div data-slide data-media="/img2.jpg"></div>
    <div data-slide data-media="/img3.jpg"></div>
</div>

new PixieSlider('thumbnails-slider', {thumbnails: true})

Progress Bar Slider

<div id="progress-slider">
    <div data-slide data-media="/img1.jpg"></div>
    <div data-slide data-media="/img2.jpg"></div>
    <div data-slide data-media="/img3.jpg"></div>
</div>

new PixieSlider('progress-slider', {progressBar: true})

Touch Slider

<div id="touch-slider">
    <div data-slide data-media="/img1.jpg"></div>
    <div data-slide data-media="/img2.jpg"></div>
    <div data-slide data-media="/img3.jpg"></div>
</div>

new PixieSlider('touch-slider', {touchSupport: true})

Slider With Captions

<div id="caption-slider">
    <div data-slide data-media="/img1.jpg" data-captions='{...}' data-duration="4000"></div>
    <div data-slide data-media="/img2.jpg" data-captions='{...}' data-duration="5000"></div>
    <div data-slide data-media="/img3.jpg" data-captions='{...}' data-duration="6000"></div>
</div>

new PixieSlider('caption-slider', {captions: true, fullscreen: true, transition: 'fade'})
// Replace {...} with your captions JSON

Autoplay Slider

<div id="autoplay-slider">
    <div data-slide data-media="/img1.jpg"></div>
    <div data-slide data-media="/img2.jpg"></div>
    <div data-slide data-media="/img3.jpg"></div>
</div>

new PixieSlider('autoplay-slider', {autoPlay: true, autoPlaySpeed: 2000})

Combo Feature Slider

<div id="combo-slider">
    <div data-slide data-media="/img1.jpg" data-captions='{...}'></div>
    <div data-slide data-media="/img2.jpg" data-captions='{...}'></div>
    <div data-slide data-media="/img3.jpg" data-captions='{...}'></div>
</div>

new PixieSlider('combo-slider', {lazyLoad: true, thumbnails: true, captions: true, progressBar: true, transition: 'fade'})
// Replace {...} with your captions JSON

Custom HTML Slider

<div id="custom-slider">
    <div data-slide data-media-type="custom" data-html="{...}" data-captions='{...}'></div>
    <div data-slide data-media="/img2.jpg" data-captions='{...}'></div>
    <div data-slide data-media="/img3.jpg" data-captions='{...}'></div>
</div>

new PixieSlider('combo-slider', {lazyLoad: true, thumbnails: true,  progressBar: true, transition: 'fade'})
// Replace {...} with your captions JSON