image-slider

news-vj-component-image-slider

Defines an Image Slider component for use in Visual Journalism projects.

Template

{{>image-slider id='unique_id_of_slider' caption='Caption appearing below slider' interactive_tag='interactive' cta='Use the slider below to compare before and after images' left_img_label='Aug 2013' left_img_alt='Rainforest before the disaster' left_img_src='http://placehold.it/640x320' right_img_label='Aug 2014' right_img_alt='Rainforest after disaster' right_img_src='http://placehold.it/640x320'}}

Properties:

• id
• caption (optional)
• interactive_tag
• cta
• left_img_label
• left_img_alt
• left_img_src
• right_img_label
• right_img_alt
• right_img_src

JavaScript

import ImageSlider from 'news-vj-component-image-slider';

const imageSlider = new ImageSlider('id');
imageSlider.init();

// or, if istats required (optional)

const imageSlider = new ImageSlider('id', myIstatsObject);
imageSlider.init();

// example myIstatsObject

const myIstatsObject = {
    log: (message) => {
        wrapper.callIstats({
            actionType: message,
            actionName: 'newsspec-interaction',
            viewLabel: true,
        });
    },
};