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

Posted

技术标签:

【中文标题】将 Slick 轮播水平箭头更改为带有字体真棒箭头的向上和向下箭头【英文标题】：Change Slick carousel horizontal arrows to Up and & down arrows with font-awesome arrows 【发布时间】：2021-08-07 14:22:23 【问题描述】：

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

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

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" ></span></div>
          <div class="next"><span><img src="https://i.stack.imgur.com/dBFSB.png" ></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>

【问题讨论】：

【参考方案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>

【讨论】：

但是这个箭头形状是从哪里来的？这样我就可以改变不同的箭头样式？ 好的，我知道了，psedo 元素之前是箭头。我正在重新编写代码...请帮助 @StayFoolish 你到底需要什么帮助？ 希望导航箭头在所有屏幕尺寸下都附加到卡片的顶部和底部

以上是关于将 Slick 轮播水平箭头更改为带有字体真棒箭头的向上和向下箭头的主要内容，如果未能解决你的问题，请参考以下文章

轮播插件Slick.js使用方法详解

如何设计 React Slick carrousel 的箭头样式？

带有样式组件的 React-slick 自定义箭头

导航栏后退按钮箭头字体 Swift

Bootstrap 在初始状态下折叠菜单箭头

带有文本的光滑滑块轮播