在 slick 中将滑块图像自定义为 link

Question

所以我找到了一个非常适合我的情况的灵活滑块，我正在尝试创建一个滑块，每个内容或图片在单击时都充当 link

我已经尝试将图像更改为 href，但布局还是不行。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
  <title>Slick Playground</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="./slick/slick.css">
  <link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
  <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
    }
    * {
      box-sizing: border-box;
    }
    .slider {
        width: 50%;
        margin: 100px auto;
    }
    .slick-slide {
      margin: 0px 20px;
    }
    .slick-slide img {
      width: 100%;
    }
    .slick-prev:before,
    .slick-next:before {
      color: black;
    }
    .slick-slide {
      transition: all ease-in-out .3s;
      opacity: .2;
    }

    .slick-active {
      opacity: .5;
    }
    .slick-current {
      opacity: 1;
    }
  </style>
</head>
<body>

希望这段代码对您有所帮助，如果不清楚，我会尽力为您提供所需的信息。

Answer 1

我知道这会有点麻烦，但是你可以使用 jQuerys .click() 函数来做到这一点吗？

给每张图片一个独特的 class 然后从那里开始？

或

您是否尝试过将 div 包裹在 a 元素中？然后，您可以将 A 变成块元素，其中 css 仅针对那些？

<a href="#">
    <div>
      <img src="http://placehold.it/350x300?text=1">
    </div>
</a>

Answer 2

您只需在灵活的选项中更改包装器的选择器即可。你只需要调整你的html。所以不用 div 使用 a.

html

<section class="center slider">
    <a href="#1">
      <img src="http://placehold.it/350x300?text=1">
    </a>
    <a href="#2">
      <img src="http://placehold.it/350x300?text=2">
    </a>
    <a href="#3">
      <img src="http://placehold.it/350x300?text=3">
    </a>
    <a href="#4">
      <img src="http://placehold.it/350x300?text=4">
    </a>
    <a href="#5">
      <img src="http://placehold.it/350x300?text=5">
    </a>
    <a href="#6">
      <img src="http://placehold.it/350x300?text=6">
    </a>
    <a href="#7">
      <img src="http://placehold.it/350x300?text=7">
    </a>
    <a href="#8">
      <img src="http://placehold.it/350x300?text=8">
    </a>
    <a href="#9">
      <img src="http://placehold.it/350x300?text=9">
    </a>
  </section>

js

$(document).on('ready', function() {
  $(".center").slick({
    dots: true,
    infinite: true,
    centerMode: true,
    slidesToShow: 5,
    slidesToScroll: 3,
    slide: 'a' // your selector
  });
});

Answer 3

与其将它们包装在 div 容器中然后为 <a href="something"><img src="something"/></a> 添加标记，我们可以直接将包含的锚标记设为包装器并将 <div> 替换为 <a href="anywhere you want to link your slide"><img></a>. 没有额外的 JS 样式。它为我解决了。

在 slick 中将滑块图像自定义为 link

customize slider image into link in slick

html

javascript

css

jquery

slick.js