Images courtesy of Junkanoo Media
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>
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>
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>
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>
| 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) |