В течение последних полутора лет я задавался вопросом, как создать карусель и модальное окно без использования библиотеки, а создать его с нуля. Сегодня мне удалось создать его самостоятельно.
Структура файла проекта
Структура файла показана выше. Папка с изображениями будет содержать все изображения, которые будут добавлены в карусели, index.html для редактирования HTML, styles.css для стилей и index.js для сценариев JavaScript.
Связывание Index.js и Styles.css
Первый шаг — связать ваш файл JavaScript и файл CSS с HTML.
Добавление вашего HTML-кода.
Основной раздел содержит изображение и эскизы изображений. Миниатюры изображений кликабельны и активируют модальное окно.
В модальном окне есть две кнопки: кнопка «Далее» и кнопка «Предыдущий» для навигации по изображениям.
Это весь необходимый HTML 🤪.
Стилизация нашего HTML
Есть весь необходимый для проекта CSS. 😺
Добавление кода JavaScript.
Как вы знаете, JavaScript — это самое интересное.😃
После нескольких часов кодирования и отладки мне наконец удалось написать работающий JavaScript 😂😂.
Код Пояснение
Я установил скрытую модальную видимость, чтобы она не была видна на странице, и создал еще один класс с именем visible, который добавляется к модальному модальному модулю при нажатии миниатюры, делающей его видимым. И видимый класс удаляется, когда нажимается модальная кнопка закрытия, что делает его снова скрытым.
Мне также удалось погуглить и отцентрировать модальный div 😂 так, чтобы он был в центре страницы.
Кнопки «Следующая» и «Предыдущая» вращаются, когда кнопка «Следующая» нажимается до последнего изображения, она снова возвращается к первому изображению, как и предыдущая кнопка, когда достигается первое изображение, она возвращается к последнему изображению.
Вот как будет выглядеть последняя страница.
Ура 🎉🎉 Вам удалось самостоятельно создать простую модальную карусель.
Удачного кодирования 🥳🥳
