Tiny Slideshow With Thumbnail Preview – CFSlideshow

A small and easy-to-use JavaScript slideshow plugin where you can switch between images through navigation arrows, thumbnail previews, and even external links.

How to use it:

Load the core JavaScript and CSS files in the page.

<link href="cf-slideshow-style.css" rel="stylesheet" />
<script src="CFSlideshow.js"></script>

The basic HTML for the slideshow.

<div class="cf-slideshow" id="mySlideshow">
  <section>
    <img src="https://source.unsplash.com/CwTBt6jyagQ/500x380" />
  </section>
  <section>
    <img src="https://source.unsplash.com/F5MtlhmBOf0/500x380" />
  </section>
  <section>
    <img src="https://source.unsplash.com/SYx3UCHZJlo/500x380" />
  </section>
  <section>
    <img src="https://source.unsplash.com/n5wwck8ES4w/500x380" />
  </section>
  <section>
    <img src="https://source.unsplash.com/1dwRuFgDr0o/500x380" />
  </section>
</div>

Initialize the CFSlideshow and done.

var mySlideshow = new CFSlideshow('mySlideshow');

Set the width/height of the slideshow.

var mySlideshow = new CFSlideshow('mySlideshow', {
    width: '500px',
    height: '300px'
});

Enable autoplay functionality.

var mySlideshow = new CFSlideshow('mySlideshow', {
    autoplay: true
    delay: 10,
    clickCancel: true
});

Use Slide transition instead of the default Fade effect.

var mySlideshow = new CFSlideshow('mySlideshow', {
    transition: 'slide'
});

Enable/disable the thumbnail preview.

var mySlideshow = new CFSlideshow('mySlideshow', {
    showThumbs: true,
    thumbMode: 'preview'
});

Enable/disable the navigation arrows.

var mySlideshow = new CFSlideshow('mySlideshow', {
    showButtons: true,
    buttonHide: true // auto hide arrows
});

The slideshow can be controlled with external links.

<a href="javascript:mySlideshow.prevSlide()">Previous slide</a>
<a href="javascript:mySlideshow.nextSlide()">Next slide</a>

Get the current slide index.

mySlideshow.getCurrentSlide()

Get the total number of slides.

mySlideshow.getTotalSlides()