Question

由于某种原因，我无法更改Ken Wheeler's Slick carousel中的nextArrow和prevArrow设置-我试图用与箭头主题保存在同一目录中的SVG文件替换标准箭头图标。 .css文件。我一直在尝试保持struct TypeA { size_t width; ; struct TypeB { size_t no_width; }; EXPECT_TRUE((has_width<TypeA, size_t>::value)); EXPECT_TRUE((has_width<TypeB, size_t>::value));标记不变以保留功能，并将svg文件放在当前存在“ next”和“ previous”的/home/auke/git/base/sdk/src/horus/cmp/prop/reflection/has_width.hpp:49: error: ‘width’ is not a member of refl_test_reflection_types_Test::TestBody()::TypeB’ static constexpr bool value = boost::mpl::eval_if< ^~~~~标记中，但不会产生任何作用。结果。我该如何解决？作为设置对象的一部分，默认值如下：

<button>

Answer 1

主要思想是通过html包装上一个/下一个按钮，为它们添加特定的选择器，并添加nextArrow和prevArrow参数以修饰初始。

这是带有右箭头的示例。

$(".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>

Answer 2

在this existing StackOverflow article的评论中找到了答案-用户Yoan的评论是最适合我实现Slick的评论。

无法在Slick Carousel中更改nextArrow和prevArrow

2 个答案: