JSFiddle - React, Tailwind, and code Playground

by Doug Hill

HTML

<div class="slideshow" data-bind="slideshow: { data: images, imageTemplate: 'rowTmpl' }"></div>
<script id="rowTmpl" type="text/html">
   <div class='product-image-container'>
       <figure class='product-image'>
           <picture>
              <img itemprop='image' alt='Image' data-bind='attr: { src: url }' />
           </picture>
        <figcaption></figcaption>
        </figure>
   </div>
</script>

CSS

.product-image-container { display: none; }
.product-image-container.active { display: block; }

JavaScript

ko.bindingHandlers.slideshow = {
    init: function(elem, value, allBindings) {
        var nav = document.createElement('nav'),
            prev = document.createElement('button'), next;
        
        function goPrev() {
            var current = elem.getElementsByClassName('active')[0];
            if (current.previousElementSibling) {
            current.previousElementSibling.className += ' active';
            current.className = current.className.replace(' active',''); }
        }
        function goNext() {
            var current = elem.getElementsByClassName('active')[0];
            if (current.nextElementSibling) {
            current.nextElementSibling.className += ' active';
            current.className = current.className.replace(' active',''); }
        }
        
        prev.type = 'button';
        prev.textContent = '<<';
        next = prev.cloneNode();
        next.textContent = '>>';
        prev.addEventListener('click', goPrev, false);
        next.addEventListener('click', goNext, false);
        nav.appendChild(prev);
        nav.appendChild(next);
        nav.style.textAlign = elem.style.textAlign = 'center';
        elem.parentNode.insertBefore(nav, elem.nextSibling);
        elem.firstElementChild.className += ' active';
    },
    preprocess: function(value, name, addBinding) {
        addBinding('template', value.replace('imageTemplate', 'name').replace('data', 'foreach'));
        return value;
    }
};

var app = {
    images: ko.observableArray([
        {content: 'Slide 1', url: 'http://placehold.it/256x256/AF4351'},
        {content: 'Slide 2', url: 'http://placehold.it/256x256/0087FF'},
        {content: 'Slide 3', url: 'http://placehold.it/256x256/DC7892'}
    ])
};
ko.applyBindings(app);