How to make swiper.js images clickable?

Question

Slider used: http://www.idangero.us/swiper/

Live DEMO of what I'm attempting: http://mhdtaki.com/lab/mobile/mobile.html

I have implemented swipe gallery, set to appear only on mobile sized screens via a mediaquery. The point was to replace a desktop grid gallery to a coverflow mobile version when viewed on smaller viewports. Resizing the demo page will show the coverflow gallery successfully showing, I want to know how to make the images clickable to external links, similar to how the larger grid responds to clicks. I tried wrapping individual divs with an element but that only broke the gallery.

    <!--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 -->

Example of What I attempted:

 <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

Try this

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

Maybe you will need to add

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

Or

.swiper-slide {
  display: block;
}