@Alisa94

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

Есть список кнопок, часть которых является скрытыми.

Нужно создать слайд, который при нажатии на кнопку "следующий" переключился на следующую кнопку, а если она скрытая, то показывал эту скрытую кнопку, при переключении на следующую скрытую кнопку предыдущая должна скрыться, а текущая должна появиться.

Во время переключения на скрытые кнопки основные кнопки должны сохранять своё состояние.

HTML

// Cписок с кнопками
<ul>
    <li class="slide visible"><button class="btn"/>Button Visible One</li> 
    <li class="slide visible"><button class="btn"/>Button Visible Two</li> 
    <li class="slide hidden"><button class="btn"/>Button Hidden One</li> 
    <li class="slide hidden"><button class="btn"/>Button Hidden Two</li>
</ul> 

// Кнопки для передвижения 
<button id="previous">Previos</button>  
<button id="next">Next</button>


CSS
.hidden { display: none; } 
.visible { display: block; }
  • Вопрос задан
  • 96 просмотров
Пригласить эксперта
Ответы на вопрос 2
sh3mahan
@sh3mahan
что-то вроде веб-разработчика
Есть несколько вариантов:
Использовать .show() – api.jquery.com/show
Или использовать . toggleClass() – api.jquery.com/toggleclass

Вариант с .toggleClass():
https://codepen.io/sh3mahan/pen/maLajQ
Понажимай на карточки
Ответ написан
Acaweb
@Acaweb
Начинающий Вэб-разработчик
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы