How to add a link to an external URL on the entire image of a slider?

1 reply·opened Aug 27, 2020

Luiz Augusto Correia de AraujoAug 27, 2020

Hi,

Could you please help us to fix this issue?

We are trying (without success) to use this code:

<div class="swiper-slide dark">
  <div class="container">
    <div class="slider-caption slider-caption-center">
    <h2 data-animate="fadeInUp"></h2>
    <p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200"></p>
  </div>
</div>
<div onclick="window.location.href='https://www.google.com/';" class="swiper-slide-bg" style="background-image: url('images/sliders/4.jpg');">
</div>

Regards,

SemiColonWebSTAFFAug 29, 2020

Hello,

Consider using this Code:

<div class="swiper-slide dark">
&#x9;<div class="container">
&#x9;&#x9;<div class="slider-caption slider-caption-center">
&#x9;&#x9;&#x9;<h2 data-animate="fadeInUp">Welcome to Canvas</h2>
&#x9;&#x9;&#x9;<p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200">Create just what you need for your Perfect Website. Choose from a wide range of Elements &amp; simply put them on your own Canvas.</p>
&#x9;&#x9;</div>
&#x9;</div>
&#x9;<div class="swiper-slide-bg" style="background-image: url(&apos;images/slider/swiper/1.jpg&apos;);"></div>
&#x9;<a href="https://your-website.com" class="position-absolute w-100 h-100" style="top:0;left:0;z-index: 5;"></a>
</div>

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard