Синхронизация скользящего слайдера - пользовательская стрелка на контрольных точках
Так что у меня есть этот мульти слайдер, где я использую скользкую синхронизацию слайдера, чтобы этот слайдер работал. Все отлично работает, кроме случаев, когда я хочу использовать другие / мои собственные кнопки в качестве следующих предыдущих стрелок на экранах мобильных устройств (768 и ниже). Я правильно настроил пользовательский интерфейс, показывая правильные кнопки. Но мои настройки не распознают мои пользовательские кнопки как скользкую стрелку на мобильном телефоне.
Обычный экран
Экран мобильного телефона(кнопки не работают как стрелки)
**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" alt="">
</div>
<div class="home-nav-slider-image-holder">
<img src="https://www.dropbox.com/s/5x8p2z5cvip5u38/chicago.jpg?dl=1" alt="">
</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, чтобы убедиться, что ваша тестовая страница продолжает работать после изменения размеров нескольких окон.
Это может быть оптимизировано, но, по крайней мере, теперь оно работает совершенно корректно.
Спасибо Сергей Нуднов
изменив следующую, предыдущую стрелку jquery на правильный код с помощью sergey, я сразу же получил контроль над своими пользовательскими кнопками. Это было главной проблемой.
Но, как предполагал хирург, ползунок, кажется, глючит при изменении размеров экранов. Я немного изменил код sergeys из-за того, что мои пользовательские кнопки исчезали на экране определенного размера, эта модификация, похоже, исправляет ошибку " Максимальный размер стека вызовов превысил", которую я получал при переходе назад и вперед по размеру экрана, проверка размера экрана вызвала эту ошибку, но не Конечно, почему это маленькое изменение исправило это, дайте мне знать, если кто-то может указать, почему это исправило это. Алос изменил все контрольные точки на 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
);
}
});