How does Image Slider works?

March 2, 2016

After reading this article you will be able to:

  • understand advanced Ractive.js configuration
  • understand how does Image Slider works
  • easily modify slider behaviour

This article will bring you advanced configuration concepts in Ractive.js using Image Slider written by Kuba. Links to needed resources are available in the fiddle below.





Explanation

Images to use

In this example I will use random images from the Internet, and create an array with them. Array should be named images. Of course you can load images from a database, JSON or other source.

oninit

oninit is a function that fires when instance is ready to be rendered. Inside this function, I’ve put all settings needed at initialization time, including changing actual image index, observing user interaction with slider, hiding icons when user does not mouse over slider, and managing navigation dots. Inside this function I’ve also set events and invoke function that positions images.

getAsync

This function uses a Ractive.js’s build-in Promise mechanism. I use this function to asynchronously load images and show or hide animated preloader for better user experience.

onconfig

Function onconfig sets our default values to use right after app configuration.

clickOnDot

This function allows user to change actual displayed image by using navigation dots.

clickOnImage

clickOnImage obviously allow user to change image to next or previous. This function also sets two areas on the left and right side of image, so user does not have to click exactly on controllers to change image.

mouseMoveOnImage

mouseMoveOnImage is used to set CSS classes to slider controllers, navigation dots and preloader. This function simply shows or hides appropriate parts of slider, according to cursor position over image. For example, this function show left arrow when you hover left side of image.

position

Function position uses Fit.js library to fit image inside parent object. It is used to fit images with different resolutions inside the same object. watch and apply are used to responsively resize image when user changes browser dimensions.

Other functions

Functions removeIcons, hidePreloader, showPreloader hide or show elements of slider.

Component initialization

new ImageSlider({
  el: '#slider1',
  data: {
    images: images
  },
});

This snipper allows us to place slider inside #slider1 element on our website. You can use multiple instances with different image sets.

Example

You can see a working example of this Image Slider on https://jsfiddle.net/goleksy/bfvmhc36/

Kuba Wyrobek Founder, Meteor Developer
Grzegorz Oleksy Junior Meteor Developer