Как скрыть переполнение ползунка только на левой стороне? - PullRequest
Новая
       20

Как скрыть переполнение ползунка только на левой стороне?

0 голосов
/ 11 марта 2020

Я работаю над множественной реализацией слайдера, используя скользкий слайдер , но застрял на этом.

У меня есть этот макет, который должен быть реализован https://share.getcloudapp.com/DOu86494

Однако я не уверен, как я могу скрыть элементы слева при попытке чтобы установить .slick-list {overflow: visible}

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

Вот мой кодовый блок 

$(document).ready(function (){
     $('.story-slider').slick({
            slidesToShow: 2,
            slidesToScroll: 1,
            arrows:false,
            dots:false,
    })
})

ОБНОВЛЕНИЕ:

Я почти там! Я должен установить непрозрачность предыдущего .slick-slide на 0 и установить .slick-active и .slick-active ~ .slick-slide на 1 , но теперь моя проблема в том, когда сброс или когда итерация случается получаю флаг sh всех слайдов. https://share.getcloudapp.com/6quBEkK7

1 Ответ

0 голосов
/ 11 марта 2020

Я попытался добавить «маску», чтобы закрыть переполненный левый контент. 

.slick-list{
  overflow: visible;
  padding:0 20% 0 0;
  position: relative;
  z-index: -1;
}

.slick-list::after {
  content: ' ';
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 4000px;
  right: 100%;
  background-color: white;
}

Ширина маски должна быть достаточно большой, чтобы покрыть остальную часть страницы, 4000px был просто случайным большое число. Кроме того, z-индекс в скользящем списке таков, что маска не покрывает ваш другой контент за пределами ползунка - вместо этого вы также можете добавить положительный z-индекс к своему другому контенту.

Редактировать

Как указано в комментариях, z-index предотвращает функцию ползунка.

Если кто-то действительно хочет, чтобы это решение работало, то вместо этого z-index: -1 на ползунке, один раз можно применить более высокий z-индекс к элементам, которые должны появиться слева. В ручке я добавил класс over-slider в левый столбец, а затем сработало следующее css: 

.over-slider {
  z-index: 2;
}

.slick-list{
  overflow: visible;
  padding:0 20% 0 0;
  position: relative;
}

.slick-list::after {
  content: ' ';
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 4000px;
  right: 100%;
  background-color: white;
}

Мне не очень нравится это решение, потому что его нужно применять по-другому в разных ситуациях. Но если вы не смотрите на другие решения, это может сработать.

...