Адаптивный слайдер для веб-сайта

Данный репозиторий содержит код для добавления слайдера изображений с использованием HTML, CSS и JavaScript на веб - сайт.

Посмотреть: Демо

Использование

Склонируйте репозиторий на свой локальный компьютер:

git clone https://github.com/SerGioPlay01/slider_for_website.git

Код слайдера

  <div class="slider-container">
            <div class="slider">
              <img src="/img/image_3.jpg" alt="Image 1" />
              <div class="slider-text">
                <h3>Заголовок слайда 1</h3>
                <p>Описание слайда 1</p>
              </div>
            </div>
            <div class="slider">
              <img src="/img/image_2.jpg" alt="Image 2" />
              <div class="slider-text">
                <h3>Заголовок слайда 2</h3>
                <p>Описание слайда 2</p>
              </div>
            </div>
            <div class="slider">
              <img src="/img/wallpaperflare.com_wallpaper.jpg" alt="Image 3" />
              <div class="slider-text">
                <h3>Заголовок слайда 3</h3>
                <p>Описание слайда 3</p>
              </div>
            </div>
            <div class="slider">
                <img src="/img/image_4.jpg" alt="Image 3" />
                <div class="slider-text">
                  <h3>Заголовок слайда 3</h3>
                  <p>Описание слайда 3</p>
                </div>
              </div>
          <div class="slider-controls">
            <button class="prev-btn" onclick="previousSlide()"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000000" transform="rotate(180)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title></title> <g id="Complete"> <g id="F-Chevron"> <polyline fill="none" id="Right" points="8.5 5 15.5 12 8.5 19" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline> </g> </g> </g></svg></button>
            <button class="next-btn" onclick="nextSlide"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000000" transform="rotate(0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title></title> <g id="Complete"> <g id="F-Chevron"> <polyline fill="none" id="Right" points="8.5 5 15.5 12 8.5 19" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline> </g> </g> </g></svg></button>
          </div>
        </div>

Технологии

Я использовал следующие технологии для разработки проекта:

Примечания

Чтобы добавить несколько слайдеров на одной странице, просто повторите HTML-код для слайдера и настройте каждый из них с помощью JavaScript. Чтобы управлять слайдером вручную, используйте кнопки "Предыдущий" и "Следующий". Слайды автоматически переключаются каждые 35 секунд.

Зависимости

Нет дополнительных зависимостей для этого проекта. Весь код написан с использованием стандартных технологий веб-разработки (HTML, CSS, JavaScript).

Автор

Создано SerGio Play