Как сделать swiper.js изображения интерактивными?

Question

Slider используется: http://www.idangero.us/swiper/

Live Demo, что я пытаюсь: http://mhdtaki.com/lab/mobile/mobile.html

Я реализовал салфетки галереи, которые появятся только на экранах размером мобильных через mediaquery. Дело в том, чтобы заменить галерею сетки рабочего стола на мобильную версию coverflow при просмотре на небольших видовых экранах. Изменение размера демонстрационной страницы покажет галерею покрытия, показывающую, что я хочу знать, как сделать образы доступными для внешних ссылок, подобно тому, как большая сетка реагирует на клики. Я попробовал обернуть отдельные div с элементом, но только сломал галерею.

<!--MOBILE GALLERY FOR VIEW --> 
    <section id="mobilegallery"> 
        <div class="swiper-container"> 
    <div class="swiper-wrapper"> 
     <div class="swiper-slide" style="background-image:url(images/imperialthumb.jpg)"></div> 
     <div class="swiper-slide" style="background-image:url(images/lezem.jpg)"></div> 
     <div class="swiper-slide" style="background-image:url(images/pups.jpg)"></div> 
     <div class="swiper-slide" style="background-image:url(images/kanafani.jpg)"></div> 
     <div class="swiper-slide" style="background-image:url(images/unvield.jpg)"></div> 
     <div class="swiper-slide" style="background-image:url(images/baz.jpg)"></div> 
     <div class="swiper-slide" style="background-image:url(images/rana.jpg)"></div> 
     <div class="swiper-slide" style="background-image:url(images/chairs.jpg)"></div> 
     <div class="swiper-slide" style="background-image:url(images/brosh.jpg)"></div> 
     <div class="swiper-slide" style="background-image:url(images/bros.jpg)"></div> 
    </div> 
    <!-- Add Pagination --> 
</div> 
    </section> 
      <!--END MOBILE GALLERY FOR VIEW --> 

Пример То, что я пытался:

<div class="swiper-wrapper"> 
      <a href="www.google.com"><div class="swiper-slide" style="background-image:url(images/imperialthumb.jpg)"></div></a> 
     </div> 

Answer 1

Попробуйте

<div class="swiper-wrapper"> 
    <a class="swiper-slide" style="background-image:url(images/imperialthumb.jpg)" href="www.google.com"></a> 
</div> 

Возможно, вам нужно будет добавить

.swiper-slide { 
    display: inline-block; 
} 

Или

.swiper-slide { 
    display: block; 
}