0

Есть слайдер с 14 картинками и хотелось бы увидеть описание картинки(простой текст) при клике на нее. К сожалению получилось только при клике на 1 картинку, вывести описание для всех картинок. Подскажет кто как быть?

$('.sl').slick({
	autoplay: true,
	autoplaySpeed:1500,
	speed: 500,
	dots: true,
	pauseOnDotsHover: true,
	slidesToShow: 3,
	slidesToScroll: 3,
	responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});

$( ".sl__slide" ).click(function() {
  $( ".sl__text" ).toggle(function() {
    // Animation for comments on photo
  });
});
.sl__slide {
  position: relative;
}

.sl__text {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
  padding: 2px 0;
  width: 100%;
  height: 100%;
  display: none;
}

.sl__text:hover {
}

.sl__text a {
  display: block;
}

.sl_zag, .sl_desc {
  margin: 0;
  padding: 0;
}
<div class="sl">
					<div class="sl__slide">
						<img src="images/sl1.jpg" alt="Photo 1" class="sl__img">
						<div class="sl__text">
							<h3 class="sl__zag">Slide 1</h3>
							<p class="sl__desc">information</p>
						</div>
					</div>
					<div class="sl__slide">
						<img src="images/sl2.jpg" alt="Photo 2" class="sl__img">
						<div class="sl__text">
							<h3 class="sl__zag">Slide 2</h3>
							<p class="sl__desc">information</p>
						</div>
					</div>
					<div class="sl__slide">
						<img src="images/sl3.jpg" alt="Photo 3" class="sl__img">
						<div class="sl__text">
							<h3 class="sl__zag">Slide 3</h3>
							<p class="sl__desc">information</p>
						</div>
					</div>
					<div class="sl__slide">
						<img src="images/sl4.jpg" alt="Photo 4" class="sl__img">
						<div class="sl__text">
							<h3 class="sl__zag">Slide 4</h3>
							<p class="sl__desc">information</p>
						</div>
					</div>
					<div class="sl__slide">
						<img src="images/sl5.jpg" alt="Photo 5" class="sl__img">
						<div class="sl__text">
							<h3 class="sl__zag">Slide 5</h3>
							<p class="sl__desc">information</p>
						</div>
					</div>
					<div class="sl__slide">
						<img src="images/sl6.jpg" alt="Photo 6" class="sl__img">
						<div class="sl__text">
							<h3 class="sl__zag">Slide 6</h3>
							<p class="sl__desc">information</p>
						</div>
					</div>
					<div class="sl__slide">
						<img src="images/sl7.jpg" alt="Photo 7" class="sl__img">
						<div class="sl__text">
							<h3 class="sl__zag">Slide 7</h3>
							<p class="sl__desc">information</p>
						</div>
					</div>
					<div class="sl__slide">
						<img src="images/sl8.jpg" alt="Photo 8" class="sl__img">
						<div class="sl__text">
							<h3 class="sl__zag">Slide 8</h3>
							<p class="sl__desc">information</p>
						</div>
					</div>
					<div class="sl__slide">
						<img src="images/sl9.jpg" alt="Photo 9" class="sl__img">
						<div class="sl__text">
							<h3 class="sl__zag">Slide 9</h3>
							<p class="sl__desc">information</p>
						</div>
					</div>
					<div class="sl__slide">
						<img src="images/sl10.jpg" alt="Photo 10" class="sl__img">
						<div class="sl__text">
							<h3 class="sl__zag">Slide 10</h3>
							<p class="sl__desc">information</p>
						</div>
					</div>
					<div class="sl__slide">
						<img src="images/sl11.jpg" alt="Photo 11" class="sl__img">
						<div class="sl__text">
							<h3 class="sl__zag">Slide 11</h3>
							<p class="sl__desc">information</p>
						</div>
					</div>
					<div class="sl__slide">
						<img src="images/sl12.jpg" alt="Photo 12" class="sl__img">
						<div class="sl__text">
							<h3 class="sl__zag">Slide 12</h3>
							<p class="sl__desc">information</p>
						</div>
					</div>
					<div class="sl__slide">
						<img src="images/sl13.jpg" alt="Photo 13" class="sl__img">
						<div class="sl__text">
							<h3 class="sl__zag">Slide 13</h3>
							<p class="sl__desc">information</p>
						</div>
					</div>
					<div class="sl__slide">
						<img src="images/sl14.jpg" alt="Photo 14" class="sl__img">
						<div class="sl__text">
							<h3 class="sl__zag">Slide 14</h3>
							<p class="sl__desc">information</p>
						</div>
					</div>
			</div>

2 ответа 2

2

Замени:

$( ".sl__slide" ).click(function() {
  $( ".sl__text" ).toggle(function() {
    // Animation for comments on photo
  });
});

На:

$( ".sl__slide" ).click(function() {
  $(this).find( ".sl__text" ).toggle(function() {
    // Animation for comments on photo
  });
});
1
  • Спасибо, все работает именно так как и хотел сделать :) Commented 26 авг. 2017 в 19:40
0

А если добавить в css ыот это?

.sl__text:hover {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
  padding: 2px 0;
  width: 100%;
  height: 100%;
  display: block!important;
}
1
  • не помогло, все так же всплывает текст для всех картинок. единственное изменение это если мышку задержать на картинке то для нее появиться описание. но идея в том что бы показывать/прятать при клике Commented 26 авг. 2017 в 19:12

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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