使用字体很棒的箭头将 Slick carousel 水平箭头更改为向上和向下箭头

如何解决使用字体很棒的箭头将 Slick carousel 水平箭头更改为向上和向下箭头

我的网站上有垂直照片滑动轮播（​​使用 slick ）。我想更改指向左右的浮油的默认箭头，并想添加上下箭头。我是用JS做到的。 prevArrow: $('.prev'),nextArrow: $('.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.5);
  -webkit-Box-shadow: 6px 6px 9px 0px rgba(0,0.5);
  -moz-Box-shadow: 6px 6px 9px 0px rgba(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>

解决方法

您可以像这样使用 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.5);
  -webkit-box-shadow: 6px 6px 9px 0px rgba(0,0.5);
  -moz-box-shadow: 6px 6px 9px 0px rgba(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>