Slider with slides in the form of traction
-
We need to overthrow a slider where there's a big slide down in the center, and smaller slides on the side. I've tried to make it through the future, but as soon as the slider elements become more than one, it breaks and refuses to live. If someone's already done something like that, share your experience.
-
The visible part of the components may be cut by means https://developer.mozilla.org/ru/docs/Web/CSS/clip-path
const gallery = document.querySelector('#paginated_gallery'); const gallery_scroller = gallery.querySelector('.gallery_scroller'); const gallery_item_size = gallery_scroller.querySelector('div').clientWidth;gallery.querySelector('.btn.next').addEventListener('click', scrollToNextPage);
gallery.querySelector('.btn.prev').addEventListener('click', scrollToPrevPage);function scrollToNextPage() {
gallery_scroller.scrollBy(gallery_item_size, 0);
}
function scrollToPrevPage() {
gallery_scroller.scrollBy(-gallery_item_size, 0);
}gallery_scroller.onscroll = (event) => {
let found = false;
gallery_scroller.querySelectorAll('div')
.forEach(div=>{
if(!found && div.getBoundingClientRect().left > 0){
found = true;
div.classList.add('active');
return;
}
div.classList.remove('active');
});
}html, body {
padding: 0;
position: absolute;
left: 0;
right: 0;
overflow: hidden;
font-size: 20px;
}.gallery {
position: relative;
max-width: 800px;
padding: 0 10;
}.gallery_scroller {
/* snap mandatory on horizontal axis */
scroll-snap-type: x mandatory;overflow-x: scroll;
overflow-y: hidden;display: flex;
align-items: center;height: 200px;
/* Enable Safari touch scrolling physics which is needed for scroll snap */
-webkit-overflow-scrolling: touch;
}.gallery_scroller div {
/* snap align center */
scroll-snap-align: center;
margin: 10px;
position: relative;
}.gallery_scroller img {
border-radius: 10px;
}.gallery_scroller div.colored_card {
min-width: 75%;
min-height: 95%;
border-radius: 10px;
}.gallery .btn {
position: absolute;top: 50%;
transform: translateY(-50%);height: 30px;
width: 30px;border-radius: 2px;
background-color: rgba(0,0,0,0.5);
background-position: 50% 50%;
background-repeat: no-repeat;z-index: 1;
}.gallery .btn.next {
background-image: url('data:image/svg+xml;charset=utf-8,<svg width="18" height="18" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg"><title>Shape</title><path d="M25.557 14.7L13.818 2.961 16.8 0l16.8 16.8-16.8 16.8-2.961-2.961L25.557 18.9H0v-4.2z" fill="%23FFF" fill-rule="evenodd"/></svg>');
right: 10px;
}.gallery .btn.prev {
background-image: url('data:image/svg+xml;charset=utf-8,<svg width="18" height="18" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg"><title>Shape</title><path d="M33.6 14.7H8.043L19.782 2.961 16.8 0 0 16.8l16.8 16.8 2.961-2.961L8.043 18.9H33.6z" fill="%23FFF" fill-rule="evenodd"/></svg>');
left: 10px;
}.gallery_scroller > div.colored_card:nth-of-type(1) { background-color: #e8eaf6; }
.gallery_scroller > div.colored_card:nth-of-type(2) { background-color: #c5cae9; }
.gallery_scroller > div.colored_card:nth-of-type(3) { background-color: #9fa8da; }
.gallery_scroller > div.colored_card:nth-of-type(4) { background-color: #7986cb; }
.gallery_scroller > div.colored_card:nth-of-type(5) { background-color: #5c6bc0; }
.gallery_scroller > div.colored_card:nth-of-type(6) { background-color: #3f51b5; }
.gallery_scroller > div.colored_card:nth-of-type(7) { background-color: #3949ab; }
.gallery_scroller > div.colored_card:nth-of-type(8) { background-color: #303f9f; }
.gallery_scroller > div.colored_card:nth-of-type(9) { background-color: #283593; }
.gallery_scroller > div.colored_card:nth-of-type(10) { background-color: #1a237e; }.gallery_scroller > div.colored_card {
font-size: 5rem;
display: flex;
justify-content: center;
align-items: center;
clip-path: polygon( 10% 0, 90% 0, 100% 100%, 0 100%);
}.gallery_scroller > div.colored_card.active{
clip-path: polygon( 0 0, 100% 0, 90% 100%, 10% 100%);
}.gallery_scroller::-webkit-scrollbar {
display: none;
}<div id="paginated_gallery" class="gallery">
<div class="gallery_scroller">
<div class="colored_card active">1</div>
<div class="colored_card">2</div>
<div class="colored_card">3</div>
<div class="colored_card">4</div>
<div class="colored_card">5</div>
<div class="colored_card">6</div>
<div class="colored_card">7</div>
<div class="colored_card">8</div>
<div class="colored_card">9</div>
<div class="colored_card">10</div>
</div>
<span class="btn prev"></span>
<span class="btn next"></span>
</div>
