fancySlider

A lightweight JavaScript image slider

Live demo

See a live demo on CodePen

Usage

<style>
	@import url('../css/fancyslider.css');
</style>

<div class="fancyslider-container mySlider">
	<div class="slide" style="background-image: url('https://images.unsplash.com/photo-1576313269137-5c777923908f?&auto=format&fit=crop&fp-y=.70&w=800&h=600&q=80');">
	</div>
	<div class="slide" style="background-image: url('https://images.unsplash.com/photo-1507563669246-aaee3fa9a174?auto=format&fit=crop&w=800&q=80');">
	</div>
	<div class="slide" style="background-image: url('https://images.unsplash.com/photo-1573483587794-092bab380d9b?auto=format&fit=crop&w=800&q=80');">
	</div>
</div>

<script src="../js/fancyslider.js"></script>
<script>
	let mySlider = new fancySlider(".mySlider", { });
</script>

Options

navigation - Navigation pills

navigation: true

Default: false

pagination - Pagination (slide number) (boolean, query selector string or DOM object)

pagination: true

Default: false

history - Back / Forward buttons

history: false

Default: true

preloadImages - Preload all images found in the slider element

preloadImages: false

Default: true

autoplay - Automatically swap between slides

autoplay: true

Default: false

autoplayDelay - Delay between slides with using autoplay (in milliseconds)

autoplayDelay: 3000

Default: 5000

onShow(fancySlider) - Event that fires when a new slide is shown

onStart(fancySlider) - Event that fires when autoplay starts.

onStop(fancySlider) - Event that fires when autoplay stops.

Slide transitions

Slide transitions are defined by the data-transition attribute. Available transitions are:

• fade (default)
• slide
• rotate

Methods

play() - Starts autoplay from the current slide

stop() - Stops autoplay

forward() - Show the next slide

backward() - Show the previous slide

show(n) - Show slide n

Author: Johan Johansson