Как перестроить лист блоков в карусель(слайдер)?

Question

[vladHD]

Всем привет, собственно вопрос, имеется похожая структура сайдбара: https://jsfiddle.net/je8ranrv
Суть вопроса- как перестроить эту структуру, чтобы получить карусельку с горизонтальным скролом( по 3 слайда) на мобильных устройствах( начиная с 768пх и меньше), а на десктопе обратно получается сайдбар .
На ум приходит только сделать в html эту карусель, скрыть ее до 768пх, потом на 768 ей дисплей блок, а сайдбар скрыть.
Подскажите пожалуйста, Может есть какие-то готовые решения. которые при определенном разрешении трансформируются в каруселью

Answer 1

[Александр Антонов]

У jCarousel sorgalla.com/jcarousel похожая структура карусели, если хочется готовое решение можно попробовать применять этот плагин с нужной вам ширины.

Или если делать вручную, приблизительно делать следующее:
1) Родителю( ul ) давай совокупную ширину всех прямых потомков( li )
2) Потомкам float: left
3) ul запихнуть во div.wrapper{ width: 100%, overflow: hidden }, и ul задать position: relative
4) Чтобы скролить такую карусель нужно ul прописывать left:( ( 3 * "ширину li" ) * "текущий кадр" ) * -1