<div class="preview-slider">
    <div class="slider-wrapper">
        <div class="slider-item" style="background-image: url(https://alikinvv.github.io/previewSlider/demo/img/img4.jpg)"></div>
        <div class="slider-item" style="background-image: url(https://alikinvv.github.io/previewSlider/demo/img/img1.jpg)"></div>
        <div class="slider-item" style="background-image: url(https://alikinvv.github.io/previewSlider/demo/img/img6.jpg)"></div>
        <div class="slider-item" style="background-image: url(https://alikinvv.github.io/previewSlider/demo/img/img3.jpg)"></div>
        <div class="slider-item" style="background-image: url(https://alikinvv.github.io/previewSlider/demo/img/img5.jpg)"></div>
        <div class="slider-item" style="background-image: url(https://alikinvv.github.io/previewSlider/demo/img/img2.jpg)"></div>
    </div>

    <div class="arrow arrow-right"></div>
    <div class="arrow arrow-left"></div>

    <div class="slider-desc">
        <p class="title">True Detective</p>

        <span class="desc">True Detective is an American crime drama television series <br>
        created and written by Nic Pizzolatto. The series is broadcast <br>
        by the premium cable network HBO in the United States.</span>
    </div>
</div>




<!-- github  -->
<a href="https://github.com/alikinvv/previewSlider" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#e6e4d8; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
html,
body {
  width: 100%;
  height: 100%; 
}

body {
  font-family: 'Playfair Display', serif; 
}

.slider-desc {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center; }
  .slider-desc .title {
    font-size: 95px;
    font-weight: bold;
    margin: 0 0 10px; 
}

  .slider-desc .desc {
    font-size: 18px;
    line-height: 1.4; 
}

.zoom .slider-item {
	cursor: pointer;
}
new previewSlider({
	container: '.preview-slider',
	content: true,
	arrowLeft: '.arrow-left',
	arrowRight: '.arrow-right',
	scale: 0.4,
	scrollSpeed: 4
});

