將 Slick 輪播水平箭頭更改為帶有字體真棒箭頭的向上和向下箭頭

Question

我的網站中有垂直照片滑動輪播（使用 slick）。 我想更改 slick 的默認箭頭，它們指向左右，並想添加向上和向下箭頭。 我是用 JS 做的。 prevArrow：$（'.prev'），nextArrow：$（'.next'）。

1. 希望導航箭頭附加到 slider 上方所有尺寸卡的頂部和底部

Codepen 鏈接

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