Как сделать изображение кликабельным в автоматических c и ручных слайд-шоу? - PullRequest
Новая
       24

Как сделать изображение кликабельным в автоматических c и ручных слайд-шоу?

0 голосов
/ 28 февраля 2020

Я создал автоматическое c слайд-шоу с ручным управлением, и я хочу, чтобы изображения тоже были кликабельными. Для этого я поместил тег изображения внутри тега привязки, но он не кликабелен. Если кто-нибудь знает, как решить эту проблему, пожалуйста, помогите. 

<div class="slideshowContainer">
   <img class="imageSlides" src="{{ url('assets/images/1.jpg') }}" >
   <img class="imageSlides" src="{{ url('assets/images/2.jpg') }}">
   <a href="{{url('myUrl')}}"><img class="imageSlides" src="{{ url('assets/images/3.jpg') }}" ></a>
   <img class="imageSlides" src="{{ url('assets/images/4.jpg') }}" >

   <img id ="leftArrow" class="slideshowArrow" src="{{ url('assets/images/left_arrow-01.png') }}">
   <img id ="rightArrow" class="slideshowArrow" src="{{ url('assets/images/right_arrow-01.png') }}">
</div>

Ответы [ 2 ]

0 голосов
/ 04 марта 2020

Извините за поздний ответ.

Ползунок работает нормально, но да, мы должны немного его настроить. 

<img class="imageSlides" src="{{ url('assets/images/1.jpg') }}" >

Проблема с тегами привязки связана с absolute должность. Так как изображение absolute, тег привязки не имеет содержимого внутри, что делает его ширину и высоту 0x0. 

<div class="image_wrapper imageSlides">
    <a href="sdsd" class="slide_link">
        <img class="" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" >
    </a>
</div>

Мы можем содержать изображение и тег привязки в теге div и сделать их абсолютными.

Примечание: Добавлен тег div только для улучшения структуры кода. Вы можете удалить их и переместить класс imageSlides к тегу привязки.

Примечание: Необходимо создать изображения для заполнения тегов div / тегов привязки. Вы можете использовать приведенный ниже код, чтобы изображение заполняло тег div. 

img{
  width: 100%;
}
0 голосов
/ 28 февраля 2020

Вот слайд-шоу, активируемое вручную. Это то, что вы ищете? 

    var slideIndex = 1;
    showDivs(slideIndex);
    
    function plusDivs(n) {
      showDivs(slideIndex += n);
    }
    
    function showDivs(n) {
      var i;
      var x = document.getElementsByClassName("mySlides");
      if (n > x.length) {slideIndex = 1}
      if (n < 1) {slideIndex = x.length}
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";  
      }
      x[slideIndex-1].style.display = "block";  
    }
 .mySlides {display:none;}
image
...