<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700" rel="stylesheet"> <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">Hello world</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> <script> function previewSlider(a){this.container=document.querySelector(a.container),this.images=this.container.querySelectorAll(".slider-item"),this.wrapper=document.querySelector(".slider-wrapper"),this.left=document.querySelector(a.arrowLeft),this.right=document.querySelector(a.arrowRight),this.width=window.innerWidth,this.pos=0,this.scale=void 0===a.scale?.4:a.scale,this.scrollSpeed=void 0===a.scrollSpeed?4:a.scrollSpeed,this.content=void 0!==a.content&&a.content;const b=2e3;var c=this,d=0,f=!1;if(this.wrapper.style.transform="translate3d(0, 0, 0)",this.left.classList.add("hide"),!c.content)for(var g=0;g<this.images.length;g++){this.container.removeChild(this.images[g]);var e=document.createElement("div");e.classList.add("slider-item"),e.style.backgroundImage="url("+this.images[g].getAttribute("src")+")",this.wrapper.appendChild(e)}this.slideNext=function(a){c.pos<=-1*((c.images.length-1)*c.width)?(a.preventDefault(),this.right.classList.add("hide")):c.pos<=-1*((c.images.length-2)*c.width)?(c.pos-=c.width,c.wrapper.style.transform="translate3d("+c.pos+"px, 0, 0)",d++,c.leftPreview(),this.right.classList.add("hide")):(c.pos-=c.width,c.wrapper.style.transform="translate3d("+c.pos+"px, 0, 0)",d++,this.left.classList.remove("hide"),this.right.classList.remove("hide"),c.leftPreview(),c.rightPreview()),f=!1,c.right.classList.remove("show")},this.slidePrev=function(a){0===c.pos?(a.preventDefault(),this.left.classList.add("hide")):1===d?(c.pos+=c.width,c.wrapper.style.transform="translate3d("+c.pos+"px, 0, 0)",d--,this.left.classList.add("hide"),c.rightPreview()):(c.pos+=c.width,c.wrapper.style.transform="translate3d("+c.pos+"px, 0, 0)",d--,this.right.classList.remove("hide"),this.left.classList.remove("hide"),c.leftPreview(),c.rightPreview()),f=!1,c.left.classList.remove("show")},this.leftPreview=function(){if(0<d){var a=c.left.querySelector(".preview"),b=c.images[d-1].getAttribute("style").match(/url\(["']?([^"']*)["']?\)/)[1];a.setAttribute("style","background-image: url("+b+")")}},this.rightPreview=function(){if(d<c.images.length-1){var a=c.right.querySelector(".preview"),b=c.images[d+1].getAttribute("style").match(/url\(["']?([^"']*)["']?\)/)[1];a.setAttribute("style","background-image: url("+b+")")}},this.previewAnimate=function(a,d,e){d.classList.add("animate"),d.classList.add("show"),f=!0,"right"===e?(c.startCounting(p),setTimeout(function(){c.slideNext(a),d.classList.remove("animate")},b)):(c.startCounting(o),setTimeout(function(){c.slidePrev(a),d.classList.remove("animate")},b))},this.startCounting=function(a){var b=0,c=setInterval(function(){b++,a.innerHTML=b,100===b&&(clearInterval(c),a.innerHTML=0)},20)};var h=document.createElement("div"),j=document.createElement("div");h.innerHTML="<span>See all<br>slides</span>",j.innerHTML="<span>See all<br>slides</span>",h.classList.add("grid"),j.classList.add("grid"),this.left.appendChild(h),this.right.appendChild(j);var k=document.createElement("div"),l=document.createElement("div");k.classList.add("preview"),l.classList.add("preview"),this.left.appendChild(k),this.right.appendChild(l);var m=document.createElement("div"),n=document.createElement("div");m.innerHTML="Prev<br>Slide",n.innerHTML="Next<br>Slide",m.classList.add("arrow-link"),n.classList.add("arrow-link"),this.left.appendChild(m),this.right.appendChild(n);var o=document.createElement("div"),p=document.createElement("div");o.innerHTML="0",p.innerHTML="0",o.classList.add("counter"),p.classList.add("counter"),this.left.appendChild(o),this.right.appendChild(p),this.rightPreview(),l.addEventListener("click",function(a){c.previewAnimate(a,c.right,"right")}),k.addEventListener("click",function(a){c.previewAnimate(a,c.left,"left")}),this.right.addEventListener("mouseleave",function(){f||this.classList.remove("show")}),this.left.addEventListener("mouseleave",function(){f||this.classList.remove("show")});for(var q=document.querySelectorAll(".grid"),r=!0,s=null,t=null,g=0;g<q.length;g++)q[g].addEventListener("click",function(){f||(c.left.classList.add("hide"),c.right.classList.add("hide"),0===c.pos?c.wrapper.style.transformOrigin="0":c.pos/=10*c.scale,c.wrapper.style.transform="translate3d("+c.pos+"px, 0, 0) scale("+c.scale+")",c.wrapper.classList.add("zoom"),setTimeout(function(){function a(a){for(var b,d=c.wrapper,e=0,f=0;d.offsetParent;)e+=d.offsetLeft,f+=d.offsetTop,d=d.offsetParent;a?(b=a.pageX,ypos=a.pageY):(b=window.event.x+document.body.scrollLeft-2,ypos=window.event.y+document.body.scrollTop-2),b-=e,ypos-=f,b>=c.width-100?Math.abs(c.wrapper.getBoundingClientRect().left)!=c.images.length*c.width*c.scale-c.width&&(c.slideRight(r),r=!1):100>=b?0!=c.wrapper.getBoundingClientRect().left&&(c.slideLeft(r),r=!1):(clearInterval(s),clearInterval(t),r=!0)}c.wrapper.onmousemove=a},1e3))});this.slideRight=function(a){a&&c.wrapper.classList.contains("zoom")&&(c.wrapper.style.transition="none",s=setInterval(function(){c.pos-=c.scrollSpeed,c.wrapper.style.transform="translate3d("+c.pos+"px, 0, 0) scale("+c.scale+")",Math.abs(c.wrapper.getBoundingClientRect().left)===c.images.length*c.width*c.scale-c.width&&clearInterval(s)},1))},this.slideLeft=function(a){a&&c.wrapper.classList.contains("zoom")&&(c.wrapper.style.transition="none",t=setInterval(function(){c.pos+=c.scrollSpeed,c.wrapper.style.transform="translate3d("+c.pos+"px, 0, 0) scale("+c.scale+")",0===c.wrapper.getBoundingClientRect().left&&clearInterval(t)},1))};for(var g=0;g<this.images.length;g++)(function(a){c.images[g].addEventListener("click",function(){c.wrapper.classList.contains("zoom")&&(c.wrapper.style.transition="all 1s ease-in-out",c.wrapper.classList.remove("zoom"),c.pos=-1*(a*c.width),d=a,c.wrapper.style.transform="translate3d("+c.pos+"px, 0, 0)",0===a?c.right.classList.remove("hide"):a===c.images.length-1?c.left.classList.remove("hide"):(c.right.classList.remove("hide"),c.left.classList.remove("hide")),c.leftPreview(),c.rightPreview())})})(g)} </script> <script> window.onload = function () { new previewSlider({ container: '.preview-slider', content: true, arrowLeft: '.arrow-left', arrowRight: '.arrow-right', scale: 0.4, scrollSpeed: 4 }); } </script>

