click - Slidesjs 不会使幻灯片可点击

Question

我已将 Slidesjs 滑块嵌入到我的网站中。我试图了解如何使幻灯片可点击，因为即使我将 img 元素包装在锚元素中，点击似乎也无法正常工作。

<div id="slides">
    <div class="slides_container">
        <div><a href="#"><img src="img/slider/slide1.png" alt="Slide #1"></a></div>
        <div><a href="#"><img src="img/slider/slide2.png" alt="Slide #2"></a></div>
        <div><a href="#"><img src="img/slider/slide3.png" alt="Slide #3"></a></div>
        <div><a href="#"><img src="img/slider/slide4.png" alt="Slide #4"></a></div>
    </div>
</div>

Answer 1

我遇到了同样的问题，它是 slidesLoaded 函数中的“底部”参数。我变了

    slidesLoaded: function() {
      $('.caption').animate({
        bottom:0
      },200);
    }

至

    slidesLoaded: function() {
      $('.caption').animate({
        bottom:-200
      },200);
    }

它有效。

因此，我的最终脚本的高度为 270px 幻灯片，如下所示。

    animationStart: function(current){
      $('.caption').animate({
        bottom:-270
      },100);
    },
    animationComplete: function(current){
      $('.caption').animate({
        bottom:-230
      },200);
    },
    slidesLoaded: function() {
      $('.caption').animate({
        bottom:-230
      },20);
    }

Answer 2

这只是 z-index 问题，在幻灯片 div 中设置最高 z-index 并将位置设置为相对如下，您的链接现在就可以了。

<div id="slides" style="z-index:9999999; position:relative;">
<div class="slides_container">
    <div><a href="#"><img src="img/slider/slide1.png" alt="Slide #1"></a></div>
    <div><a href="#"><img src="img/slider/slide2.png" alt="Slide #2"></a></div>
    <div><a href="#"><img src="img/slider/slide3.png" alt="Slide #3"></a></div>
    <div><a href="#"><img src="img/slider/slide4.png" alt="Slide #4"></a></div>
</div></div>

Answer 3

在此示例中，每张幻灯片在单击时都指向外部网页：http: //slidesjs.com/examples/images-with-captions/

也许您可以尝试根据此示例调整您的代码。