function previewSlider(obj) {
    this.container = document.querySelector(obj.container);
    this.images = this.container.querySelectorAll('.slider-item');
    this.wrapper = document.querySelector('.slider-wrapper');
    this.left = document.querySelector(obj.arrowLeft);
    this.right = document.querySelector(obj.arrowRight);
    this.width = window.innerWidth;
    this.pos = 0;
    this.scale = obj.scale === undefined ? 0.4 : obj.scale;
    this.scrollSpeed = obj.scrollSpeed === undefined ? 4 : obj.scrollSpeed;
    this.content = obj.content === undefined ? false : obj.content;

    const previewAnimationTime = 2000;
    var slider = this;
    var activeSlide = 0;
    var isAnimate = false;

    this.wrapper.style.transform = 'translate3d(0, 0, 0)';
    this.left.classList.add('hide');

    if (!slider.content) {
        for (var i = 0; i < this.images.length; i++) {
            this.container.removeChild(this.images[i]);

            var newSlide = document.createElement('div');
            newSlide.classList.add('slider-item');
            newSlide.style.backgroundImage = 'url(' + this.images[i].getAttribute('src') + ')';
            this.wrapper.appendChild(newSlide);
        }
    }

    this.slideNext = function (e) {
        if (slider.pos <= ((slider.images.length - 1) * slider.width) * -1) {
            e.preventDefault();
            this.right.classList.add('hide');
        } else if (slider.pos <= ((slider.images.length - 2) * slider.width) * -1) {
            slider.pos -= slider.width;
            slider.wrapper.style.transform = 'translate3d(' + slider.pos + 'px, 0, 0)';
            activeSlide++;
            slider.leftPreview();
            this.right.classList.add('hide');
        } else {
            slider.pos -= slider.width;
            slider.wrapper.style.transform = 'translate3d(' + slider.pos + 'px, 0, 0)';
            activeSlide++;
            this.left.classList.remove('hide');
            this.right.classList.remove('hide');
            slider.leftPreview();
            slider.rightPreview();
        }

        isAnimate = false;
        slider.right.classList.remove('show');
    }

    this.slidePrev = function (e) {
        if (slider.pos === 0) {
            e.preventDefault();
            this.left.classList.add('hide');
        } else if (activeSlide === 1) {
            slider.pos += slider.width;
            slider.wrapper.style.transform = 'translate3d(' + slider.pos + 'px, 0, 0)';
            activeSlide--;
            this.left.classList.add('hide');
            slider.rightPreview();
        } else {
            slider.pos += slider.width;
            slider.wrapper.style.transform = 'translate3d(' + slider.pos + 'px, 0, 0)';
            activeSlide--;
            this.right.classList.remove('hide');
            this.left.classList.remove('hide');
            slider.leftPreview();
            slider.rightPreview();
        }

        isAnimate = false;
        slider.left.classList.remove('show');
    }

    this.leftPreview = function () {
        if (activeSlide > 0) {
            var arrow = slider.left.querySelector('.preview');
            var src = slider.images[activeSlide-1].getAttribute('style').match(/url\(["']?([^"']*)["']?\)/)[1];
            arrow.setAttribute('style', 'background-image: url(' + src + ')');
        }        
    }

    this.rightPreview = function () {
        if (activeSlide < slider.images.length - 1) {
            var arrow = slider.right.querySelector('.preview');
            var src = slider.images[activeSlide+1].getAttribute('style').match(/url\(["']?([^"']*)["']?\)/)[1];
            arrow.setAttribute('style', 'background-image: url(' + src + ')');
        }
    }

    this.previewAnimate = function (e, arrow, direction) {
        arrow.classList.add('animate');
        arrow.classList.add('show');
        isAnimate = true;

        if (direction === 'right') {
            slider.startCounting(counterRight);
            setTimeout(function () {
                slider.slideNext(e);
                arrow.classList.remove('animate');
            }, previewAnimationTime);
        } else {
            slider.startCounting(counterLeft);
            setTimeout(function () {
                slider.slidePrev(e);
                arrow.classList.remove('animate');
            }, previewAnimationTime);
        }
    }

    this.startCounting = function (counter) {
        var count = 0;
        var countdown = setInterval(function () {
            count++;
            counter.innerHTML = count;
            if (count === 100) {
                clearInterval(countdown);
                counter.innerHTML = 0;
            }
        }, previewAnimationTime / 100);
    }

    var gridLeft = document.createElement('div');
    var gridRight = document.createElement('div');
    gridLeft.innerHTML = '<span>See all<br>slides</span>';
    gridRight.innerHTML= '<span>See all<br>slides</span>';
    gridLeft.classList.add('grid');
    gridRight.classList.add('grid');
    this.left.appendChild(gridLeft);
    this.right.appendChild(gridRight);

    var previewLeft = document.createElement('div');
    var previewRight = document.createElement('div');
    previewLeft.classList.add('preview');
    previewRight.classList.add('preview');
    this.left.appendChild(previewLeft);
    this.right.appendChild(previewRight);

    var nextLeft = document.createElement('div');
    var nextRight = document.createElement('div');
    nextLeft.innerHTML= 'Prev<br>Slide';
    nextRight.innerHTML = 'Next<br>Slide';
    nextLeft.classList.add('arrow-link');
    nextRight.classList.add('arrow-link');
    this.left.appendChild(nextLeft);
    this.right.appendChild(nextRight);

    var counterLeft = document.createElement('div');
    var counterRight = document.createElement('div');
    counterLeft.innerHTML= '0';
    counterRight.innerHTML = '0';
    counterLeft.classList.add('counter');
    counterRight.classList.add('counter');
    this.left.appendChild(counterLeft);
    this.right.appendChild(counterRight);

    this.rightPreview();

    previewRight.addEventListener('click', function (e) {
        slider.previewAnimate(e, slider.right, 'right');
    })

    previewLeft.addEventListener('click', function (e) {
        slider.previewAnimate(e, slider.left, 'left');
    })

    this.right.addEventListener('mouseleave', function (e) {
        if (!isAnimate) {
            this.classList.remove('show');
        }
    })

    this.left.addEventListener('mouseleave', function (e) {
        if (!isAnimate) {
            this.classList.remove('show');
        }
    })
    
    var grids = document.querySelectorAll('.grid');
    var trigger = true;
    var intervalRight = null;
    var intervalLeft = null;

    for (var i = 0; i < grids.length; i++) {
        grids[i].addEventListener('click', function () {
            if (!isAnimate) {
                slider.left.classList.add('hide');
                slider.right.classList.add('hide');
                if (slider.pos === 0) {
                    slider.wrapper.style.transformOrigin = '0'
                } else {
                    slider.pos = slider.pos / (slider.scale * 10);
                }

                slider.wrapper.style.transform = 'translate3d(' + slider.pos + 'px, 0, 0) scale(' + slider.scale + ')';
                slider.wrapper.classList.add('zoom');


                setTimeout(function () {
                    function findObjectCoords(mouseEvent) {
                        var obj = slider.wrapper;
                        var obj_left = 0;
                        var obj_top = 0;
                        var xpos;

                        while (obj.offsetParent) {
                            obj_left += obj.offsetLeft;
                            obj_top += obj.offsetTop;
                            obj = obj.offsetParent;
                        }

                        if (mouseEvent) {
                            xpos = mouseEvent.pageX;
                            ypos = mouseEvent.pageY;
                        } else {
                            xpos = window.event.x + document.body.scrollLeft - 2;
                            ypos = window.event.y + document.body.scrollTop - 2;
                        }

                        xpos -= obj_left;
                        ypos -= obj_top;

                        if (xpos >= slider.width - 100) {
                            if (Math.abs(slider.wrapper.getBoundingClientRect().left) != ((slider.images.length * slider.width) * slider.scale) - slider.width) {
                                slider.slideRight(trigger);
                                trigger = false;
                            }                            
                        } else if (xpos <= 100) {
                            if (slider.wrapper.getBoundingClientRect().left != 0) {
                                slider.slideLeft(trigger);
                                trigger = false;
                            }                            
                        } else {
                            clearInterval(intervalRight);
                            clearInterval(intervalLeft);
                            trigger = true;
                        }
                    }

                    slider.wrapper.onmousemove = findObjectCoords;
                }, 1000);
            }
        })
    }
    
    this.slideRight = function (trigger) {
        if (trigger && slider.wrapper.classList.contains('zoom')) {
            slider.wrapper.style.transition = 'none';
            intervalRight = setInterval(function () {
                slider.pos -= slider.scrollSpeed;
                slider.wrapper.style.transform = 'translate3d(' +  slider.pos + 'px, 0, 0) scale(' + slider.scale + ')';

                if (Math.abs(slider.wrapper.getBoundingClientRect().left) === ((slider.images.length * slider.width) * slider.scale) - slider.width) {
                    clearInterval(intervalRight);
                }
            }, 1);
        }
    }

    this.slideLeft = function (trigger) {
        if (trigger && slider.wrapper.classList.contains('zoom')) {
            slider.wrapper.style.transition = 'none';
            intervalLeft = setInterval(function () {
                slider.pos += slider.scrollSpeed;
                slider.wrapper.style.transform = 'translate3d(' +  slider.pos + 'px, 0, 0) scale(' + slider.scale + ')';

                if (slider.wrapper.getBoundingClientRect().left === 0) {
                    clearInterval(intervalLeft);
                }
            }, 1);
        }
    }

    for (var i = 0; i < this.images.length; i++) {
        (function(index){
            slider.images[i].addEventListener('click', function () {
                if (slider.wrapper.classList.contains('zoom')) {
                    slider.wrapper.style.transition = 'all 1s ease-in-out';
                    slider.wrapper.classList.remove('zoom');

                    slider.pos = (index * slider.width) * -1;
                    activeSlide = index;

                    slider.wrapper.style.transform = 'translate3d(' + slider.pos + 'px, 0, 0)';

                    if (index === 0) {
                        slider.right.classList.remove('hide');
                    } else if (index === slider.images.length - 1) {
                        slider.left.classList.remove('hide');
                    } else {
                        slider.right.classList.remove('hide');
                        slider.left.classList.remove('hide');
                    }

                    slider.leftPreview();
                    slider.rightPreview();
                }
            });
        })(i);
    }
}

External CSS

  1. https://alikinvv.github.io/previewSlider/demo/css/preview-slider.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.