Як отримати ефект нижче, використовуючи js jquery або будь-який інший плагін? - jquery, css, twitter-bootstrap, jquery-ui, uislider

Примітка: Переглянути зображення

Що я хочу, це те, що на звичайному робочому століdivs (містять зображення та абзац), всі вони повинні відображатися, але на мобільному сайті я хочу горизонтальний слайдер з swipe і тільки один div для відображення одночасно і ковзає.

Я використовую bootstrap jquery і готовий до використання будь-якого іншого reqd плагіна.

Як досягти цього ефекту

Відповіді:

Я зробив щось подібне. На сайті для мобільних пристроїв ви встановлюєте всі, за винятком того, який потрібно показати на завантаженні сторінки

display:none;

Потім в Jquery / JS ви в основному повинні перемикатисяінші диви. Тому, коли ваша кнопка натиснута, Jquery приховує всі інші divs, якщо вони вже видно, а потім "перемикає" (робить видимим) той, на який вони натиснули.

Цей фрагмент можна використовувати для кожного кроку / кнопки, на яку потрібно натиснути:

Як це працює, якщо натиснути кнопку для Div2, він приховує div1 або div3, якщо вони видно. Потім вона відкриває Div2.

  $("#Button_Div2").click(function(){
$(".Div1:visible").toggle("slide");
$(".Div3:visible").toggle("slide");

$(".Div2:hidden").toggle("slide");
});