Простой горизонтальный слайдер блоков на CSS3 и Javascript
Достаточно простой, но интересный горизонтальный слайдер
Для начала посмотрите ДЕМО
1#: В самый низ вашего CSS вставьте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
.carousel {position: relative;} .carousel::after { content: ""; position: absolute; left: 0; top: 0; box-shadow: inset 0px 0px 120px 30px rgba(0,0,0,0.35); width: 100%; height: 100%; pointer-events: none; } .carousel ul { overflow: auto; display: flex; height: 500px; max-height: 500px; scroll-snap-type: x mandatory; scroll-snap-points-y: repeat(100%); scroll-snap-align: left; scroll-behavior: smooth; background: gray; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .carousel ul::-webkit-scrollbar {display: none; /* Hide scrollbar for Chrome, Safari and Opera */} .carousel ul li { width: 100%; min-width: 100%; list-style: none; scroll-snap-align: start; display: flex; justify-content: center; align-items: center; color: black; font-weight: bold; font-size: 25px; text-align: center; margin-right: calc(-100% + 300px); transition: transform 0.2s linear; opacity: 0.3; line-height: 1; position: relative; bottom: 15px; } .carousel ul li.selected {opacity: 1; z-index: 9;} .carousel ul li.selected > div {transform: scale(1.6);} .carousel ul li > div { z-index: 9; margin: 0 auto; max-width: 170px; background: white; transition: all 0.2s linear; transform: scale(0.95); padding: 20px 15px; } .carousel ul li > div > div { background: url(/img/pexels-photo-730896.jpeg) center center / cover no-repeat; height: 110px; margin-bottom: 15px; margin: -20px -15px 15px; } .carousel ul li div a {color: white; display: inline-block; background: white; color: white; padding: 8px 15px; font-size: 13px; text-decoration: none; border-radius: 4px; margin-top: 17px; background: black;} .carousel ol {position: absolute; bottom: 15px; display: flex; justify-content: center; left: 50%; transform: translateX(-50%); z-index: 9;} .carousel ol li {list-style: none; padding: 0 5px;} .carousel ol li a {display: block; height: 10px; width: 10px; border: 2px solid white; background: transparent; border-radius: 100%;} .carousel ol li.selected a {background: white;} .carousel .prev, .carousel .next {user-select:none; cursor: pointer; font-size: 50px; color: white; position: absolute; left: 0; padding: 15px; top: 50%; transform: translateY(-50%); z-index: 9;} .carousel .next {left: auto; right: 0;} /* RESPONSIVE CSS */ @media only screen and (max-width: 600px) { .carousel ul li div {display: none;} } /* DEMO CSS */ .carousel ul li:nth-child(2) > div > div, .carousel ul li:nth-child(6) > div > div {background-image: url(/img/pexels-photo-1056251.jpeg);} .carousel ul li:nth-child(3) > div > div, .carousel ul li:nth-child(7) > div > div {background-image: url(/img/pexels-photo-4492170.jpeg);} .carousel ul li:nth-child(4) > div > div, .carousel ul li:nth-child(8) > div > div {background-image: url(/img/pexels-photo-2558605.jpeg);} |
2#: Следующий код поместите после открывающего тега <body>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 |
<div class="carousel" duration="7000"> <ul tabindex="0"> <li id="c1_slide1" class="selected"><div><div></div>Клёвый котик 1<br /><a href="#">Погладь меня</a></div></li> <li id="c1_slide2"><div><div></div>Клёвый котик 2<br /><a href="#">Погладь меня</a></div></li> <li id="c1_slide3"><div><div></div>Клёвый котик 3<br /><a href="#">Погладь меня</a></div></li> <li id="c1_slide4"><div><div></div>Клёвый котик 4<br /><a href="#">Погладь меня</a></div></li> <li id="c1_slide5"><div><div></div>Клёвый котик 5<br /><a href="#">Погладь меня</a></div></li> <li id="c1_slide6"><div><div></div>Клёвый котик 6<br /><a href="#">Погладь меня</a></div></li> <li id="c1_slide7"><div><div></div>Клёвый котик 7<br /><a href="#">Погладь меня</a></div></li> <li id="c1_slide8"><div><div></div>Клёвый котик 8<br /><a href="#">Погладь меня</a></div></li> </ul> <ol> <li class="selected"><a href="#c1_slide1"></a></li> <li><a href="#c1_slide2"></a></li> <li><a href="#c1_slide3"></a></li> <li><a href="#c1_slide4"></a></li> <li><a href="#c1_slide5"></a></li> <li><a href="#c1_slide6"></a></li> <li><a href="#c1_slide7"></a></li> <li><a href="#c1_slide8"></a></li> </ol> <div class="prev">‹</div> <div class="next">›</div> </div> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function() { const carousels = document.querySelectorAll('.carousel'); carousels.forEach(function( carousel ) { const ele = carousel.querySelector('ul'); const amountvisible = Math.round(ele.offsetWidth/ele.querySelector('li:nth-child(1)').offsetWidth); const bullets = carousel.querySelectorAll('ol li'); const slides = carousel.querySelectorAll('ul li'); const nextarrow = carousel.querySelector('.next'); const prevarrow = carousel.querySelector('.prev'); // Initialize the carousel nextarrow.style.display = 'block'; prevarrow.style.display = 'block'; ele.scrollLeft = 0; bullets[0].classList.add('selected'); slides[0].classList.add('selected'); if(amountvisible>1) { var removeels = carousel.querySelectorAll('ol li:nth-last-child(-n + '+(amountvisible-1)+')'); removeels.forEach(function(removeel) { removeel.remove(); }); } const setSelected = function() { bullets.forEach(function(bullet) { bullet.classList.remove('selected'); }); slides.forEach(function(slide) { slide.classList.remove('selected'); }); const scrolllength = carousel.querySelector('ul li:nth-child(2)').offsetLeft - carousel.querySelector('ul li:nth-child(1)').offsetLeft; const nthchild = (Math.round((ele.scrollLeft/scrolllength)+1)); carousel.querySelector('ol li:nth-child('+nthchild+')').classList.add('selected'); carousel.querySelector('ul li:nth-child('+nthchild+')').classList.add('selected'); if(carousel.parentElement.parentElement.querySelector('.dynamictitle')) { const title = carousel.querySelector('ul li:nth-child('+nthchild+') img').getAttribute('title'); if(title) carousel.parentElement.parentElement.querySelector('.dynamictitle').innerHTML = title; } } const scrollTo = function(event) { event.preventDefault(); ele.scrollLeft = ele.querySelector(this.getAttribute('href')).offsetLeft; } const nextSlide = function() { if(!carousel.querySelector('ol li:last-child').classList.contains('selected')) { carousel.querySelector('ol li.selected').nextElementSibling.querySelector('a').click(); } else { carousel.querySelector('ol li:first-child a').click(); } } const prevSlide = function() { if(!carousel.querySelector('ol li:first-child').classList.contains('selected')) { carousel.querySelector('ol li.selected').previousElementSibling.querySelector('a').click(); } else { carousel.querySelector('ol li:last-child a').click(); } } const setInteracted = function() { ele.classList.add('interacted'); } // Attach the handlers ele.addEventListener("scroll", debounce(setSelected)); ele.addEventListener("touchstart", setInteracted); ele.addEventListener('keydown', function (e){ if(e.key == 'ArrowLeft') ele.classList.add('interacted'); if(e.key == 'ArrowRight') ele.classList.add('interacted'); }); nextarrow.addEventListener("click", nextSlide); nextarrow.addEventListener("mousedown", setInteracted); nextarrow.addEventListener("touchstart", setInteracted); prevarrow.addEventListener("click", prevSlide); prevarrow.addEventListener("mousedown", setInteracted); prevarrow.addEventListener("touchstart", setInteracted); bullets.forEach(function(bullet) { bullet.querySelector('a').addEventListener('click', scrollTo); bullet.addEventListener("mousedown", setInteracted); bullet.addEventListener("touchstart", setInteracted); }); //setInterval for autoplay if(carousel.getAttribute('duration')) { setInterval(function(){ if (ele != document.querySelector(".carousel:hover ul") && ele.classList.contains('interacted')==false) { nextarrow.click(); } }, carousel.getAttribute('duration')); } }); //end foreach }); //end onload /** * Debounce functions for better performance * (c) 2021 Chris Ferdinandi, MIT License, https://gomakethings.com * @param {Function} fn The function to debounce */ function debounce (fn) { // Setup a timer let timeout; // Return a function to run debounced return function () { // Setup the arguments let context = this; let args = arguments; // If there's a timer, cancel it if (timeout) { window.cancelAnimationFrame(timeout); } // Setup the new requestAnimationFrame() timeout = window.requestAnimationFrame(function () { fn.apply(context, args); }); }; } </script> |
