Есть слайдер с 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>