Cool slider animation with clip-path. Image slide show animation developed using CSS, HTML and JavaScript. Demo and Download options are available.
HTML Snippet
<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
