0

Помогите, пожалуйста, поправить js код работы слайдера. Реализовал логику переключения слайдов. Но она работает только для первой секции. В остальных секциях слайдер не работает. Необходимо, чтобы слайдер работал и на остальных экранах.

В коде секции представлены блоками screen-1 (-2, -3 и т.д., слайдер представлен блоком image-gallary.

При нажатии на превью изображения image-gallary-preview__item соответствующему полноразмерному изображению image-gallary-fullview-item добавляется класс image-gallary-fullview-item_active. Связь превью и полного изображения осуществляется через атрибут data-fullvie на элементе image-gallary-preview__item.

Пробовал поместить логику в цикл forEach, но что-то не работает.

/*
 * Toggle image-gallary
 **/

const imageGallary = document.querySelector('.image-gallary ');
const imageGallaryFullviewItems = imageGallary.querySelectorAll(
  '.image-gallary-fullview-item',
);
const imageGallaryPreviewItems = imageGallary.querySelectorAll(
  '.image-gallary-preview__item',
);

imageGallaryPreviewItems.forEach(previewItem => {
  previewItem.addEventListener('click', handleImageGallaryPreviewItemsClick);
});

function handleImageGallaryPreviewItemsClick() {
  toggleImages.call(this);
}

function toggleImages() {
  // remove image-gallary-fullview-item_active class from all image-gallary-fullview-item
  imageGallaryFullviewItems.forEach(fullviewItem =>
    fullviewItem.classList.remove('image-gallary-fullview-item_active'),
  );
  // find linked fullview image by date-tab attribute and add image-gallary-fullview-item_active class
  imageGallary
    .querySelector('.' + this.dataset.fullview)
    .classList.add('image-gallary-fullview-item_active');
}
.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.screen__image-gallary {
  width: 296px;
}

.image-gallary__fullview {
  margin-bottom: 30px;
}

.image-gallary-fullview-item {
  width: 296px;
  height: 212px;
  border-radius: 7px;
}

.image-gallary-fullview-item {
  display: none;
  background-color: #777;
  box-shadow: 0px 6px 13px 0px #00000099;
}

.image-gallary-fullview-item_active {
  display: block;
}

.image-gallary-fullview-item__image {
  width: 100%;
  height: 212px;
  border-radius: 7px;
  object-fit: cover;
}

.image-gallary__preview {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.image-gallary-preview__item {
  width: 68px;
  height: 49px;
  border-radius: 6px;
  background-color: rgb(170, 45, 81);
  cursor: pointer;
  filter: brightness(0.8) drop-shadow(0 0 0 transparent);
  transition: transform 0.2s linear, filter 0.2s linear;
  &:hover {
    transform: scale(1.05);
    filter: brightness(1) drop-shadow(2px 4px 6px black);
  }
}

.image-gallary-preview__item:hover {
  transform: scale(1.05);
  filter: brightness(1) drop-shadow(2px 4px 6px black);
}

.image-gallary-preview__image {
  width: 100%;
  height: 49px;
  border-radius: 6px;
}
<section class="screen-1" id="location">
  <!-- image-gallary -->
  <div class="image-gallary screen__image-gallary">
    <ul class="image-gallary__fullview image-gallary-fullview list">
      <li class="image-gallary-fullview__item image-gallary-fullview-item image-gallary-fullview-item_1 image-gallary-fullview-item_active">1-fullview</li>

      <li class="image-gallary-fullview__item image-gallary-fullview-item image-gallary-fullview-item_2">2-fullview</li>

      <li class="image-gallary-fullview__item image-gallary-fullview-item image-gallary-fullview-item_3">3-fullview</li>

      <li class="image-gallary-fullview__item image-gallary-fullview-item image-gallary-fullview-item_4">4-fullview</li>
    </ul>

    <!-- image-gallary-preview -->
    <ul class="image-gallary__preview image-gallary-preview list">
      <li class="image-gallary-preview__item" data-fullview="image-gallary-fullview-item_1">1-preview</li>

      <li class="image-gallary-preview__item" data-fullview="image-gallary-fullview-item_2">2-preview</li>

      <li class="image-gallary-preview__item" data-fullview="image-gallary-fullview-item_3">3-preview</li>

      <li class="image-gallary-preview__item" data-fullview="image-gallary-fullview-item_4">4-preview</li>
    </ul>
    <!-- image-gallary-preview -->
  </div>
  <!-- image-gallary end -->
</section>

2 ответа 2

1

var thisElement;
var data;
var removeClass;
document.querySelectorAll('.image-gallary-preview__item').forEach(item => {
  item.addEventListener('click', e => {
    thisElement = e.currentTarget;
    data = e.currentTarget.dataset.fullview;
    removeClass = thisElement.closest('.image-gallary').querySelectorAll('.image-gallary-fullview-item')
    removeClass.forEach(fullviewItem =>
      fullviewItem.classList.remove('image-gallary-fullview-item_active'),
    );
    thisElement.closest('.image-gallary').querySelector('.' + data).classList.add('image-gallary-fullview-item_active');
  });
});
.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.screen__image-gallary {
  width: 296px;
}

.image-gallary__fullview {
  margin-bottom: 30px;
}

.image-gallary-fullview-item {
  width: 296px;
  height: 212px;
  border-radius: 7px;
}

.image-gallary-fullview-item {
  display: none;
  background-color: #777;
  box-shadow: 0px 6px 13px 0px #00000099;
}

.image-gallary-fullview-item_active {
  display: block;
}

.image-gallary-fullview-item__image {
  width: 100%;
  height: 212px;
  border-radius: 7px;
  object-fit: cover;
}

.image-gallary__preview {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.image-gallary-preview__item {
  width: 68px;
  height: 49px;
  border-radius: 6px;
  background-color: rgb(170, 45, 81);
  cursor: pointer;
  filter: brightness(0.8) drop-shadow(0 0 0 transparent);
  transition: transform 0.2s linear, filter 0.2s linear;
  &:hover {
    transform: scale(1.05);
    filter: brightness(1) drop-shadow(2px 4px 6px black);
  }
}

.image-gallary-preview__item:hover {
  transform: scale(1.05);
  filter: brightness(1) drop-shadow(2px 4px 6px black);
}

.image-gallary-preview__image {
  width: 100%;
  height: 49px;
  border-radius: 6px;
}
<section class="screen-1" id="location">
  <!-- image-gallary -->
  <div class="image-gallary screen__image-gallary">
    <ul class="image-gallary__fullview image-gallary-fullview list">
      <li class="image-gallary-fullview__item image-gallary-fullview-item image-gallary-fullview-item_1 image-gallary-fullview-item_active">1-fullview</li>

      <li class="image-gallary-fullview__item image-gallary-fullview-item image-gallary-fullview-item_2">2-fullview</li>

      <li class="image-gallary-fullview__item image-gallary-fullview-item image-gallary-fullview-item_3">3-fullview</li>

      <li class="image-gallary-fullview__item image-gallary-fullview-item image-gallary-fullview-item_4">4-fullview</li>
    </ul>

    <!-- image-gallary-preview -->
    <ul class="image-gallary__preview image-gallary-preview list">
      <li class="image-gallary-preview__item" data-fullview="image-gallary-fullview-item_1">1-preview</li>

      <li class="image-gallary-preview__item" data-fullview="image-gallary-fullview-item_2">2-preview</li>

      <li class="image-gallary-preview__item" data-fullview="image-gallary-fullview-item_3">3-preview</li>

      <li class="image-gallary-preview__item" data-fullview="image-gallary-fullview-item_4">4-preview</li>
    </ul>
    <!-- image-gallary-preview -->
  </div>
  <!-- image-gallary end -->
</section>

<section class="screen-2" id="location2">
  <!-- image-gallary -->
  <div class="image-gallary screen__image-gallary">
    <ul class="image-gallary__fullview image-gallary-fullview list">
      <li class="image-gallary-fullview__item image-gallary-fullview-item image-gallary-fullview-item_1 image-gallary-fullview-item_active">1-fullview</li>

      <li class="image-gallary-fullview__item image-gallary-fullview-item image-gallary-fullview-item_2">2-fullview</li>

      <li class="image-gallary-fullview__item image-gallary-fullview-item image-gallary-fullview-item_3">3-fullview</li>

      <li class="image-gallary-fullview__item image-gallary-fullview-item image-gallary-fullview-item_4">4-fullview</li>
    </ul>

    <!-- image-gallary-preview -->
    <ul class="image-gallary__preview image-gallary-preview list">
      <li class="image-gallary-preview__item" data-fullview="image-gallary-fullview-item_1">1-preview</li>

      <li class="image-gallary-preview__item" data-fullview="image-gallary-fullview-item_2">2-preview</li>

      <li class="image-gallary-preview__item" data-fullview="image-gallary-fullview-item_3">3-preview</li>

      <li class="image-gallary-preview__item" data-fullview="image-gallary-fullview-item_4">4-preview</li>
    </ul>
    <!-- image-gallary-preview -->
  </div>
  <!-- image-gallary end -->
</section>

3
  • Благодарю вас. Все заработало. Но, единственно, я хотел бы разбить кода на части - функции. Разделил кода на части (мне так легче для понимания). У меня удаляется класс active, но не добавляется. ссылка
    – Vik
    28 дек 2019 в 17:10
  • 1
    Так вы не прописали .classlist.add)) Вы закончили ваше действие тем что просто нашли необходимый блок где нужно добавить класс, а то что его необходимо таки добавить как-то упустили) 29 дек 2019 в 18:16
  • Благодарю. Поправил, все заработало. Здесь (код)(codepen.io/monsara/pen/wvBqPxX?editors=0010), который работает на сайте (все отлично), но в codepen тоже самое выдает ошибку в консоли. Я так понимаю, в codepen не читается this. Подскажите почему так происходит?
    – Vik
    2 янв 2020 в 10:00
