光滑的滑块同步 - 断点上的自定义箭头
Posted
技术标签:
【中文标题】光滑的滑块同步 - 断点上的自定义箭头【英文标题】：Slick slider Syncing - custom arrow on breakpoints 【发布时间】：2019-07-23 17:00:43 【问题描述】：所以我有这个多滑块，我使用光滑的滑块同步来使这个滑块工作。一切都很好，除非我想在移动屏幕（768 及以下）上使用不同的/我自己的按钮作为下一个上一个箭头。就显示正确的按钮而言，我的 UI 设置正确。但是我的设置没有将我的自定义按钮识别为移动设备上的圆滑箭头。
常规屏幕
手机屏幕（按钮不能用作箭头）
**here is my code**
$(document).ready(function ()
$(".home-nav-slider-bg").slick(
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.home-nav-slider-slider',
);
$(".home-nav-slider-slider").slick(
slidesToShow: 1,
slidesToScroll: 1,
centerPadding: '30px',
asNavFor: '.home-nav-slider-bg',
centerMode: false,
focusOnSelect: true,
speed: 500,
arrows: true,
//fade: true,
responsive: [
breakpoint: 768,
settings:
nextArrow: $('.home-nav-slider-media-control button.right slick-next').get().map(function (v) return v.outerhtml ).join(),
prevArrow: $('.home-nav-slider-media-control button.left slick-prev').get().map(function (v) return v.outerHTML ).join()
]
);
$(window).resize(function ()
$('.home-nav-slider-slider')[0].slick.refresh();
);
);
jQuery(window).on('load', function ()
function getImage()
jQuery(".home-nav-slider-image-holder").each(function ()
var imgSrc = $(this).find("img").attr("src");
$(this).css('background-image', 'url(' + imgSrc + ')');
);
getImage();
);
var $status = $('.home-nav-slider-slideCount');
var $slickElement = $('.home-nav-slider-slickElement');
$slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide)
var i = (currentSlide ? currentSlide : 0) + 1;
$status.text(i + '/' + slick.slideCount);
);
$('.home-nav-slider-slider').on('afterChange', function (event, slick, currentSlide, nextSlide)
console.log(event);
console.log(slick);
console.log(currentSlide);
console.log(nextSlide);
);h1, h2, h3, h4, h5, h6
font-family: 'Teko', sans-serif;
html
font-size: 18px;
@media (min-width: 576px)
.container
max-width: 540px;
@media (min-width: 768px)
.container
max-width: 720px;
@media (min-width: 992px)
.container
max-width: 960px;
@media (min-width: 1200px)
.container
max-width: 1400px;
h1, .h1
font-size: 3.815rem;
h2, .h2
font-size: 2.441rem;
h3, .h3
font-size: 1.563rem;
h4, .h4
font-size: 1.25rem;
h1, h2, h3, h4, h5, h6
font-family: 'Teko', sans-serif;
.home-nav-slider-main .home-nav-slider-title h1
color: #fff;
font-weight: normal;
letter-spacing: 1.5px;
text-shadow: 0 1px 6px rgba(0, 0, 0, .57);
line-height: 110%;
.home-nav-slider-main .home-nav-slider-media-control button
z-index: 1;
border-radius: 0;
.home-nav-slider-main .home-nav-slider-slider
color: #fff;
.home-nav-slider-main .home-nav-slider-slider .slick-prev, .home-nav-slider-main .home-nav-slider-slider .slick-next
border: 1px solid #eee;
height: 2.1rem;
width: 40px;
z-index: 1;
top: -1rem !important;
.home-nav-slider-main .home-nav-slider-slider .slick-list
padding-top: 1rem;
.home-nav-slider-main .home-nav-slider-slider .slick-list:before
content: '';
width: 100%;
height: 1px;
background-color: #fff;
display: block;
position: absolute;
top: 0;
.home-nav-slider-main .slick-prev:before, .home-nav-slider-main .slick-next:before
font-family: 'Ionicons';
.home-nav-slider-main .slick-next:before
content: '\f3d6';
.home-nav-slider-main .slick-prev:before
content: '\f3d5';
.home-nav-slider-main .home-nav-slider-image-holder
background-size: cover;
background-position: center;
.home-nav-slider-main .home-nav-slider-image-holder img
opacity: 0;
visibility: hidden;
.home-nav-slider-main .home-nav-slider-bg
position: absolute;
left: 0;
right: 0;
z-index: -1;
top: 0;
bottom: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
.home-nav-slider-main .home-nav-slider-bg div
height: 100%;
.home-nav-slider-main .home-nav-slider-bg .slick-slide
margin: 0px;
.home-nav-slider-main .home-nav-slider-bg img
height: 100vh;
width: auto;
.home-nav-slider-main .home-nav-slider-wrap
position: relative;
overflow: hidden;
height: 100vh;
.home-nav-slider-main .home-nav-slider-slideCount
position: relative;
left: 6rem;
top: -10px;
color: #fff;
.home-nav-slider-main .slick-slide
margin: 0px 3px;
.home-nav-slider-main .home-slider-gradient-wrap
overflow: hidden;
.home-nav-slider-main .home-slider-gradient-wrap:before
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
/* background-color: #000;
*/
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33000000', endColorstr='#b3000000', GradientType=0);
.home-nav-slider-main .home-slider-gradient-wrap .container .row
height: 100vh;
@media (min-width: 992px)
.home-nav-slider-main .slick-next
left: 2.18rem;
.home-nav-slider-main .slick-prev
left: 0px;
@media (max-width: 992px)
.home-nav-slider-main .home-nav-slider-slider
position: relative;
top: 0px;
.home-nav-slider-main .slick-prev
left: 0px;
.home-nav-slider-main .slick-next
left: 40px;
@media (max-width: 767px)
.home-nav-slider-main .home-nav-slider-slider-text
display: block !important;
text-align: left;
.home-nav-slider-main .home-nav-slider-slider-text p
text-align: left !important;
.home-nav-slider-main .home-nav-slider-slider-text p br
display: none;
.home-nav-slider-main .slider-home h1
text-align: left;
@media (max-width: 1024px)
.home-nav-slider-main .home-slider-gradient-wrap .container .row
height: auto;
.home-nav-slider-main .home-nav-slider-wrap
height: auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>slick 2-in-1-new</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
<link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />
<link href="https://fonts.googleapis.com/css?family=Teko:400,500,600,700" rel="stylesheet">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="home-nav-slider-main">
<section class="home-nav-slider-wrap mb-0 pt-11">
<div class="home-slider-gradient-wrap">
<div class="home-nav-slider-bg">
<div class="home-nav-slider-image-holder">
<img src="https://www.dropbox.com/s/9fvw247x7ml90mf/canadaN.jpg?dl=1" >
</div>
<div class="home-nav-slider-image-holder">
<img src="https://www.dropbox.com/s/5x8p2z5cvip5u38/chicago.jpg?dl=1" >
</div>
</div>
<div class="container">
<div class="row">
<div class=" col-lg-12 align-self-center">
<div class="home-nav-slider-title">
<h1> Hello<br>Slider</h1>
</div>
</div>
<div class="col-lg-12 align-self-center d-none d-lg-block ">
<span class="home-nav-slider-slideCount"></span>
<div class="home-nav-slider-slider home-nav-slider-slickElement ">
<div>
<div
class="d-flex align-items-center justify-content-between home-nav-slider-slider-text mb-3">
<div class="pr-5">
<h6>
hello
</h6>
</div>
<div class="pr-5">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptate, officiis
blanditiis suscipit rerum mollitia natus ipsam. Rerum id eligendi reiciendis dolorum
excepturi, quidem incidunt. Accusantium tenetur incidunt ratione laudantium aut.
</p>
</div>
<div>
<a href="#">
<button class="btn btn-primary">
click this
</button>
</a>
</div>
</div>
</div>
<div>
<div
class="d-flex align-items-center justify-content-between home-nav-slider-slider-text mb-3">
<div class="pr-5">
<h6>
hello
</h6>
</div>
<div class="pr-5">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptate, officiis
blanditiis suscipit rerum mollitia natus ipsam. Rerum id eligendi reiciendis dolorum
excepturi, quidem incidunt. Accusantium tenetur incidunt ratione laudantium aut.
</p>
</div>
<div>
<a href="#">
<button class="btn btn-primary">
click this
</button>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- small screen slide control -->
<div class="d-flex justify-content-end d-lg-none home-nav-slider-media-control">
<button class="btn btn-primary left "><i class="ion-ios-arrow-thin-left" aria-hidden="true"></i></button>
<button class="btn btn-primary right "><i class="ion-ios-arrow-thin-right"
aria-hidden="true"></i></button>
</div>
</div>
</section>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script src="js/extra-jquery.js"></script>
</body>
</html>【问题讨论】：
【参考方案1】：此代码部分不正确：
settings:
nextArrow: $('.home-nav-slider-media-control button.right slick-next').get().map(function (v) return v.outerHTML ).join(),
prevArrow: $('.home-nav-slider-media-control button.left slick-prev').get().map(function (v) return v.outerHTML ).join()
HTML 中没有这些组合：.home-nav-slider-media-control button.right slick-next.home-nav-slider-media-control button.left slick-prev
你不应该复制按钮的 HTML 代码，你应该指向它们。
正确代码：
settings:
nextArrow: $('.home-nav-slider-media-control button.right'),
prevArrow: $('.home-nav-slider-media-control button.left')
这是工作的jsfiddle
更多补充：
这个光滑的滑块模块似乎有很多错误，并且在调整为较小的屏幕尺寸时会杀死自定义控制按钮。它也不会生成断点事件。
我添加了一些额外的代码并更新了 jsfiddle，以确保您的测试页面在多次调整窗口大小后仍能正常工作。
它可以被优化，但至少它现在完全可以正常工作。
【讨论】：
非常感谢。我在上面做了一点修改，正确的代码部分是主要问题。你说得对，滑块在屏幕尺寸上的问题是正确的【参考方案2】：感谢谢尔盖·努德诺夫
sergey 将下一个、上一个箭头 jquery 更改为正确的代码似乎立即给了我的自定义按钮控制权。这是主要问题。
但像外科手术建议的滑块在调整屏幕大小时似乎有问题。我稍微修改了 sergeys 代码，因为我的自定义按钮在某些屏幕尺寸上消失了，这个修改似乎修复了 Maximum call stack size exceeded 错误我在屏幕尺寸上来回切换时遇到的错误，屏幕尺寸检查导致了这个错误，但不确定为什么这个小改动修复了它，如果有人能指出为什么修复它，请告诉我。 alos 将所有断点更改为 992 ，似乎效果更好。无论如何感谢手术。
换片前小屏手术代码
$('.home-nav-slider-slider').on('beforeChange', function (event, slick, currentSlide, nextSlide)
var width = $(window).width();
if(width <= 768 && !$('.home-nav-slider-media-control button.right').length)
$("#small-control").html(`
<div class="d-flex justify-content-end d-lg-none home-nav-slider-media-control">
<button class="btn btn-primary left "><i class="ion-ios-arrow-thin-left" aria-hidden="true"></i></button>
<button class="btn btn-primary right "><i class="ion-ios-arrow-thin-right"
aria-hidden="true"></i></button>
`);
$('.home-nav-slider-slider').slick('slickSetOption',
"responsive", [
breakpoint: 768,
settings:
nextArrow: $('.home-nav-slider-media-control button.right'),
prevArrow: $('.home-nav-slider-media-control button.left')
], true
);
);修改为这个
$('.home-nav-slider-slider').on('beforeChange', function (event, slick, currentSlide, nextSlide)
var width = $(window).width();
if (width <= 992 && !$('.home-nav-slider-media-control button.right').length)
$(".home-nav-slider-media-control").html('<button class="btn btn-primary left slick-arrow" style=""><i class="ion-ios-arrow-thin-left" aria-hidden="true"></i></button><button class="btn btn-primary right slick-arrow" style=""><i class="ion-ios-arrow-thin-right" aria-hidden="true"></i></button>');
$('.home-nav-slider-slider').slick('slickSetOption',
"responsive", [
breakpoint: 992,
settings:
nextArrow: $('.home-nav-slider-media-control button.right'),
prevArrow: $('.home-nav-slider-media-control button.left')
], true
);
);【讨论】：
以上是关于光滑的滑块同步 - 断点上的自定义箭头的主要内容，如果未能解决你的问题，请参考以下文章