/* start slider main css */ .preview-slider .arrow.hide,.preview-slider .preview::before{ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; pointer-events:none } .preview-slider{ height:100%; overflow:hidden; position:relative; background:#333 } .preview-slider .slider-item{ background-repeat:no-repeat; -webkit-background-size:cover; background-size:cover; background-position:center; height:100%; width:100%; text-align:center; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -webkit-justify-content:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; -webkit-flex-shrink:0; -ms-flex-negative:0; flex-shrink:0; position:relative; -webkit-transition:all 2s ease-in-out; -o-transition:all 2s ease-in-out; transition:all 2s ease-in-out } .preview-slider .slider-item::before{ content:''; position:absolute; top:0; right:0; left:0; bottom:0; opacity:.5; -webkit-transition:background 1s ease-in-out,opacity .5s ease-in-out; -o-transition:background 1s ease-in-out,opacity .5s ease-in-out; transition:background 1s ease-in-out,opacity .5s ease-in-out } .preview-slider .slider-wrapper{ width:100%; height:100%; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; align-items:center; -webkit-box-sizing:content-box; box-sizing:content-box; position:relative; -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); -webkit-transition:all 1s ease-in-out; -o-transition:all 1s ease-in-out; transition:all 1s ease-in-out } .preview-slider .slider-wrapper.zoom .slider-item::before{ background:#000 } .preview-slider .slider-wrapper.zoom .slider-item:hover::before{ opacity:0 } .preview-slider .arrow{ position:absolute; top:50%; -webkit-transform:translateY(-50%) scale(1); -ms-transform:translateY(-50%) scale(1); transform:translateY(-50%) scale(1); z-index:1; cursor:pointer; -webkit-transition:all .5s ease-in-out; -o-transition:all .5s ease-in-out; transition:all .5s ease-in-out; width:220px; height:110px } .preview-slider .arrow::before{ content:''; position:absolute; top:50%; left:50%; -webkit-border-radius:50%; border-radius:50%; width:100px; height:100px; border:3px solid #333; opacity:0; -webkit-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; transition:all .4s ease-in-out } .preview-slider .arrow.hide{ opacity:0; user-select:none } .preview-slider .arrow.animate .preview::before{ -webkit-transition:all 2s ease-in-out; -o-transition:all 2s ease-in-out; transition:all 2s ease-in-out; width:0% } .preview-slider .arrow.animate.arrow-right .counter{ -webkit-transition:-webkit-transform 2s ease-in-out; -o-transition:transform 2s ease-in-out; transition:transform 2s ease-in-out; transition:transform 2s ease-in-out,-webkit-transform 2s ease-in-out; -webkit-transform:translateX(170px); -ms-transform:translateX(170px); transform:translateX(170px); opacity:1 } .preview-slider .arrow.animate.arrow-left .counter{ -webkit-transition:-webkit-transform 2s ease-in-out; -o-transition:transform 2s ease-in-out; transition:transform 2s ease-in-out; transition:transform 2s ease-in-out,-webkit-transform 2s ease-in-out; -webkit-transform:translateX(-170px); -ms-transform:translateX(-170px); transform:translateX(-170px); opacity:1 } .preview-slider .arrow-left{ left:0; background:url("https://alikinvv.github.io/previewSlider/demo/img/arrow-left.svg") 30% 50% no-repeat; -webkit-background-size:30px 30px; background-size:30px } .preview-slider .arrow-left::before{ -webkit-transform:translate(-80%,-50%) scale(.5); -ms-transform:translate(-80%,-50%) scale(.5); transform:translate(-80%,-50%) scale(.5) } .preview-slider .arrow-left.show,.preview-slider .arrow-left:hover{ background:url("https://alikinvv.github.io/previewSlider/demo/img/arrow-left.svg") 35% 50% no-repeat; -webkit-background-size:0 0; background-size:0 } .preview-slider .arrow-left.show::before,.preview-slider .arrow-left:hover::before{ -webkit-transform:translate(-80%,-50%) scale(.9); -ms-transform:translate(-80%,-50%) scale(.9); transform:translate(-80%,-50%) scale(.9); -webkit-animation:blink .4s ease-in-out 0s forwards; animation:blink .4s ease-in-out 0s forwards } .preview-slider .arrow-left.show .grid,.preview-slider .arrow-left:hover .grid{ -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0); opacity:1 } .preview-slider .arrow-left.show .preview,.preview-slider .arrow-left:hover .preview{ opacity:1; -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0) } .preview-slider .arrow-left.show .arrow-link,.preview-slider .arrow-left:hover .arrow-link{ opacity:1; -webkit-transform:translateX(0) translateY(-50%); -ms-transform:translateX(0) translateY(-50%); transform:translateX(0) translateY(-50%) } .preview-slider .arrow-left .grid{ right:0; -webkit-transform:translateX(-15px); -ms-transform:translateX(-15px); transform:translateX(-15px) } .preview-slider .arrow-left .grid span{ right:52px; text-align:right } .preview-slider .arrow-left .grid::before{ right:15px } .preview-slider .arrow-left .preview{ -webkit-transform:translateX(-140px); -ms-transform:translateX(-140px); transform:translateX(-140px); left:0; right:50px } .preview-slider .arrow-left .preview::before{ left:0 } .preview-slider .arrow-left .arrow-link{ right:63px; -webkit-transform:translateX(-50px) translateY(-50%); -ms-transform:translateX(-50px) translateY(-50%); transform:translateX(-50px) translateY(-50%) } .preview-slider .arrow-left .counter{ right:43px } .preview-slider .arrow-right{ right:0; background:url("https://alikinvv.github.io/previewSlider/demo/img/arrow-right.svg") 70% 50% no-repeat; -webkit-background-size:30px 30px; background-size:30px } .preview-slider .arrow-right::before{ -webkit-transform:translate(-22%,-50%) scale(.5); -ms-transform:translate(-22%,-50%) scale(.5); transform:translate(-22%,-50%) scale(.5) } .preview-slider .arrow-right.show,.preview-slider .arrow-right:hover{ background:url("https://alikinvv.github.io/previewSlider/demo/img/arrow-right.svg") 65% 50% no-repeat; -webkit-background-size:0 0; background-size:0 } .preview-slider .arrow-right.show::before,.preview-slider .arrow-right:hover::before{ -webkit-transform:translate(-23%,-50%) scale(.9); -ms-transform:translate(-23%,-50%) scale(.9); transform:translate(-23%,-50%) scale(.9); -webkit-animation:blink .4s ease-in-out 0s forwards; animation:blink .4s ease-in-out 0s forwards } .preview-slider .arrow-right.show .grid,.preview-slider .arrow-right:hover .grid{ -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0); opacity:1 } .preview-slider .arrow-right.show .preview,.preview-slider .arrow-right:hover .preview{ opacity:1; -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0); right:0; left:50px } .preview-slider .arrow-right.show .arrow-link,.preview-slider .arrow-right:hover .arrow-link{ opacity:1; -webkit-transform:translateX(0) translateY(-50%); -ms-transform:translateX(0) translateY(-50%); transform:translateX(0) translateY(-50%) } .preview-slider .arrow-right .grid{ left:0; -webkit-transform:translateX(15px); -ms-transform:translateX(15px); transform:translateX(15px) } .preview-slider .arrow-right .grid::before{ left:15px } .preview-slider .arrow-right .grid span{ left:52px } .preview-slider .arrow-right .preview{ -webkit-transform:translateX(140px); -ms-transform:translateX(140px); transform:translateX(140px) } .preview-slider .arrow-right .preview::before{ right:0 } .preview-slider .arrow-right .arrow-link{ left:63px; -webkit-transform:translateX(50px) translateY(-50%); -ms-transform:translateX(50px) translateY(-50%); transform:translateX(50px) translateY(-50%) } .preview-slider .arrow-right .counter{ left:43px } .preview-slider .grid{ display:inline-block; height:100%; width:50px; position:absolute; top:0; opacity:0; -webkit-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; transition:all .2s ease-in-out; -webkit-transition-delay:.4s; -o-transition-delay:.4s; transition-delay:.4s; overflow:hidden; background:#fff; z-index:2 } .preview-slider .grid span,.preview-slider .grid::before{ top:50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); position:absolute } .preview-slider .grid:hover{ width:130px } .preview-slider .grid::before{ content:''; width:20px; height:20px; transform:translateY(-50%); background:url("https://alikinvv.github.io/previewSlider/demo/img/grid.svg") center no-repeat } .preview-slider .grid span{ text-transform:uppercase; white-space:nowrap; line-height:1.3; transform:translateY(-50%); pointer-events:none; color:#333 } .preview-slider .preview{ position:absolute; top:0; height:100%; background-position:center; -webkit-background-size:cover; background-size:cover; opacity:0; -webkit-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; transition:all .4s ease-in-out; -webkit-transition-delay:.4s; -o-transition-delay:.4s; transition-delay:.4s } .preview-slider .preview::before{ content:''; position:absolute; top:0; width:100%; height:100%; background:#000; opacity:.5; user-select:none; -webkit-transition:all 1s ease-in-out; -o-transition:all 1s ease-in-out; transition:all 1s ease-in-out } .preview-slider .arrow-link{ z-index:1; position:absolute; top:50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); color:#fff; font-size:20px; opacity:0; -webkit-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; transition:all .4s ease-in-out; -webkit-transition-delay:.4s; -o-transition-delay:.4s; transition-delay:.4s; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; pointer-events:none; text-transform:uppercase } .preview-slider .counter{ position:absolute; top:-30px; font-size:24px; z-index:1; -webkit-transition:-webkit-transform 1s ease-in-out; -o-transition:transform 1s ease-in-out; transition:transform 1s ease-in-out; transition:transform 1s ease-in-out,-webkit-transform 1s ease-in-out; opacity:0 } @-webkit-keyframes blink{ 0%,100%{ opacity:0 } 50%{ opacity:1 } } @keyframes blink{ 0%,100%{ opacity:0 } 50%{ opacity:1 } } /* End slider main css*/ /* main css start */ 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; }