https://kiwitcms.org/scripts/img-gallery-handler.js

1    var imgs = [
2        {
3            title: 'Central dashboard to start your day',
4            subtitle: 'See all of your test executions and test plans in one place',
5            img: 'images/screenshots/001_central_dashboard.png'
6        }, {
7            title: 'Create IEEE 829 or free text test plan',
8            subtitle: 'This document contains your overall testing strategy',
9            img: 'images/screenshots/002_testplan_00.png'
10        }, {
11            title: 'Test plan is a collection of test cases',
12            subtitle: 'Add, remove, review and approve test cases before you start testing',
13            img: 'images/screenshots/002_testplan_01.png'
14        }, {
15            title: 'Create a test case',
16            subtitle: 'Use Given-When-Then or bullet points to describe the scenario',
17            img: 'images/screenshots/003_create_test_case.png'
18        }, {
19            title: 'View existing test case',
20            subtitle: 'Intuitive access to all the important information',
21            img: 'images/screenshots/004_view_existing_test_cases.png'
22        }, {
23            title: 'Execute test runs against a build',
24            subtitle: 'For each product build create test runs to collect execution details',
25            img: 'images/screenshots/005_execute_tests_for_build.png'
26        }, {
27            title: 'Bug tracker integration',
28            subtitle: 'Link to existing bug reports or report new ones directly from Kiwi TCMS',
29            img: 'images/screenshots/007_bugtracker_github.png'
30        }, {
31            title: 'Automatic 1-click bug report',
32            subtitle: 'Open bugs in 3rd party systems from test executions. Fully customizable',
33            img: 'images/screenshots/007_bugtracker_jira.png'
34        }, {
35            title: 'Testing breakdown telemetry',
36            subtitle: 'Shows how existing test cases are distributed',
37            img: 'images/screenshots/006_testing_breakdown_telemetry.png'
38        }, {
39            title: 'Status matrix telemetry',
40            subtitle: 'Detailed information about test execution status',
41            img: 'images/screenshots/007_status_matrix_telemetry.png'
42        }, {
43            title: 'Execution trends telemetry',
44            subtitle: 'Information if product builds are getting better or worse',
45            img: 'images/screenshots/008_execution_trends_telemetry.png'
46        }, {
47            title: 'Test case health telemetry',
48            subtitle: 'Discover which test cases are the most common source of problems',
49            img: 'images/screenshots/009_test_case_health_telemetry.png'
50        }],
51        imgIndex = 0;
52
53    var nextBtn = document.getElementById('next'),
54        prevBtn = document.getElementById('prev'),
55        shown = document.getElementsByClassName('shown')[0];
56
57    // updates/ what is shown in the containers
58    function updateDisplay(idx) {
59        var heading = document.getElementById('heading'),
60            subtitle = document.getElementById('subtitle');
61
62        shown.src = imgs[idx].img;
63        heading.textContent = imgs[idx].title;
64        subtitle.textContent = imgs[idx].subtitle;
65    }
66
67    // roll images left and right by swapping the hidden/shown containers
68    function rollImage(direction) {
69        imgIndex += direction;
70
71        if (imgIndex < 0) {
72            imgIndex = imgs.length - 1;
73        }
74
75        if (imgIndex >= imgs.length) {
76            imgIndex = 0;
77        }
78
79        // show current image and texts
80        updateDisplay(imgIndex);
81        changeDirection(direction);
82    }
83
84    // helps change the direction from which the containers
85    // transition depending on which direction we want to go
86    function changeDirection(direction) {
87        shown.style.left = 0;
88    }
89
90    // initialization and callbacks
91    updateDisplay(0);
92    nextBtn.addEventListener('mouseover', function(){ changeDirection(1) });
93    prevBtn.addEventListener('mouseover', function(){ changeDirection(-1) });
94
95    nextBtn.addEventListener('click', function(){ rollImage(1); });
96    prevBtn.addEventListener('click', function(){ rollImage(-1); });