Question

我开发了这个网站http://aevoe.com.au

我在主页上使用猫头鹰旋转木马作为滑动旋转木马。

然而，我将幻灯片包裹起来的链接无法正常工作，甚至无法点击。

这是轮播的标记：

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

不确定问题是什么..

Answer 1

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

删除点击事件的 preventDefault（）方法！

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

否则，请正确处理 href 。

示例：

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

或

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

Answer 2

如果有人遇到过这个问题，请检查旋转木马内部元素的z-index，将其设置为高，如1000并测试它。解决了我的问题。另外，我必须添加这些：

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

Answer 3

我终于明白了！

我有一个顶部的div并阻挡了链接..

我刚刚更改了该div上的z-index，链接现在正在运行。

Answer 4

只需删除此行： “e.preventDefault（）;”

$('#carousel-cartoes li a').on('click', function(e){                                
            e.preventDefault();
            var .....

Answer 5

我遇到了同样的问题，检查代码，在我的情况下，是'.owl-nav'按钮在链接的z-index中，所以我的解决方案是操纵DOM添加按钮没有父母。

干杯

Answer 6

问题可能是由添加到pointer-events: none;的子元素中的样式.owl-item引起的。

解决方案：

.owl-item > div {
    pointer-events: auto !important;
}

Answer 7

万一有人仍在寻找方便的解决方案，在试验时我发现将整个轮播和父母放在一个标签中，不知何故使他们可以访问。

标签嵌套很深，但仍然可以完美点击！

这是我的示例代码：

<section class="hero-slider-area">
  <div class="container-fluid px-0 overflow-hidden">
    <span> <!--MAGIC-->
      <div class="row">
        <div class="col-12">
          <div class="hero-slider owl-carousel">
            <div class="slider-item">
              <div class="row p-5 justify-content-end">
                <div class="col-6 text-end p-5">
                  <div class="px-5">
                    <a
                      href="#"
                      class="text-white py-3 px-3"
                      style="
                        border: 3px solid #692184 !important;
                        color: #692184 !important;
                        font-weight: 800 !important;
                        z-index: 1001 !important;
                      "
                    >
                      MÁS INFORMACIÓN >
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </span>
  </div>
</section>

为什么我的html链接不能用于'Owl Carousel'

7 个答案: