Я пытаюсь реализовать слайдер Slick несколько раз на одной странице, причем каждый экземпляр использует «Slider Syncing». Теперь проблема у меня в том, что с моим кодом ниже, синхронизируются текст регулирует как с ползунками:Позволяет нескольким классам CSS использовать одну и ту же функцию JS (Slick Carousel)
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./slick/slick.css">
<link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
</head>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.person {
width: 50%;
margin: 0px auto;
}
.person img {
width: 100%;
margin:auto;
}
.slider {
width: 90%;
margin: 20px auto;
}
.slick-slide {
margin: 0px 20px;
opacity: 0.5;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-center {
opacity: 1;
}
}
</style>
<body>
<section class="person">
<div><img src="img/people/jobs.jpg"></div>
</section>
<section class="regular slider">
<div><img src="img/1.jpg"></div>
<div><img src="img/2.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/4.jpg"></div>
<div><img src="img/5.jpg"></div>
<div><img src="img/6.jpg"></div>
<div><img src="img/7.jpg"></div>
<div><img src="img/8.jpg"></div>
<div><img src="img/9.jpg"></div>
</section>
<section class="slider-for slider">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</section>
<section class="regular slider">
<div><img src="img/1.jpg"></div>
<div><img src="img/2.jpg"></div>
<div><img src="img/3.jpg"></div>
<div><img src="img/4.jpg"></div>
<div><img src="img/5.jpg"></div>
<div><img src="img/6.jpg"></div>
<div><img src="img/7.jpg"></div>
<div><img src="img/8.jpg"></div>
<div><img src="img/9.jpg"></div>
</section>
<section class="slider-for slider">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</section>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).on('ready', function() {
$(".regular").slick({
dots: false,
infinite: true,
centerMode: true,
centerPadding: '40px',
slidesToShow: 5,
slidesToScroll: 1,
lazyLoad: 'ondemand',
asNavFor: '.slider-for',
focusOnSelect:true
});
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.regular'
});
});
</script>
</body>
</html>Теперь я понимаю ошибку в вышеперечисленное, потому что он использует тот же Функция Javascript влияет на «разные» разделы и, таким образом, вызывает ошибку. Одним из способов исправить я могу думать о том, чтобы иметь новую функцию для каждого класса, т.е .:
$('.regular1').slick({ ... }); -> <section class="regular1">
$('.slider-for1').slick({ ... }); -> <section class="slider-for1">
$('.regular2').slick({ ... }); -> <section class="regular2">
$('.slider-for2').slick({ ... }); -> <section class="slider-for2">
$('.regular3').slick({ ... }); -> <section class="regular3">
$('.slider-for3').slick({ ... }); -> <section class="slider-for3">
etc
Мой вопрос: Есть ли способ, чтобы сделать это более эффективно. Так, например, путем включения какой-то переменной в имени класса, то есть:
$('.regular'.$a).slick({ ... }); -> <section class="regular1">
$('.slider-for'.$a).slick({ ... }); -> <section class="slider-for1">
Это не огромная проблема только с 2 ползунков на странице, но я намерен иметь 10-х ползунков на одной странице будучи автогенерированным скриптом PHP, и я действительно не хочу, чтобы копировать fucntion снова и снова с другим именем класса, он неэффективен.
Для справки, я использую эту карусель: http://kenwheeler.github.io/slick/
Благодарность
Итай
Спасибо Rav. Я использовал функцию .each и получил ее работу с карусели, однако, я в тупике, как получить бит «asNavFor» для перекрестной ссылки, так как они являются двумя разными для циклов. $ (".regular") .each (функция (индекс) { $ (это) .slick ({ ... asNavFor: '.slider-за', ... });} ); $ (".slider-for") .each (функция (индекс) { $ (this) .slick ({ ... }); }); Я пробовал использовать индекс и переименовывать классы, но не понял этого. –
Если вы хотите, то выберите объект конфигурации со всеми данными в {...}, затем вызовите один цикл с помощью '$ (this) .slick (config);'. Затем добавьте атрибут и вызовите второй цикл таким же образом. – RaV
Например 'конфигурации = { точки: ложь, бесконечное: истинно, centerMode: истинно, centerPadding: '40px', slidesToShow: 5, slidesToScroll: 1, LazyLoad: 'OnDemand', focusOnSelect: истинные } 'и после того, как вы выполните' config.asNavFor = '.slider-for'' – RaV