html 链接在“猫头鹰轮播”中不起作用答案

【问题标题】：html links not working in 'Owl Carousel'html 链接在“猫头鹰轮播”中不起作用
【发布时间】：2016-11-25 19:16:14
【问题描述】：

我正在尝试使用 Owl Carousel 作为我的 magento 电子商务网站主页上的滑动轮播。

但是，我在其中包含幻灯片的链接不起作用，甚至无法点击。

在另一个问题中，发帖人解决了这个问题并说：

我终于明白了！我有一个顶部的 div 并阻止了链接.. 我刚刚更改了该 div 上的 z-index，链接现在可以正常工作了。

但我不明白他到底做了什么。有人可以帮我吗？滑块的第 1 部分是：

<div style="padding:29px 0 36px;background-color:#f4f4f4;">
<div class="container">
<div class="slider-with-side">
<div class="slider-area">
<div id="banner-slider-demo-8" class="owl-carousel owl-theme owl-bottom-narrow owl-banner-carousel">
<div class="item">
<a href="{{config path="web/unsecure/base_url"}}index.php/peripheriques/stockage.html"><img src="{{media url="wysiwyg/porto/homepage/slider/08/slide2.jpg"}}" alt="" /></a>
<div class="content" style="position:absolute;width:100%;height:100%;left:0;top:0;">
<div class="ribbon" style="position:absolute;text-align:right;">
<em style="font-weight:300;line-height:1;color:#fff;font-style:normal;">Vos Données En</em>
<h3 style="font-weight:700;line-height:1;color:#fff;">lieux</h3>
<h5 style="font-weight:600;line-height:1;color:#fff;">Sûr!</h5>
</div>
<div class="text-area" style="left:3%;bottom:15%;position:absolute;text-align:left;">
<h2 style="font-weight:600;line-height:1;color:#fff;background-color:#202020;background-color:rgba(23,23,23,.9);">SOLUTIONS <b style="font-weight:800;">DE STOCKAGE</b></h2><br/>
<p style="line-height:1.2;color:#fff;background-color:#444;background-color:rgba(23,23,23,.75);">Une offre vaste et polyvalente pour <b>STOCKEZ, <br/>PROTÉGEZ ET GÉREZ </b>efficacement vos données</p>
</div>              
</div>                      
</div>

第 2 部分是：

<div class="side-area">
<div class="item1">
<a href="{{config path="web/unsecure/base_url"}}index.php/consommables.html"><img src="{{media url="wysiwyg/porto/homepage/slider/08/right-banner1.jpg"}}" alt="" /></a>
<div class="content">
<em  style="color:#fff;font-weight:400;font-style:italic;line-height:1;">Consommables</em>
<h2 style="color:#fff;font-weight:700;line-height:1;">& Fournitures</h2>
</div>
</div>

滑块布局左侧有一张大图，右侧有三张小图。所有都有<a href 标签，并且都不可点击。当我查看页面源时，链接就在那里！

【问题讨论】：

没有代码（html，css），或者链接，至少，没有人帮不上忙，我怕……
您必须提供演示或向我们展示一些代码。
我刚刚更新了这个问题。我的网站在开发环境中！

标签： jquery owl-carousel

【解决方案1】：

我不知道这会对访问此页面的其他人有多大帮助，但我遇到了同样的问题，我在网上阅读的解决方案都没有奏效这是我解决问题的方法，也许你会发现这很有用好吧，即使问题的原因对你来说是不同的。

首先，我用 owl carousel 隔离了该部分，以查看当它是页面上唯一的内容时它是否有效（它确实有效）。然后我添加了页眉和页脚并再次测试（仍然有效）。之后，我添加了每个部分，直到轮播链接停止工作。一旦我弄清楚是哪个部分导致了问题，我就会仔细研究它，看看我是否能发现任何异常。在这种情况下，有一小段代码用于我们决定省略的灯箱功能。删除后一切正常。

【讨论】：