БЛОГ НА HUSL


Как создать массив с картинками и текстом и загружать их по нажатию на кнопки или на стрелки

Автор вопроса: Андрій Олегович Попович

Есть небольшой слайдер с четырьмя картинками и текстами в двух блоках:

Пример слайдера

Как сделать массив с текстами и картинками, и изменять его, по нажатию на определенный день или же на стрелочки?

.slider {
    display: flex;
    margin-bottom: 300px;
    align-content: space-between;
  }
.check-up-img {
    width: 100%;
  }
.slider-info {
    display: flex;
    flex-direction: column;
  }
.block-day {
    margin-top: 67px;
    align-items: center;
    display: flex;
    justify-content: flex-end;
  }
.Day {
    text-align: center;
    padding: 6px 40px;
  }
.selected {
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;
  text-transform: uppercase;
  color: #ff9933;
}

.day1 {
  border: 2px solid #ff9933;
}
.slider-text {
    float: right;
  }
.slider-description {
    width: 480px;
  }
.arrow {
    color: black;
    margin-top: 175px;
  }
 .arrow-left {
  margin-right: 40px;
}
<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

<body>

<section>
    <div class="section-slider">
        <div class="container-fluid">
            <div class="row">
                <div class="slider ">
                    <div class="slider-pic col-sm-12 col-md-6">
                        <img class="check-up-img" src="http://hikewithblonde.com/wp-content/uploads/2018/09/MG_1145_.jpg" alt=""/>
                    </div>

                    <div class="slider-info col-sm-12 col-md-5">
                        <div class="block-day">
                            <div class="Day selected day1">
                                День
                                <br/>
                                1
                            </div>

                            <div class="Day day2">
                                День
                                <br/>
                                2
                            </div>

                            <div class="Day day3">
                                День
                                <br/>
                                3
                            </div>

                            <div class="Day day4">
                                День
                                <br/>
                                4
                            </div>
                        </div>
                        <div class="slider-text">
                            <h1 class="slider-name">День 1</h1>

                            <p class="slider-description">
                                Прилет (время зависит от выбранного рейса) Трансфер из
                                аэропорта в отель Заселение в отеле на выбор (3, 4, 5 звезд) в
                                Азиатской части Стамбула, район Кадикей (Мода) рядом с
                                набережной Мраморного моря Рекомендуемый маршрут для
                                самостоятельной прогулки и посещения ресторана Связь с
                                организатором в мессенджере
                            </p>
                            <div class="arrow">
                                <img class="arrow-left" src="./assets/img/Arrow-left.svg" alt=""/>
                                <img class="arrow-right" src="./assets/img/Arrow-right.svg" alt=""/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
<link rel="stylesheet" href="">
<script src ="./script/script.js"></script>
</body>

</html>


Источник

Ответы (2 шт):

Автор решения: Trofimov Zhenya

Мне кажется, что самый простой способ - через data-атрибуты:

const changingImage = document.querySelector('#changingImage')
const nextBtn = document.querySelector('#nextBtn')
const prevBtn = document.querySelector('#prevBtn')

const images = ['/img1.jpg', '/img2.jpg']
let currentIndex = 0

const handleChangeImageByIndex = (index) => {
  changingImage.src = images[index]
}

document.querySelectorAll('[data-image-index]').forEach(element => {
  const imageIndex = Number(element.dataset.imageIndex)
  element.addEventListener('click', () => {
    currentIndex = imageIndex
    handleChangeImageByIndex(imageIndex)
  })
})

const handleIncrementIndex = () => {
  currentIndex++
  handleChangeImageByIndex(currentIndex)
}

const handleDecrementIndex = () => {
  currentIndex--
  handleChangeImageByIndex(currentIndex)
}

nextBtn.addEventListener('click', handleIncrementIndex)
prevBtn.addEventListener('click', handleDecrementIndex)
 <img src="/img1.jpg" id="changingImage">
 ...
 <div data-image-index="0">...</div>
 <div data-image-index="1">...</div>
 ...
 <button id="nextBtn">...</button>
 <button id="prevBtn">...</button>

→ Ссылка
Автор решения: soledar10

Пример с использованием bootstrap

.custom-carousel {
  position: realtive;
}

.custom-carousel .carousel-item img {
  height: 100vh;
  object-fit: cover;
}

.custom-carousel .carousel-content {
  padding: 6em 0 2em;
}

.custom-carousel .carousel-indicators {
  top: 0;
  right: 0;
  left: auto;
  bottom: auto;
  width: 50%;
  margin-left: 0;
  margin-right: 0;
  justify-content: flex-start;
  padding: 2em 0;
}

.custom-carousel .carousel-indicators [data-bs-target] {
  background: none;
  text-indent: 0;
  white-space: nowrap;
  width: auto;
  height: auto;
  border: 2px solid transparent;
  padding: .5rem;
}

.custom-carousel .carousel-indicators .active {
  border-color: orange;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div class="custom-carousel">
  <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel" data-bs-interval="false">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1">День 1</button>
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2">День 2</button>
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3">День 3</button>
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 3">День 4</button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <div class="row">
          <div class="col-sm-6">
            <img src="http://hikewithblonde.com/wp-content/uploads/2018/09/MG_1145_.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="col-sm-6">
            <div class="carousel-content">
              <h1 class="carousel-name">День 1</h1>
              <p class="carousel-description">
                Прилет (время зависит от выбранного рейса) Трансфер из аэропорта в отель Заселение в отеле на выбор (3, 4, 5 звезд) в Азиатской части Стамбула, район Кадикей (Мода) рядом с набережной Мраморного моря Рекомендуемый маршрут для самостоятельной прогулки
                и посещения ресторана Связь с организатором в мессенджере
              </p>
            </div>
          </div>
        </div>

      </div>
      <div class="carousel-item">
        <div class="row">
          <div class="col-sm-6">
            <img src="http://hikewithblonde.com/wp-content/uploads/2018/09/MG_1145_.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="col-sm-6">
            <div class="carousel-content">
              <h1 class="carousel-name">День 2</h1>
              <p class="carousel-description">
                Прилет (время зависит от выбранного рейса) Трансфер из аэропорта в отель Заселение в отеле на выбор (3, 4, 5 звезд) в Азиатской части Стамбула, район Кадикей (Мода) рядом с набережной Мраморного моря Рекомендуемый маршрут для самостоятельной прогулки
                и посещения ресторана Связь с организатором в мессенджере
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <div class="row">
          <div class="col-sm-6">
            <img src="http://hikewithblonde.com/wp-content/uploads/2018/09/MG_1145_.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="col-sm-6">
            <div class="carousel-content">
              <h1 class="carousel-name">День 3</h1>
              <p class="carousel-description">
                Прилет (время зависит от выбранного рейса) Трансфер из аэропорта в отель Заселение в отеле на выбор (3, 4, 5 звезд) в Азиатской части Стамбула, район Кадикей (Мода) рядом с набережной Мраморного моря Рекомендуемый маршрут для самостоятельной прогулки
                и посещения ресторана Связь с организатором в мессенджере
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <div class="row">
          <div class="col-sm-6">
            <img src="http://hikewithblonde.com/wp-content/uploads/2018/09/MG_1145_.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="col-sm-6">
            <div class="carousel-content">
              <h1 class="carousel-name">День 4</h1>
              <p class="carousel-description">
                Прилет (время зависит от выбранного рейса) Трансфер из аэропорта в отель Заселение в отеле на выбор (3, 4, 5 звезд) в Азиатской части Стамбула, район Кадикей (Мода) рядом с набережной Мраморного моря Рекомендуемый маршрут для самостоятельной прогулки
                и посещения ресторана Связь с организатором в мессенджере
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>

</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.