JSFiddle - React, Tailwind, and code Playground

by Leonardo Quintana

HTML

<slideshow>
  <sliders>
    <slider src="https://lorempixel.com/300"></slider>
    <slider src="https://lorempixel.com/300"></slider>
    <slider src="https://lorempixel.com/300"></slider>
    <slider src="https://lorempixel.com/300"></slider>
  </sliders>
  <button class="next-slide">&gt</button>
  <button class="previus-slide">&lt</button>
</slideshow>

SCSS

slideshow {
    overflow: hidden;
    &,
    sliders,
    slider {
        display: block;
        position: relative;
        width: 100%;
        max-height: 100%;
    }
    .previus-slide,
    .next-slide {
        -webkit-transition: all .25s ease-out;
        transition: all .25s ease-out;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 2.5em;
        cursor: pointer;
        z-index: 20;
        opacity: 0.7;
        &:hover {
            opacity: 1;
        }
    }
    .previus-slide {
        left: 0.5rem;
    }
    .next-slide {
        right: 0.5rem;
    }
    slider {
        img {
            margin-right: auto;
            margin-left: auto;
        }
        img,
        slider-caption {
            position: absolute;
            top: 0;
            z-index: -1;
        }
        &.is-visible slider-caption {
            padding: 1rem;
            left: 0;
            width: 100%;
            background-color: rgba($black, 0.3);
            color: $cloud;
            z-index: 15;
            &.is-invert {
                background-color: rgba($cloud, 0.3);
                color: inherit;
            }
        }
    }
    &[animate] slider {
        transition: all .3s ease-out;
    }
    &[animate="fade"] slider {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        &.is-visible {
            opacity: 1;
        }
    }
    &[animate*="slide"] slider {
        position: absolute;
        top: 0;
        left: 0;
        &.is-visible {
            z-index: 10;
            animation: sl .3s linear;
        }
    }
}

@keyframes sl {
    0% {
        left: 100%;
    }
    100% {
        left: 0;
    }
}

JavaScript

var slideshow = document.querySelectorAll('slideshow');
for (var i = 0; i < slideshow.length; i++) {
    var slider = slideshow[i].querySelectorAll('slider');
    var nextSlider = slideshow[i].querySelector('.next-slide');
    var previuSlider = slideshow[i].querySelector('.previus-slide');
    var intervalSlide = slideshow[i].getAttribute('interval') || 5000;

    slider[0].classList.add('is-visible');
    for (var h = 0; h < slider.length; h++) {
        var sliderImg = slider[h].getAttribute('src');
        var sliderAlt = slider[h].getAttribute('alt');
        var img = document.createElement('img');
        img.setAttribute('src', sliderImg);
        img.setAttribute('alt', sliderAlt);
        slider[h].appendChild(img);
        removeAttr(slider[h], 'src alt');

    }
    if (!slideshow[i].hasAttribute('controls')) {
        previuSlider.style.display = 'none';
        nextSlider.style.display = 'none';
    } else {
        var slideActive = 0;
        nextSlider.addEventListener('click', function() {
            slideActive = slideHasClass(slider) + 1;
            if (slideActive == slider.length) slideActive = 0;
            slider[slideActive].classList.add('is-visible');
        }, false);
        previuSlider.addEventListener('click', function() {
            slideActive = slideHasClass(slider) - 1;
            if (slideActive <= 0) slideActive = slider.length - 1;
            slider[slideActive].classList.add('is-visible');
        }, false);

        /* var slideActive = 0;
        nextSlider.addEventListener('click', ctrlSlide(1), false);
        previuSlider.addEventListener('click', ctrlSlide(-1), false);

        function ctrlSlide(ctrl) {
						(ctrl > 0)
								?	slideActive = slideHasClass(slider) + 1
								:	slideActive = slideHasClass(slider) - 1;
            if (slideActive <= 0) slideActive = slider.length - 1;
            if (slideActive == slider.length) slideActive = 0;
            slider[slideActive].classList.add('is-visible');
   ...