Слайдер со слайдами в форме трапеции

Question

Нужно сверстать слайдер, где в центре будет большой слайд в форме трапеции, сужающийся вниз, а по бокам слайды поменьше, сужающиеся вверх. Пробовал делать через перспективу, но как только элементов слайдера становится больше одного, оно ломается и отказывается жить. Если кто-то уже делал что-то подобное, поделитесь опытом.

Answer 1

Пойду повешусь. А перед этим поделюсь вариантом ответа. Его придётся подстраивать под нужное разрешение каждый раз, а так же я сильно сомневаюсь, что тут реально сделать классический слайд. Скорее придётся просто менять url картинкам. У меня всё.

.head-slider {
  height: 360px;
  width: 100%;
  margin: 0 auto;
}

.head-slider__back {
  height: 100%;
  /* overflow: hidden;
  margin-left: -282px; */
}

.head-slider__slider {
  display: flex;
  -webkit-perspective-origin: center top;
  -webkit-perspective: 228.50368107873834;
  width: 930px;
  height: 360px;
}

.head-slider__slider-img {
  height: 300px;
  width: 310px;
  -webkit-transform: rotateX(-4deg);
  -webkit-transform-origin: center top;
  margin-top: 22px;
}

.head-slider__slider-img-main {
  height: 100%;
  width: 300px;
  -webkit-transform: rotateX(-4deg);
  -webkit-transform-origin: center top;
  margin: 0 10px;
}

<div class="head-slider">
  <div class="head-slider__back">
    <div class="head-slider__slider">
      <img src="https://vkrym.su/Images/Get/638" alt="#" class="head-slider__slider-img">
      <img src="https://vkrym.su/Images/Get/638" alt="#" class="head-slider__slider-img-main">
      <img src="https://vkrym.su/Images/Get/638" alt="#" class="head-slider__slider-img">
    </div>
  </div>
</div>

Answer 2

Обрезать видимую часть элементов можно с помощью 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>

БЛОГ НА HUSL

Слайдер со слайдами в форме трапеции

Ответы (2 шт):