Question

我正在使用光滑的滑块。我创造了两个div。这是详细信息：）

<a href="#" class="Full_Left"></a>
<a href="#" class="Full_Right"></a>

这是这两个div的css

.Full_Left {
  position: absolute;
  top: 0px;
  width: 50%;
  height: 100%;
  background: rgba(34, 25, 165, 0.5);
  left: 0px;
  z-index: 2;

}

.Full_Left:hover {
  cursor: url(../images/right.svg), auto;
}

.Full_Right {
  position: absolute;
  top: 0px;
  width: 50%;
  height: 100%;
  background: rgba(216, 33, 33, 0.5);
  right: 0px;
  z-index: 2;
}

.Full_Right:hover {
  cursor: url(../images/left.svg), auto;
}

你现在可以看到我的div是全屏的，我想用我创建的链接控制滑块，这样当用户将鼠标拉到50％时，他有右箭头，左侧和所有滑块都相同内容将低于这两层。

我想知道这可能与“Slick”有关吗？提前谢谢。

Answer 1

我有一个与此类似的用例，尽管有所不同。找到这个问题后，我的方向正确了，下面我的答案确实解决了使用外部链接控制Slick滑块的问题。

我在右列中将Slick滑块设置为position: fixed，在右列中有一个较长的故事可以滚动。滑块中的每张幻灯片都对应故事的一部分，由<h3>标签隔开。我想要每个标题旁边的链接，以便在单击时将幻灯片设置为相应的幻灯片。为此，我在每个节标题的末尾添加了一个按钮：

<h3>Section Header <button data-slick-index="0" class="slide-to"><i class="fa fa-camera-retro" aria-hidden="true"></i></button></h3>

data-slick-index属性（它是一个属性吗？）被设置为相应幻灯片的平滑索引。然后在我的Slick初始化JS下方，放置以下内容：

$(".slide-to").bind("click", function() {
    var slidx = $(this).attr('data-slick-index');
    $('#slideshow').slick('slickGoTo', slidx); 
});

像吊饰*一样工作。

那是一种魅力与冠军的结合。

Answer 2

我自己解决了这个问题。这是我的工作代码

<script type="text/javascript">
    $('.Full_Right').click(function(e) {
        $('#Contrroll').slick('slickNext');
    });

    $('.Full_Left').click(function(e) {
        $('#Contrroll').slick('slickPrev');
    });
</script>

：）

使用外部链接控制光滑滑块

2 个答案: