Citrus Slider

A modern JavaScript carousel with no third party requirements.


Download Source

v1.0.4

Light, fast and free

Highly configurable


Settings

Put any text here you want

Find out more below


Installation

Images courtesy of Junkanoo Media



Installation


Include required files

Include citrus-slider in your project by adding these two lines before the end of the head tag.

                
<link rel="stylesheet" href="css/citrus-slider.min.css">
<script src="js/citrus-slider.min.js"></script>
                
            

Add markup

A simple container <div>, with each child <div> as a separate slide. The first <img> tag will be used as the slide background image.

                
<div class="citrus-slider">
    <div><img src="img/slide-1.jpg"></div>
    <div><img src="img/slide-2.jpg"></div>
    <div><img src="img/slide-3.jpg"></div>
</div>
                
            

Add desired content

This can include even include other images. Remember that the first image will be used as the slide background.

                
<div class="citrus-slider">
    <div><img src="img/slide-1.jpg"><h2>Slide 1</h2></div>
    <div><img src="img/slide-2.jpg"><h2>Slide 2</h2></div>
    <div><img src="img/slide-3.jpg"><h2>Slide 3</h2></div>
</div>
                
            

Customize settings

Add data-citrus followed by a JSON string of the settings you would like to change.

                
<div class="citrus-slider" data-citrus='{"duration" : 4000, "transition" : "pan"}'>
    <div><img src="img/slide-1.jpg"></div>
    <div><img src="img/slide-2.jpg"></div>
    <div><img src="img/slide-3.jpg"></div>
</div>
                
            


Settings


Key Value Default Description
slideTransition 'pan', 'zoom-fade', 'scope', 'fallaway', 'downandout' 'pan' Slide transition animation
slideIndex 1,2,3 etc. 1 Indicate which slide the slider should start on
slideDuration number in ms (e.g 5000) 5000 Delay between slide transitions
effect true, false true Enable or disable slide resting animation
effectType 'zoom', 'pan' 'zoom' Slide resting animation type
animateText true, false true Enable or disable slide content animating in after slide transition
showIndicators true, false true Enable or disable slide indicators
showArrows true, false true Enable or disable slide arrows
paused true, false false Enable or disable automatic, timed slide transition
autoPause true, false true Enable or disable automatic pausing (e.g. when user interacts with slider)