Creating ImageSlider component in RactiveJS in 120 loc

February 5, 2016

In this article you will learn how to:

  • Create a template in Ractive.js
  • Use component multiple times with different data
  • Easily adjust slider to your website





Step by step instruction

Template and HTML content

First, let’s create a HTML file, where we want to display Image Slider. Next, use this snippet to place three sliders on your website.

<div id='container'>

  <h1>First Slider</h1>
  <div id='slider1'></div>

  <h1>Second Slider</h1>
  <div id='slider2'></div>

  <h1>Third Slider</h1>
  <div id='slider3'></div>

</div>

Next we will create a template:

<script type='text/ractive' id='sliderTemplate'>
  <div class="imageSlider_parent">
    <div class="imageSlider_wrapper">
      <img src="{{activeImageUrl()}}">
    </div>
    <div class='imageSlider_controllers'>
      <a on-click='previousImage'><i class="fa fa-arrow-circle-left fa-3x imageSlider_left2"></i></a> {{#if showPauseButton}}
      <a on-click='pause'><i class="fa fa-pause-circle fa-3x imageSlider_pause"></i></a> {{else}}
      <a on-click='start'><i class="fa fa-play-circle fa-3x imageSlider_play"></i></a> {{/if}}
      <a on-click='nextImage'><i class="fa fa-arrow-circle-right fa-3x imageSlider_right2"></i></a>
    </div>
  </div>
</script>

In Ractive.js templates must be placed inside <script> tag, or loaded via module loader. In this demo we will use simplest way possible.

You should notice that template uses a few functions from his parent. See this reference:

  • {{activeImageUrl()}} – We call here function that return current image source address
  • {{showPauseButton}} – We use this variable to show or hide pause/play button

Functions that are invoked when user clicks on controller’s buttons:

  • previousImage – shows previous image in slider
  • nextImage – shows next image in slider
  • pause/play – stops or starts again automatic image switching

In our example <div id='slider1'></div> etc. are places where Ractive.js will render sliders.

We use beautiful Font Awesome icons as slider’s controller buttons.

ImageSlider source code

This component uses observe function to check when user clicked on one of the controller icons and to position image using Fit.js. This is a simple, but powerfull library that helps us to losslessly fit images in parent object.

Slider of course have a basic functionality like showing next and previous image, stoping and resuming automatic slideshow. To check how we done them, look for these functions in our code:

startSlideshow, stopSlideshow, previousImage, nextImage

In code you will also find out, that we use NProgress function. NProgress is used to display a progress bar and a spinner while waiting to load next or previous image. Use it for better user experience.

How to initiate components

To initiate new slider you must create a new ImageSlider object and an array that will contain source URL of our images. Images don’t need to have the same size or proportions, Fit.js will handle it.

In this demo I use random images from the Internet, all rights belong to their respective owners.

First, add a new Array with images.

var firstImageSet = [
  'http://img15.deviantart.net/1ffe/i/2008/314/7/b/magic_forrest_by_jsunsstock.jpg',
  'https://c2.staticflickr.com/6/5347/9657510889_b2d928e3d0_b.jpg',
  'https://kevinraber.files.wordpress.com/2012/12/july-exhibit-redwood-2-00042-1-wcr.jpg',
  'http://img09.deviantart.net/f88c/i/2012/139/b/a/sunny_forrest_by_peenbuiker-d50b44a.jpg',
  'http://orig02.deviantart.net/3fec/f/2008/263/5/3/the_forrest_awakes_by_frederikm.jpg'
];

Second, add new ImageSlider object like this:

new ImageSlider({
  el: '#slider1',
  template: '#sliderTemplate',
  data: {
    images: firstImageSet,
    parent: '#slider1'
  }
});

For reference:

  • el – place where Ractive.js will render this object.

  • template – template for Ractive.js

  • data – data that we want to use inside our instance. images points to our array, parent is used for NProgress to display progress bar right above image, not the whole website body. It should have the same value as el.

To create another slider you have to simply add new array and choose proper element on your website in which Ractive.js would render slider.

Styling our slider

The last thing we need to add is our CSS file. Besides this file, we use bootstrap and font awesome for slider controller icons.

#slider2 {
  width: 400px;
  height: 300px;
  position: relative;
}

#slider2 img {
  width: 400px;
  height: auto;
}

#slider3 {
  width: 100vw;
  height: 100vh;
  position: relative;
}

#slider3 img {
  width: 100vw;
  height: auto;
}

To adjust slider for your needs, all you have to do is change width and height of div that contains this component, in our example its #slider2 and #slider3. As you can see, we can easily set our slider to be a small component on your website or to cover whole screen.

Remember that we use Fit.js that would scale images to dimensions you have set on parent div. Use hight resolution images for better results.

Check rest of the code at https://jsfiddle.net/goleksy/dzb4te50/

Conclusion

  • We can easily use one component multiple times on webiste.
  • Instead of copying template, we can use one and pass different data to it.
  • Changing the size of ImageSlider is just a few lines of CSS code.

Resources:

Kuba Wyrobek Founder, Meteor Developer
Grzegorz Oleksy Junior Meteor Developer