Embed Test Code May 27th, 2020 by admin Posted in Uncategorized | No Comments <br /> <html><br /> <head></p> <style> body {<br /> margin: 0;<br /> padding: 0;<br /> }</p> <p> #slider {<br /> position: relative;<br /> height: 100vw;<br /> width: 100vw;<br /> overflow: hidden;<br /> }</p> <p> .slide {<br /> position: absolute;<br /> z-index: 500;<br /> }</p> <p> .slide img {<br /> object-fit: cover;<br /> width: 100%;<br /> pointer-events: none;<br /> }</p> <p> .active {<br /> z-index: 1000;<br /> }</p> <p> .slideInLeft {<br /> animation-name: animateInLeft;<br /> z-index: 1000;<br /> }</p> <p> .slideInRight {<br /> animation-name: animateInRight;<br /> z-index: 1000;<br /> }</p> <p> .slideOutLeft {<br /> transform: translateX(-99%);<br /> }</p> <p> .slideOutRight {<br /> transform: translateX(99%);<br /> }</p> <p> @keyframes animateInLeft {<br /> 0% {<br /> transform: translateX(-100%);<br /> }<br /> 100% {<br /> transform: translateX(0%);<br /> }<br /> }</p> <p> @keyframes animateInRight {<br /> 0% {<br /> transform: translateX(100%);<br /> }<br /> 100% {<br /> transform: translateX(0%);<br /> }<br /> }</p> <p> .buttons {<br /> position: absolute;<br /> display: flex;<br /> justify-content: space-between;<br /> align-items: center;<br /> width: 100%;<br /> height: 100%;<br /> z-index: 20000;<br /> }</p> <p> .slider-back-btn,<br /> .slider-next-btn {<br /> width: 50px;<br /> height: 50px;<br /> }</p> <p> .slider-back-btn:hover,<br /> .slider-next-btn:hover {<br /> cursor: pointer;<br /> }<br /> </style> <p> </p> <p> </p> <p></head> <body></body></p> <div id="slider"> <div class="slides"></div> <div class="buttons"> <div class="slider-back-btn"> <img src="https://storage.googleapis.com/staging.assets.stagger.it/left-arrow-embed.svg" alt="left" /></div> <div class="slider-next-btn"> <img src="https://storage.googleapis.com/staging.assets.stagger.it/right-arrow-embed.svg" alt="right" /></div> </div> </div> <p><script type='text/javascript'> const SLIDETIME = 500;</p> <p> const backButton = document.querySelector('.slider-back-btn'); const forwardButton = document.querySelector('.slider-next-btn'); let clickable = true; let active = null; let newActive = null;</p> <p> const list = document.querySelector('.slides'); const listItems = ["https://storage.googleapis.com/staging.assets.stagger.it/New_Stagger_1_1_1590583658382.jpeg","https://storage.googleapis.com/staging.assets.stagger.it/New_Stagger_1_2_1590583659976.jpeg"].map( (element, index) => `</p> </p> <div class="slide${index === 0 ? ' active' : ''}"> <img src="${element}" /> </div> </p> <p>`, ); list.innerHTML = listItems.join('');</p> <p> const allSlides = [...document.querySelectorAll('.slide')];</p> <p> function initSlider() { allSlides.forEach(slide => slide.setAttribute( 'style', `transition: transform ${SLIDETIME}ms ease; animation-duration: ${SLIDETIME}ms`, )); }</p> <p> function changeSlide(forward) { if (clickable) { clickable = false; active = document.querySelector('.active'); const activeSlideIndex = allSlides.indexOf(active);</p> <p> if (forward) { if (activeSlideIndex + 1 < allSlides.length) { newActive = allSlides[(activeSlideIndex + 1) % allSlides.length]; active.classList.add('slideOutLeft'); newActive.classList.add('slideInRight', 'active'); } else { clickable = true; } } else if (activeSlideIndex > 0) { newActive = allSlides[ (activeSlideIndex - 1 + allSlides.length) % allSlides.length ]; active.classList.add('slideOutRight'); newActive.classList.add('slideInLeft', 'active'); } else { clickable = true; } } }</p> <p> allSlides.forEach(slide => { slide.addEventListener('transitionend', e => { if (slide === active && !clickable) { clickable = true; active.className = 'slide'; } }); });</p> <p> forwardButton.addEventListener('click', () => { changeSlide(true); }); backButton.addEventListener('click', () => { changeSlide(false); });</p> <p> initSlider(); </script></p> <p></html><br />