No Description
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
mikey242 94a243fa98 change headings 8 months ago
dist build changes 8 months ago
src update repo and docs address 8 months ago
test reconfigure build process 1 year ago
.gitignore configure build process 1 year ago change headings 8 months ago
gulpfile.js remove unused code 1 year ago
index.html add 'false'option to effect selector, slider now on center of page 8 months ago
package-lock.json update packages 8 months ago
package.json update packages 8 months ago

alt text

Citrus Slider is a simple JavaScript and CSS based slider. There are no third party requirements such as jQuery.


You can see it in action by going here


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>

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>

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>


Key Value Default Description
width any valid css width (e.g 400px, 100%) ‘100%’ Sets the width of the slider
height any valid css height (e.g 400px, 100%) ‘100%’ Sets the height of the slider
animationDuration number in seconds 0.8 Determines how long the animation should take when transitioning slides
autoHeight true, false false Automatically sets the height of the slider based on the height of the content
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 ‘zoom’, ‘pan’, ‘parallax’, false false 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)


Invoking citrus will return a slider object with various methods. This will allow you to programmatically control the slider. For example, to reset the slider you would use citrus[0].reset(). The [0] represents the index of the slider. If you have more than one slider on a page you will need to change this to the slider you intend to target.

Method Description Example
play() Unpauses and starts the automatic slideshow citrus[0].play()
stop() Stops and pauses the automatic slideshow citrus[0].stop()
prevSlide() Goes to the previous slide in the sequence citrus[0].prevSlide()
nextSlide() Goes to the next slide in the sequence citrus[0].nextSlide()
gotoSlide() Goes to the specified slide in the sequence citrus[0].gotoSlide(2)
reset() Resets slider by rebuilding and resetting status citrus[0].reset()