0

I have a javascript rotator which for each link within it, doesn't allow clickthroughs no matter what part of the button you click on & I have no idea why:

You can find it live here: http://benpotterstaging.com/

enter image description here

^ This is the button that doesn't work.

Here is the code:

<div data-owl-auto="true" data-owl-loop="true" data-owl-speed="5500" data-owl-gap="0" data-owl-nav="false" data-owl-dots="true" data-owl-animate-in="" data-owl-animate-out="" data-owl-item="1" data-owl-item-xs="1" data-owl-item-sm="1" data-owl-item-md="1" data-owl-item-lg="1" data-owl-nav-left="&lt;i class=&quot;fa fa-angle-left&quot;&gt;&lt;/i&gt;" data-owl-nav-right="&lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt;" class="owl-slider home-media__slider">
            <div class="media-item">
              <div class="media-item__thumbnail"><img src="<?php echo get_bloginfo('template_url') . '/'; ?>public/images/slider/01.jpg" alt=""></div>
              <div class="media-item__content">
                <div class="container">
                  <h3 class="media-item__title">Putting children first. <br> Preparing the next generation for success in life.</h3><a href="<?php echo get_home_url(); ?>/book-a-tour/" class="media-item__link active">Book a tour</a>
                </div>
              </div>
            </div>
            <div class="media-item">
              <div class="media-item__thumbnail"><img src="<?php echo get_bloginfo('template_url') . '/'; ?>public/images/slider/02.jpg" alt=""></div>
              <div class="media-item__content">
                <div class="container">
                  <h3 class="media-item__title">Putting children first. <br> Preparing the next generation for success in life.</h3><a href="<?php echo get_home_url(); ?>/book-a-tour/" class="media-item__link active">Book a tour</a>
                </div>
              </div>
            </div>
          </div>
          <div class="owl-slider__control owl-slider__prev"></div>
          <div class="owl-slider__control owl-slider__next"></div>
        </div>

Thank you for the help on this one!!!

Ben Potter
  • 875
  • 5
  • 20
  • 34

2 Answers2

0

If the button is going to be static where it is on the page. Put it in a button tag. How to create an HTML button that acts like a link?

Then change the Z-index so its (the button) above your carousel. https://www.w3schools.com/cssref/pr_pos_z-index.asp

David Czerepak
  • 25
  • 7
0

Remove z-index: -1 from .home-media