0

Смотрите

const imageGallary = document.querySelector('.image-gallary ');

Указывает на первый найденный элемент. Чтобы работало как надо нужно обработать все, по очереди.

Например поместить весь js-код в функцию gallery, например:

function gallery(el) {
    const imageGallary = document.querySelector(el);
    ...
}

И дальше создавать по экземпляру, хоть в цикле, хоть руками

let g1 = gallery('.screen-1');
let g2 = gallery('.screen-2');

Пример Тут в консоль выводится инфа, о том, что обрабатывается.

7
  • Покажите, пожалуйста, на этом примере. У меня убирает класс active, но не добавляет его
    – Vik
    28 дек 2019 в 17:00
  • Поместил сюда, но происходит то, что описал const imageGallarys = document.querySelectorAll('.image-gallary'); console.log(imageGallarys); imageGallarys.forEach(gallary => { ... } });
    – Vik
    28 дек 2019 в 17:02
  • Извините. Все получилось. Хочу пройтись циклом. Как мне выбрать все галлереи const gallarys = document.querySelectorAll('[class^="screen-"]'); Не получается
    – Vik
    28 дек 2019 в 17:47
  • Почему не получается с помощью document.querySelectorAll('[class^="screen-"]'); ? Проверил, получает массив элементов
    – p-c
    29 дек 2019 в 7:26
  • 1
    Вы пытаетесь передать элемент в качестве класса для поиска. Надо просто брать элемент. Как вариант jsfiddle.net/Lwqn0vft
    – p-c
    4 янв 2020 в 13:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.