Почему при листании слайдера открывается модальное окно?

Question

[Андрей Иванов]

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

skrinshoter.ru/v/310818/RxGBHLuR?a

Код слайдера

<div class="project-wrapper-carousel">
    <div class="carousel-project" data-project-img="img/poject-full/project-1-full.jpg">
      <img src="img/project-preview/project-preview-1.png" alt="">
    </div>
    <!-- /.carousel-project -->
    <div class="carousel-project" data-project-img="img/poject-full/project-2-full.jpg">
      <img src="img/project-preview/project-preview-2.png" alt="">
    </div>
    <!-- /.carousel-project -->
    <div class="carousel-project" data-project-img="img/poject-full/project-3-full.jpg">
      <img src="img/project-preview/project-preview-3.png" alt="">
    </div>
    <!-- /.carousel-project -->
    <div class="carousel-project" data-project-img="img/poject-full/project-4-full.jpg">
      <img src="img/project-preview/project-preview-4.png" alt="">
  </div>
    <!-- /.carousel-project -->
    <div class="carousel-project" data-project-img="img/poject-full/project-5-full.jpg">
      <img src="img/project-preview/project-preview-5.png" alt="">
  </div>
    <!-- /.carousel-project -->
    <div class="carousel-project" data-project-img="img/poject-full/project-6-full.jpg">
      <img src="img/project-preview/project-preview-6.png" alt="">
  </div>
    <!-- /.carousel-project -->
    <div class="carousel-project" data-project-img="img/poject-full/project-7-full.jpg">
      <img src="img/project-preview/project-preview-7.png" alt="">
  </div>
    <!-- /.carousel-project -->
    <div class="carousel-project" data-project-img="img/poject-full/project-8-full.jpg">
      <img src="img/project-preview/project-preview-8.png" alt="">
  </div>
    <!-- /.carousel-project -->
    <div class="carousel-project" data-project-img="img/poject-full/project-9-full.jpg">
      <img src="img/project-preview/project-preview-9.png" alt="">
  </div>
    <!-- /.carousel-project -->
    <div class="carousel-project" data-project-img="img/poject-full/project-10-full.jpg">
      <img src="img/project-preview/project-preview-10.png" alt="">
    </div>
    <!-- /.carousel-project -->
    <div class="carousel-project" data-project-img="img/poject-full/project-11-full.jpg">
      <img src="img/project-preview/project-preview-11.png" alt="">
  </div>
    <!-- /.carousel-project -->
    <div class="carousel-project" data-project-img="img/poject-full/project-12-full.jpg">
      <img src="img/project-preview/project-preview-12.png" alt="">
  </div>
    <!-- /.carousel-project -->
    <div class="carousel-project" data-project-img="img/poject-full/project-13-full.jpg">
      <img src="img/project-preview/project-preview-13.png" alt="">
  </div>
    <!-- /.carousel-project -->
    <div class="carousel-project" data-project-img="img/poject-full/project-14-full.jpg">
      <img src="img/project-preview/project-preview-14.png" alt="">
  </div>
    <!-- /.carousel-project -->
  </div>
  <!-- /.project-wrapper -->

//КРУСЕЛЬ В ФУТЕРЕ
  $('.project-wrapper-carousel').slick({
    infinite: true,
    autoplay: true,
    arrows: false,
    speed: 1000,
    autoplaySpeed: 1500,
    slidesToShow: 5
  });

Модальное окно

<div class="modal-project">
        <img src="img/logo.png" alt="" class="modal-project__logo">
  <span class="modal-project__prev">&#8743; предыдущий проект &#8743;</span>
  <span class="modal-project__next">&#8744; следуюущий проект &#8744;</span>
  <span class="modal-project__close">&#10005;</span>

  <div class="project-item">
    <img src="#" alt="#">
    <h3 class="modal-project__title">Вы можете оставить заявку на разработку дизайна</h3>
    <a href="#" class="btn btn__modal-project">Хочу дизайн</a>
  </div>
</div>

Js modal

//ПРИ КЛИКЕ НА БЛОК С ПРЕВЬЮ В ФУТЕРЕ ОТКРЫВАЕТСЯ ПОЛНАЯ КАРТИНКА СПРОЕКТОМ
  previewProjectCarousel.forEach(function(item, index) {
    item.addEventListener('click', function() {
      let ProjectCarousel = this.getAttribute('data-project-img');
      projectImg.setAttribute('src', ProjectCarousel);
      modalProject.style.display = 'block';
      getScrollTop();
      wrapperMain.style.display = 'none';
      document.documentElement.scrollTo(0, 0);
    })
  })

Comments

[Дмитрий]

Добрый вечер.
А кому нужно Ваше "высокохудожественное" видео?

[Андрей Иванов]

slo_nik, а как лучше для понимания, готов на всё ?

[Дмитрий]

Андрей Иванов, этот код надо добавлять в вопрос, а не в ответ на комментарий.
Код модального окна и как оно вызывается?

[Андрей Иванов]

slo_nik,

<div class="modal-project">
        <img src="img/logo.png" alt="" class="modal-project__logo">
	<span class="modal-project__prev">&#8743; предыдущий проект &#8743;</span>
	<span class="modal-project__next">&#8744; следуюущий проект &#8744;</span>
	<span class="modal-project__close">&#10005;</span>

	<div class="project-item">
		<img src="#" alt="#">
		<h3 class="modal-project__title">Вы можете оставить заявку на разработку дизайна</h3>
		<a href="#" class="btn btn__modal-project">Хочу дизайн</a>
	</div>

</div>

//ПРИ КЛИКЕ НА БЛОК С ПРЕВЬЮ В ФУТЕРЕ ОТКРЫВАЕТСЯ ПОЛНАЯ КАРТИНКА СПРОЕКТОМ
  previewProjectCarousel.forEach(function(item, index) {
    item.addEventListener('click', function() {
      let ProjectCarousel = this.getAttribute('data-project-img');
      projectImg.setAttribute('src', ProjectCarousel);
      modalProject.style.display = 'block';
      getScrollTop();
      wrapperMain.style.display = 'none';
      document.documentElement.scrollTo(0, 0);
    })
  })

Answer 1

[Андрей Ивченков]

Скорее всего у вас в previewProjectCarousel попадают элементы слайдера. Смотрите объявление этой переменной.

Comments

[Андрей Иванов]

А как сделать что бы не попадали, мне же надо кликать на них, по другому никак..