Image Slider with clip-path animation

Cool slider animation with clip-path. Image slide show animation developed using CSS, HTML and JavaScript. Demo and Download options are available.

HTML Snippet

You might also like

CSS Button Concept for Remove and Success

August 21, 2019

Three Pure different CSS Button effects

September 25, 2019

Easy customizable simple CSS buttons

September 8, 2019

Rounded CSS buttons with mouseover effect

September 8, 2019

Collection of CSS3 animated buttons to spice up your site

September 8, 2019

CSS buttons using unicode symbols

September 20, 2019

 <div class="slider" data-state="0">         <svg id="prev" viewBox='0 0 100 100'>         <circle cx="50" cy="50" r="85" />         <path d="M 65,2 17,50 65,98" />       </svg>       <svg id="next" viewBox='0 0 100 100'>         <circle cx="50" cy="50" r="85" />         <path d="M 35,2 82,50 35,98" />       </svg>          <div class="status">       <div class="stat" data-key="0"></div>       <div class="stat" data-key="1"></div>       <div class="stat" data-key="2"></div>       <div class="stat" data-key="3"></div>       <div class="stat" data-key="4"></div>       <div class="stat" data-key="5"></div>     </div>     <div class="image" data-key="0" >       <img src="https://picsum.photos/1200/1200/?image=111" alt=""/>     </div>     <div class="image" data-key="1">       <img src="https://picsum.photos/1200/1200/?image=112" alt=""/>     </div>     <div class="image" data-key="2">       <img src="https://picsum.photos/1200/1200/?image=116" alt=""/>     </div>     <div class="image" data-key="3">       <img src="https://picsum.photos/1200/1200/?image=125" alt=""/>     </div>     <div class="image" data-key="4" data-active>       <img src="https://picsum.photos/1200/1200/?image=122" alt=""/>     </div>     <div class="image" data-key="5">       <img src="https://picsum.photos/1200/1200/?image=120" alt=""/>     </div>   </div> <div class="dwf">done with fun - @uchardon</div>

CSS Code

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700"); html {    height: 100%;    background: #1A2A3A;     color: #FFF;  } body {   font-family: Roboto, sans-serif;   display:flex;   justify-content:center;   align-items: center; } *, *:before, *:after {   box-sizing: border-box;   position: relative;   transition-property: clip-path, opacity;   transition-duration: 900ms, 300ms;   transition-timing-function: cubic-bezier(.5, 0, .5, 1); } .slider {   position:relative;   display: flex;   width: 100vw;   height: 90vh;   overflow: hidden;   .status {     position: absolute;     bottom: 10px;     left:10px;     display:flex;     .stat {       width:10px;       height:10px;       background-color:transparent;       border-radius:50%;       z-index:11;       margin: 0px 5px;       border: 2px solid #fff;     }     .stat[data-active] {       background-color:#fff;     }   }      img {     object-fit: cover;     object-position: center 80%;     width: 100%;     height: 100%;     display: block;   }   .image {     width: 100%;     margin-right: -100%;     opacity: 0;     display: block;     img {       clip-path: circle(50px at 5vw 50%);      }   }   .image[data-active] {     opacity:1;     img {       clip-path: circle(100vmax at 50% 50%);     }   }   .image[data-active] ~.image {     opacity: 0;     img{       clip-path: circle(50px at 95vw 50%);     }   }   svg {    height: 30px;     position:absolute;     top:50%;     margin-top:-15px;     z-index: 1000;     cursor: pointer;     overflow:visible;     path {       stroke: #666;       stroke-linecap:round;       stroke-width:12px;       fill:transparent;     }     circle {       fill: #fff9;     }     &#next {       right:5vw;      }     &#prev {       left:5vw;     }   } } .dwf {   position:fixed;   bottom:4px;   right:10px;   background-color:#0003;   padding:3px;   border-radius:3px; }

JavaScript Snippet

console.clear(); initslider(); function initslider() {   const elPrevButton = document.querySelector('.slider #prev');   const elNextButton = document.querySelector('.slider #next');    const elImages = Array.from(document.querySelectorAll('.slider .image'));    let state = {     photo: 0   };    function send(event) {      const elActives = document.querySelectorAll('.slider [data-active]');      Array.from(elActives)       .forEach(el => el.removeAttribute('data-active'));      switch (event) {       case 'PREV':         state.photo--;         // Math.max(state.photo - 1, 0);         break;       case 'NEXT':         state.photo++;         // Math.min(state.photo + 1, elImages.length - 1);         break;       default:         state.photo = +event;         break;     }      var len = elImages.length;     // Loop Around     //state.photo = ( ( state.photo % len) + len ) % len;     state.photo = Math.max(0, Math.min( state.photo, len - 1) );      Array.from(document.querySelectorAll(`.slider [data-key="${state.photo}"]`))       .forEach( el => {       el.setAttribute('data-active', true);     });     }   elPrevButton.addEventListener('click', () => {     send('PREV');   });    elNextButton.addEventListener('click', () => {     send('NEXT');   });    const elStatus = Array.from(document.querySelectorAll('.slider .stat'));   elStatus.forEach( stat => {      stat.addEventListener('click', () => {       send(stat.dataset.key);     });   });   send(0); };

Preview