Как сделать переключение между модальными окнами изнутри окон?

Question

[Hishmen]

Задача сделать переключение между модальными окнами.
Пример того как нужно:
Нажимаешь на картинку --> открывается модальное окно bootstrap или другое.
В этом окне информация и внизу окна 2 кнопки вперёд и назад.
При нажатии на кнопку вперёд, должно закрыться первое окно и открыться второе.
При нажатии на кнопку назад, должно закрыться второе окно и открыться первое.
При нажатии на кнопку вперёд, должно закрыться второе окно и открыться третье.
И т.д
Количество окон постоянно растёт, будет около 50 - 100 окон.

По переключению желательно чтобы как lightbox с картинками менялся, я про то чтобы небыло дёргания и человек не видел как закрывается одно и открывается другое.
Нужно чтобы красиво менялся контент.

Несколько дней уже парюсь, нечего не выходит(
Подскажите пожалуйста, буду очень благодарен)

Comments

[Ankhena]

Зачем несколько окон? Почему нельзя переключать контент в одном, как у лайтбокса или фанси или просто любой слайдер?

[Hishmen]

Ankhena,
Делается страничка с резюме.
На странице картинки, при нажатии на них всплывает окно.
При нажатии на кнопку в окне должно переключится на следующее.
Так что нужно как отдельно, если при переключении контента можно сделать чтобы при нажатии на 2ю картинку открылся 2й контент и т.д
Как сделать чтобы переключать контент в одном?
И подойдет ли в моём случае?

[Andrew]

Hishmen, слайдером, например, внутри PopUp. И все ваши кнопки сводятся к dots'ам слайдера.

[Сергей delphinpro]

Hishmen, У модального окна есть события. По событию shown.bs.modal вы просто генерите внутри его слайдер с кнопками туда-сюда из всех картинок. По событию hidden.bs.modal дестроите этот слайдер.
У вас будет всего лишь одно модальное окно.

Если всё еще непонятно, маякните, сделаю примерчик =)

Answer 1

[VaaL2004]

Одно модальное окно, внутри bootstrap'опвские табы. Кнопки переключают класс active у .tab-pane
Чтобы как у лайтбокса было, добавьте класс fade

Например как-то так:
https://jsfiddle.net/VaaL2004/p3wt5mun/3/

Comments

[Hishmen]

Можете пример кода написать или дать ссылку на подробную информацию?

[VaaL2004]

Hishmen, отредактировал ответ, дал ссылку на пример.

[Hishmen]

VaaL2004, Прикольно, но есть одно но.
Не работает как надо(
Окно открывается, видно меню которое должно быть скрыто.
Контента нет пока не нажмёшь.
Нажимаешь вперёд переключает только до второй.
Назад не переключает.

[VaaL2004]

Hishmen,


У меня вот так отображается.
Меню скрыто (у него класс d-none)

<ul class="nav nav-tabs d-none" id="myTab" role="tablist">

Контент сразу появляется, кнопки работают как надо.