将 Slick 轮播水平箭头更改为带有字体真棒箭头的向上和向下箭头

Question

我的网站中有垂直照片滑动轮播（​​使用 slick）。我想更改 slick 的默认箭头，它们指向左右，并想添加上下箭头。我是用 JS 做的。 prevArrow: $('.prev'), 下一个箭头：$('.next')。

1. 希望导航箭头附加到滑块上方所有尺寸卡片的顶部和底部

Codepen Link

$('.slick', '.vertical-slider').slick({
  vertical: true,
  verticalSwiping: true,
  autoplay: true,
  autoplaySpeed: 5000,
  slidesToShow: 4,
  slidesToScroll: 1,

  prevArrow: $('.prev'),
  nextArrow: $('.next')



});

.row {
  height: 423px;
}

.map {
  background-color: blue;
}

.des {
  background-color: #88206d;
}

.image-slide {
  background-color: #88206d;
}

.slick-slide img {
  width: 100%;
}

.vertical-slider {
  padding-right: 0 !important;
  height: 100%;
}

.slick img {
  box-shadow: 6px 6px 9px 0px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 6px 6px 9px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 6px 6px 9px 0px rgba(0, 0, 0, 0.5);
}

.image-nav {
  z-index: 1;
  cursor: pointer;
}

.nav-height {
  height: 423px;
}

.slick .slick-prev::before {
  /*   content: url(https://i.stack.imgur.com/NEpWE.png); */
}

.slick .slick-next::before {
  /*   content: url(https://i.stack.imgur.com/dBFSB.png); */
}

.slick-prev,
.slick-next {
  /* position: static!important;
  width: auto!important;
  height: auto!important; */
  /*   left:31%!important; */
}

.slick-prev {
  /*   top:0!important; */
}

.slick-next {
  /*   top:100%!important; */
}

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css'>
<link rel="stylesheet" href="./style.css">



<div class="container">
  <div class="row rounded shadow mt-5">

    <div class="col-5 map">
      <h1 class="text-light">Map</h1>
    </div>

    <div class="col-2 image-slide">

      <!--  image slider    -->

      <div class="image-nav position-relative d-flex justify-content-center">
        <div class="nav-height position-absolute d-flex flex-column justify-content-between">
          <div class="prev"><span><img src="https://i.stack.imgur.com/NEpWE.png" alt=""></span></div>
          <div class="next"><span><img src="https://i.stack.imgur.com/dBFSB.png" alt=""></span></div>
        </div>
      </div>



      <div class="slider vertical-slider my-auto">
        <div class="slick">

          <!-- single image to copy for slide -->
          <div class="item my-1">
            <img src="https://i.ibb.co/jWV74db/best-nata-coaching-center.jpg" />
          </div>

          <div class="item my-1">
            <img src="https://i.ibb.co/jWV74db/best-nata-coaching-center.jpg" />
          </div>

          <div class="item my-1">
            <img src="https://i.ibb.co/jWV74db/best-nata-coaching-center.jpg" />
          </div>

          <div class="item my-1">
            <img src="https://i.ibb.co/jWV74db/best-nata-coaching-center.jpg" />
          </div>

          <div class="item my-1">
            <img src="https://i.ibb.co/jWV74db/best-nata-coaching-center.jpg" />
          </div>

        </div>
      </div>

    </div>
    <div class="col-5 des">
      <h1 class="text-light">Description</h1>
    </div>

  </div>
</div>




<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js'></script>
<script src="./script.js"></script>

Answer 1

您可以像这样使用 CSS 变换旋转伪元素：

.slick .slick-prev::before,
.slick .slick-next::before {
  display: block;
  transform: rotate(90deg);
}

$('.slick', '.vertical-slider').slick({
  vertical: true,
  verticalSwiping: true,
  autoplay: true,
  autoplaySpeed: 5000,
  slidesToShow: 4,
  slidesToScroll: 1,
  responsive: [{
    breakpoint: 992,
    settings: {
      slidesToShow: 3,
      slidesToScroll: 1
    }
  }]
});

.row {
  height: 423px;
}

.map {
  background-color: blue;
}

.des {
  background-color: red;
}

.image-slide {
  background-color: red;
}

.slick-slide img {
  width: 100%;
}

.vertical-slider {
  height: 100%;
  padding-right: 0 !important;
}

.slick img {
  box-shadow: 6px 6px 9px 0px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 6px 6px 9px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 6px 6px 9px 0px rgba(0, 0, 0, 0.5);
}

.slick .slick-prev {
  background: url(/assets/img/nav/nav-try.svg) no-repeat scroll 15px -5px;
  left: -25px;
  padding: 24px;
}

.slick .slick-next {
  background: url(/assets/img/nav/nav-try.svg) no-repeat scroll -30px -5px;
  right: -28px;
  padding: 24px;
}

.slick .slick-prev::before,
.slick .slick-next::before {
  display: block;
  transform: rotate(90deg);
}

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css'>
<link rel="stylesheet" href="./style.css">

</head>

<body>
  <!-- partial:index.partial.html -->
  <div class="container">
    <div class="row rounded shadow mt-5">

      <div class="col-5 map">
        <h1 class="text-light">Map</h1>
      </div>

      <div class="col-2 image-slide">

        <!--  image slider    -->

        <div class="slider vertical-slider my-auto">
          <div class="slick">

            <!-- single image to copy for slide -->
            <div class="item my-2 px-3">
              <img src="https://i.ibb.co/jWV74db/best-nata-coaching-center.jpg" />
            </div>

            <div class="item my-2 px-3">
              <img src="https://i.ibb.co/jWV74db/best-nata-coaching-center.jpg" />
            </div>

            <div class="item my-2 px-3">
              <img src="https://i.ibb.co/jWV74db/best-nata-coaching-center.jpg" />
            </div>

            <div class="item my-2 px-3">
              <img src="https://i.ibb.co/jWV74db/best-nata-coaching-center.jpg" />
            </div>

            <div class="item my-2 px-3">
              <img src="https://i.ibb.co/jWV74db/best-nata-coaching-center.jpg" />
            </div>

          </div>
        </div>

      </div>
      <div class="col-5 des">
        <h1 class="text-light">Description</h1>
      </div>

    </div>
  </div>
  <!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js'></script>
  <script src='https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js'></script>
  <script src="./script.js"></script>