时间戳

首页 > 解决方案 > 无法在 Slick Carousel 中更改 nextArrow 和 prevArrow

jquery - 无法在 Slick Carousel 中更改 nextArrow 和 prevArrow

问题描述

出于某种原因，我无法更改Ken Wheeler 的 Slick carousel中的 nextArrow 和 prevArrow 设置——我试图用我保存在与 slick-theme.css 文件相同的目录中的 SVG 文件替换标准箭头图标。我一直在尝试保持<button>标签完整以保留功能，并将 svg 文件放在<img>当前存在“下一个”和“上一个”的标签中，但它没有产生任何结果。我该如何解决？作为设置对象的一部分，默认值如下：

prevArrow: '<button class="slick-prev" aria-label="Previous" type="button">Next</button>', nextArrow: '<button class="slick-next" aria-label="Next" type="button">Previous</button>'

标签： jqueryhtmlcssslick.js

解决方案

主要思想是通过 html 包装你的 prev/next 按钮，为它们添加特定的选择器，并添加nextArrow和prevArrow参数到 slick init。

这是带有右箭头的示例。

$(".single-item").slick({
  dots: true,
  nextArrow: '#right-arrow-example' // selector of your custom next arrow
});
.container {
  margin: 0 auto;
  padding: 40px;
  width: 80%;
  color: #333;
  background: #419be0;
  position: relative;
}

.slick-slide {
  text-align: center;
  color: #419be0;
  background: white;
}

/* it's just an example of styling right arrow button */
#right-arrow-example {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 60px;
  right: 10px;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css" rel="stylesheet"/>

<div class='container'>
  <div class='single-item'>
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
    <div><h3>6</h3></div>
  </div>
  
  <div id="right-arrow-example">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 31.49 31.49" style="enable-background:new 0 0 31.49 31.49;" xml:space="preserve">
<path style="fill:#1E201D;" d="M21.205,5.007c-0.429-0.444-1.143-0.444-1.587,0c-0.429,0.429-0.429,1.143,0,1.571l8.047,8.047H1.111  C0.492,14.626,0,15.118,0,15.737c0,0.619,0.492,1.127,1.111,1.127h26.554l-8.047,8.032c-0.429,0.444-0.429,1.159,0,1.587  c0.444,0.444,1.159,0.444,1.587,0l9.952-9.952c0.444-0.429,0.444-1.143,0-1.571L21.205,5.007z"/>
      <g></g>
      <g></g>
      <g></g>
      <g></g>
      <g></g>
      <g></g>
      <g></g>
      <g></g>
      <g></g>
      <g></g>
      <g></g>
      <g></g>
      <g></g>
      <g></g>
      <g></g>
    </svg>
  </div>
</div>

编辑：或者试试这个例子（没有内联svg）：

CSS：

#right-arrow-example {
    ...
    background: url("https://image.flaticon.com/icons/svg/109/109617.svg");
}

HTML：

<div id="right-arrow-example"></div>

推荐阅读