问题描述
我的网站上有垂直照片滑动轮播(使用 slick )。我想更改指向左右的浮油的默认箭头,并想添加上下箭头。我是用JS做到的。 prevArrow: $('.prev'),nextArrow: $('.next').
- 希望将导航箭头附加到滑块上方所有尺寸卡片的顶部和底部
$('.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>