Можно ли реализовать такой слайдер при переходе на мобильное разрешение с помощью CSS?

Question

[alexeeey_kuznetsov]

Необходимо реализовать при переходе точки разрешения экрана от 3 блоков в один с возможностью пролистать пальцем каждый слайд.

https://codepen.io/alexeeey_kuznetsov/pen/XyepKb/
Но по ссылке в codepen я сам ещё не знаю как проверить изменение на странице при разных viewport, кроме как f12-toggle device toolbar, которая в данном случае не отражает реальной ситуации.
Изображения внутри блоков резиновые и при достижении breakpointa в 940 px, должны перестроится в слайдер с одним изображением, находящймся по центру контейнера с возможностью перелистывания. В конечном итоге(320px-viewport) изображение должно придти к указанному на картинке разрешению 280 на 120 и занимать 100% ширины контейнера.
Есть ли возможность сделать это с помощью CSS, но именно с возможностью перелистывания touch.
И как минимальным количеством кода реализовать это в jquery.
В приоритете стоит css, но если возможности нет, то jquery должен помочь. Данный слайдер является чуть ли не самым простым впринципе, с базовыми элементами управления, но не могу найти реализацию.
Заранее спасибо за помощь!

Answer 1

[profesor08]

Можно сделать слайдет, но без свайпа. Тебе понадобится кружкам задать ссылку с хешем, а активному слайду задать стили для :target и задать id. Каждый id соответствует хешу ссылки кружочка. Тем самым при клике на ссылку, в адрес страницы добавиться хеш из ссылки, элемент, у которого id такой-же как хеш в адресе страницы, будет задано состояние :target. Так и манипулируй слайдами, у которых не активно это состояние, те скрывай.

Если же хочешь использовать и свайпы, то тебе придется подключить какой-то слайдер на js, гуглится за 3 секунды.

Comments

[alexeeey_kuznetsov]

Про этот метод без свайпа читал, но интересна была именно возможность свайпа.
Может с помощью выстраивания вряд и скрытия содержимого, только с использование touch элементов.

[profesor08]

Ты можешь просто выстроить элементы в ряд и задать контейнеру overflow-y: scroll, тогда сможешь прокручивать горизонтально.

Answer 2

[Lord_Dantes]

Подключаешь owl.carousel.
Задаешь при обычной, не листать, не дергать его вообщем.
При responsive, задаешь что нада отображать один элемент и показываешь точки.

Comments

[alexeeey_kuznetsov]

Желательно минимальное подключение сторонних файлов. Чистый js, jquery слайдер.
P.S. Но спасибо, идея правильная

[Lord_Dantes]

alexeeey_kuznetsov, как вы представляете 10-20 строчок слайдера, чтобы было так и так, а еще . . .
Типо это невозможно с точки зрения написаний функций, вам нужна библиотека в которой будет то что вам надо.

[alexeeey_kuznetsov]

Django Man, не 10-20 конечно же, но всё написано вручную, логика перелистывания, построение слайдов вообщем - такие моменты.
Но в данный момент отпала такая надобность, и я воспользовался вашим советом. Спасибо!
Не подскажите адаптивные табы какие подойдут лучше к этой карусели?
Читал, что зачастую конфликтуют табы с этой каруселью.

[Lord_Dantes]

alexeeey_kuznetsov, ну во-первых нужно отметить правильно решение))
А во-вторых, не знаю не сталкивался с такой проблемой))
Всего доброго.