Why aren't my html links working in 'Owl Carousel'

Question

I've developed this site http://aevoe.com.au

I've used Owl Carousel for the sliding carousel on the home page.

However the links I've wrapped the slides in aren't working or even clickable.

This is the markup for the carousel:

<div class="fourteen columns offset-by-one">
    <div class="row" id="slide-margin">
        <div id="owl-demo" class="owl-carousel">
            <div><a href="works/summer-selections"><img src="images/dissolve-now.jpg" /></a></div>
            <div><a href="works/summer-selections"><img src="images/need-you-now.jpg" /></a></div>
            <div><a href="works/arcade-fire"><img src="images/the-suburbs.jpg" /></a></div>
        </div>  
    </div>
</div>

Not sure what the problem is..

Solution 1

http://aevoe.com.au/assets/libs/aevoe.js

Remove the preventDefault() Method on your click events!

 $(".a").click(function(b){b.preventDefault();newLocation=this.href;$("body").fadeOut(1000,a)});

Otherwise, handle the href correctly.

Example:

 $(".a").click(function(b){newLocation=this.href;$("body").fadeOut(1000,a)});

or

 $(".a").click(function(b){b.preventDefault();newLocation=this.href;$("body").fadeOut(1000,a); window.location.href=newLocation;});

Solution 2

If anyone has come across this issue, check z-index of the the element inside the carousel, set it to something high, like 1000 and test it. Solved the problem for me. Also, I had to add these:

z-index: 1000;
display: block;
width: 100%;
height: 100%;
position: relative;

Solution 3

I've had the same issue, checking the code, in my case, was the the '.owl-nav' buttons were in the z-index over the links, so my solution was manipulate the DOM to add the buttons without parent.

Cheers

Solution 4

This is my solution for same problem:

HTML:

        <div id="your_selector">
            <div class="item">
                <a href="https://examble.com" target="_blank" class="item-link">
                    <img src="https://examble.com/file_name.png" />
                </a>
            </div>
            <div class="item">
                <a href="https://examble.com" target="_blank" class="item-link">
                    <img src="https://examble.com/file_name.png" />
                </a>
            </div>
            <div class="item">
                    <img src="https://examble.com/file_name.png" />
            </div>
            ....
        </div>

CSS:

.has-href{
    cursor: pointer;
}

JQuery (JavaScript):

    const slider= $('#your_selector');

    slider.owlCarousel({
       
       ........... (your options here) .......

    });
    slider.find(".item-link").each(function (index, currentElement) {
        $(currentElement).closest(".item").addClass('has-href'); // add class `has-href` ro change mouse cursor on hover
        $(currentElement).closest(".item").click(function(e) {
            e.preventDefault();
            window.open(
                $(currentElement).attr('href'),
                $(currentElement).attr('target')
            );
            return false;
        });
    });

View more solutions

Comments

[ryanjdillon]

I see you fixed your link problem. I am having the same with version 2. What did you happen to do to fix this?

[j08691]

I don't see the class a being applied to the links. Can you point out where in the code this happens?

[Adrian Preuss]

Hey, sure - Sorry for that, see that. I've checked the owl carousel. No events will be repressed. You only can try to add the .a class to the links. Please try it

[ptrphm]

The .a class is not for the carousel, it is meant for the fade out of the page for the main navigation links.

[Adrian Preuss]

than write a special method for that (without the fadeOut), whats the problem?

[ptrphm]

I've tried everything you recommended but the links on the slide are still not working

[Vodo-Siosk Baas]

thnks, but for a better understand the class is product-thumb

[Thomas Rollet]

Can you explain why ?

[OctaviaLo]

This was my problem too. I had placed the nav buttons directly over the carousel and attempted to center them with flex, resulting in having them cover the items.