Как сделать два slick slider на одном сайте?
Есть два слайдера, в данный момент при нажатии одной из стрелок работают одновременно, как мне это исправить? Классы меня не хочу)
$('.my-slider').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-b',
variableWidth: true,
focusOnSelect: true,
});
$('.slider-b').slick({
arrows: false,
fade: true,
slidesToShow: 1,
asNavFor: '.my-slider',
});
$('.my-slider').on('afterChange', function (event, slick, currentSlide, nextSlide) {
var totalPages = Math.ceil(slick.slideCount / slick.originalSettings.slidesToScroll);
var currentPage = Math.ceil((currentSlide + 1) / slick.originalSettings.slidesToScroll);
counter.innerText = currentPage + '/' + totalPages;
});/* normalize */
* {
min-height: 0;
min-width: 0;
}
html,
body {
width: 100%;
height: 100%;
}
*,
*::after,
*::before {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Atmospheric';
color: var(--white);
}
a{
text-decoration: none;
}
li{
list-style: none;
}
.wrapper{
min-height: 100%;
display: flex;
flex-direction: column;
}
.my-container{
max-width: 1236px;
display: flex;
flex-direction: column;
margin: auto;
}
.main{
flex: 1 1 auto;
}
/* slider */
.slider{
position: relative;
}
.slick-list{
overflow: hidden;
}
.slick-track {
display: flex;
}
.slick-slide {
width: 114px;
}
.slick-arrow{
position: absolute;
top: 93px;
z-index: 10;
font-size: 0;
width: 32px;
height: 32px;
border: 0;
}
.slick-prev{
left: 74px;
}
.slick-next{
right: 74px;
}
/* */
.container{
width: 333px;
height: 100%;
margin: auto;
}
.sec-slider{
background: url('../img/games.jpg') 35% 50% no-repeat;
height: 812px;
width: 100%;
padding-top: 82px;
}
.sec-slider__flex{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.sec-slider__h2{
margin-bottom: 20px;
}
.my-slider,
.my-slider2{
max-width: 100%;
width: 302px;
margin-bottom: 29px;
}
.slider-b,
.slider-b2{
max-width: 100%;
width: 302px;
text-align: center;
margin-bottom: 50px;
}
.slider-b__img{
display: flex;
justify-content: center;
margin-bottom: 30px;
}
.slider-b__img img{
width: 144px;
height: 144px;
}
.slider-b__name {
margin-bottom: 20px;
font-size: 18px;
}
.slider-b__info{
font-family: 'Times New Roman', Times, serif;
text-align: center;
margin-bottom: 95px;
}
.slider-b__socials{
display: flex;
justify-content: center;
align-items: center;
}
.slider-b__socials img{
margin-right: 30px;
}
.slider-b__socials img:last-child{
margin-right: 0px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>INJFanZone</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.css"
/>
<link rel="stylesheet" href="style/style.css" />
</head>
<body>
<div class="wrapper">
<section class="sec-slider games">
<div class="container">
<div class="sec-slider__flex">
<h2 class="sec-slider__h2">Games</h2>
<div class="slider-b">
<div class="slider-b-item">
<div class="slider-b__img">
<img src="img/blaze.svg" alt="" />
</div>
<p class="slider-b__name">Ninja Blaze</p>
<p class="slider-b__info">
Ninja Blaze is a blockchain-enabled gaming platform that
revolutionizes the marketplace and provides complete
transparency and integrity for players.
</p>
<div class="slider-b__socials">
<img src="img/twittre.svg" alt="" />
<img src="img/ds.svg" alt="" />
</div>
</div>
<div class="slider-b-item">
<div class="slider-b-item">
<div class="slider-b__img">
<img src="img/blaze.svg" alt="" />
</div>
<p class="slider-b__name">Ninja Blaze</p>
<p class="slider-b__info">
Ninja Blaze is a blockchain-enabled gaming platform that
revolutionizes the marketplace and provides complete
transparency and integrity for players.
</p>
<div class="slider-b__socials">
<img src="img/twittre.svg" alt="" />
<img src="img/ds.svg" alt="" />
</div>
</div>
</div>
<div class="slider-b-item">
<div class="slider-b-item">
<div class="slider-b__img">
<img src="img/blaze.svg" alt="" />
</div>
<p class="slider-b__name">Ninja Blaze</p>
<p class="slider-b__info">
Ninja Blaze is a blockchain-enabled gaming platform that
revolutionizes the marketplace and provides complete
transparency and integrity for players.
</p>
<div class="slider-b__socials">
<img src="img/twittre.svg" alt="" />
<img src="img/ds.svg" alt="" />
</div>
</div>
</div>
<div class="slider-b-item">
<div class="slider-b-item">
<div class="slider-b__img">
<img src="img/blaze.svg" alt="" />
</div>
<p class="slider-b__name">Ninja Blaze</p>
<p class="slider-b__info">
Ninja Blaze is a blockchain-enabled gaming platform that
revolutionizes the marketplace and provides complete
transparency and integrity for players.
</p>
<div class="slider-b__socials">
<img src="img/twittre.svg" alt="" />
<img src="img/ds.svg" alt="" />
</div>
</div>
</div>
<div class="slider-b-item">
<div class="slider-b-item">
<div class="slider-b__img">
<img src="img/blaze.svg" alt="" />
</div>
<p class="slider-b__name">Ninja Blaze</p>
<p class="slider-b__info">
Ninja Blaze is a blockchain-enabled gaming platform that
revolutionizes the marketplace and provides complete
transparency and integrity for players.
</p>
<div class="slider-b__socials">
<img src="img/twittre.svg" alt="" />
<img src="img/ds.svg" alt="" />
</div>
</div>
</div>
<div class="slider-b-item">
<div class="slider-b-item">
<div class="slider-b__img">
<img src="img/blaze.svg" alt="" />
</div>
<p class="slider-b__name">Ninja Blaze</p>
<p class="slider-b__info">
Ninja Blaze is a blockchain-enabled gaming platform that
revolutionizes the marketplace and provides complete
transparency and integrity for players.
</p>
<div class="slider-b__socials">
<img src="img/twittre.svg" alt="" />
<img src="img/ds.svg" alt="" />
</div>
</div>
</div>
<div class="slider-b-item">
<div class="slider-b-item">
<div class="slider-b__img">
<img src="img/blaze.svg" alt="" />
</div>
<p class="slider-b__name">Ninja Blaze</p>
<p class="slider-b__info">
Ninja Blaze is a blockchain-enabled gaming platform that
revolutionizes the marketplace and provides complete
transparency and integrity for players.
</p>
<div class="slider-b__socials">
<img src="img/twittre.svg" alt="" />
<img src="img/ds.svg" alt="" />
</div>
</div>
</div>
<div class="slider-b-item">
<div class="slider-b-item">
<div class="slider-b__img">
<img src="img/blaze.svg" alt="" />
</div>
<p class="slider-b__name">Ninja Blaze</p>
<p class="slider-b__info">
Ninja Blaze is a blockchain-enabled gaming platform that
revolutionizes the marketplace and provides complete
transparency and integrity for players.
</p>
<div class="slider-b__socials">
<img src="img/twittre.svg" alt="" />
<img src="img/ds.svg" alt="" />
</div>
</div>
</div>
<div class="slider-b-item">
<div class="slider-b-item">
<div class="slider-b__img">
<img src="img/blaze.svg" alt="" />
</div>
<p class="slider-b__name">Ninja Blaze</p>
<p class="slider-b__info">
Ninja Blaze is a blockchain-enabled gaming platform that
revolutionizes the marketplace and provides complete
transparency and integrity for players.
</p>
<div class="slider-b__socials">
<img src="img/twittre.svg" alt="" />
<img src="img/ds.svg" alt="" />
</div>
</div>
</div>
</div>
<div class="my-slider">
<div class="my-slider-item">
<img src="img/blaze.svg" alt="" />
</div>
<div class="my-slider-item">
<img src="img/octos-xenzia.svg" alt="" />
</div>
<div class="my-slider-item">
<img src="img/gf.svg" alt="" />
</div>
<div class="my-slider-item">
<img src="img/blaze.svg" alt="" />
</div>
<div class="my-slider-item">
<img src="img/octos-xenzia.svg" alt="" />
</div>
<div class="my-slider-item">
<img src="img/gf.svg" alt="" />
</div>
<div class="my-slider-item">
<img src="img/blaze.svg" alt="" />
</div>
<div class="my-slider-item">
<img src="img/octos-xenzia.svg" alt="" />
</div>
<div class="my-slider-item">
<img src="img/gf.svg" alt="" />
</div>
</div>
<output class="counter"></output>
</div>
</div>
</section>
<section class="sec-slider nft">
<div class="container">
<div class="sec-slider__flex">
<h2 class="sec-slider__h2">NFTs</h2>
<div class="slider-b">
<div class="slider-b-item">
<div class="slider-b__img">
<img src="img/astroud-b.svg" alt="" />
</div>
<p class="slider-b__name">Ninja Blaze</p>
<p class="slider-b__info">
Ninja Blaze is a blockchain-enabled gaming platform that
revolutionizes the marketplace and provides complete
transparency and integrity for players.
</p>
<div class="slider-b__socials">
<img src="img/twittre.svg" alt="" />
<img src="img/ds.svg" alt="" />
</div>
</div>
<div class="slider-b-item">
<div class="slider-b-item">
<div class="slider-b__img">
<img src="img/astroud-b.svg" alt="" />
</div>
<p class="slider-b__name">Ninja Blaze</p>
<p class="slider-b__info">
Ninja Blaze is a blockchain-enabled gaming platform that
revolutionizes the marketplace and provides complete
transparency and integrity for players.
</p>
<div class="slider-b__socials">
<img src="img/twittre.svg" alt="" />
<img src="img/ds.svg" alt="" />
</div>
</div>
</div>
<div class="slider-b-item">
<div class="slider-b-item">
<div class="slider-b__img">
<img src="img/astroud-b.svg" alt="" />
</div>
<p class="slider-b__name">Ninja Blaze</p>
<p class="slider-b__info">
Ninja Blaze is a blockchain-enabled gaming platform that
revolutionizes the marketplace and provides complete
transparency and integrity for players.
</p>
<div class="slider-b__socials">
<img src="img/twittre.svg" alt="" />
<img src="img/ds.svg" alt="" />
</div>
</div>
</div>
<div class="slider-b-item">
<div class="slider-b-item">
<div class="slider-b__img">
<img src="img/astroud-b.svg" alt="" />
</div>
<p class="slider-b__name">Ninja Blaze</p>
<p class="slider-b__info">
Ninja Blaze is a blockchain-enabled gaming platform that
revolutionizes the marketplace and provides complete
transparency and integrity for players.
</p>
<div class="slider-b__socials">
<img src="img/twittre.svg" alt="" />
<img src="img/ds.svg" alt="" />
</div>
</div>
</div>
<div class="slider-b-item">
<div class="slider-b-item">
<div class="slider-b__img">
<img src="img/astroud-b.svg" alt="" />
</div>
<p class="slider-b__name">Ninja Blaze</p>
<p class="slider-b__info">
Ninja Blaze is a blockchain-enabled gaming platform that
revolutionizes the marketplace and provides complete
transparency and integrity for players.
</p>
<div class="slider-b__socials">
<img src="img/twittre.svg" alt="" />
<img src="img/ds.svg" alt="" />
</div>
</div>
</div>
<div class="slider-b-item">
<div class="slider-b-item">
<div class="slider-b__img">
<img src="img/astroud-b.svg" alt="" />
</div>
<p class="slider-b__name">Ninja Blaze</p>
<p class="slider-b__info">
Ninja Blaze is a blockchain-enabled gaming platform that
revolutionizes the marketplace and provides complete
transparency and integrity for players.
</p>
<div class="slider-b__socials">
<img src="img/twittre.svg" alt="" />
<img src="img/ds.svg" alt="" />
</div>
</div>
</div>
<div class="slider-b-item">
<div class="slider-b-item">
<div class="slider-b__img">
<img src="img/astroud-b.svg" alt="" />
</div>
<p class="slider-b__name">Ninja Blaze</p>
<p class="slider-b__info">
Ninja Blaze is a blockchain-enabled gaming platform that
revolutionizes the marketplace and provides complete
transparency and integrity for players.
</p>
<div class="slider-b__socials">
<img src="img/twittre.svg" alt="" />
<img src="img/ds.svg" alt="" />
</div>
</div>
</div>
<div class="slider-b-item">
<div class="slider-b-item">
<div class="slider-b__img">
<img src="img/astroud-b.svg" alt="" />
</div>
<p class="slider-b__name">Ninja Blaze</p>
<p class="slider-b__info">
Ninja Blaze is a blockchain-enabled gaming platform that
revolutionizes the marketplace and provides complete
transparency and integrity for players.
</p>
<div class="slider-b__socials">
<img src="img/twittre.svg" alt="" />
<img src="img/ds.svg" alt="" />
</div>
</div>
</div>
<div class="slider-b-item">
<div class="slider-b-item">
<div class="slider-b__img">
<img src="img/astroud-b.svg" alt="" />
</div>
<p class="slider-b__name">Ninja Blaze</p>
<p class="slider-b__info">
Ninja Blaze is a blockchain-enabled gaming platform that
revolutionizes the marketplace and provides complete
transparency and integrity for players.
</p>
<div class="slider-b__socials">
<img src="img/twittre.svg" alt="" />
<img src="img/ds.svg" alt="" />
</div>
</div>
</div>
</div>
<div class="my-slider">
<div class="my-slider-item">
<img src="img/astroud.svg" alt="" />
</div>
<div class="my-slider-item">
<img src="img/bisy.svg" alt="" />
</div>
<div class="my-slider-item">
<img src="img/orbits.svg" alt="" />
</div>
<div class="my-slider-item">
<img src="img/astroud.svg" alt="" />
</div>
<div class="my-slider-item">
<img src="img/bisy.svg" alt="" />
</div>
<div class="my-slider-item">
<img src="img/orbits.svg" alt="" />
</div>
<div class="my-slider-item">
<img src="img/astroud.svg" alt="" />
</div>
<div class="my-slider-item">
<img src="img/bisy.svg" alt="" />
</div>
<div class="my-slider-item">
<img src="img/orbits.svg" alt="" />
</div>
</div>
<output class="counter"></output>
</div>
</div>
</section>
</main>
<!-- footer -->
<footer></footer>
</div>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>Ответы (2 шт):
Автор решения: Beneviento
→ Ссылка
Чтобы слайдеры работали независимо друг от друга и не синхронизировались, нужно изменить настройки asNavFor и удалить его из одного из слайдеров. У тебя в коде есть два слайдера, .my-slider и .slider-b, которые синхронизированы с помощью asNavFor. Чтобы отменить синхронизацию, нужно удалить asNavFor из одного из них.
Вот как будет выглядеть код после удаления asNavFor из .my-slider:
$('.my-slider').slick({
slidesToShow: 3,
slidesToScroll: 1,
variableWidth: true,
focusOnSelect: true,
});
$('.slider-b').slick({
arrows: false,
fade: true,
slidesToShow: 1,
});
Теперь .my-slider и .slider-b будут работать независимо друг от друга, и при нажатии стрелок они не будут взаимодействовать друг с другом.
Автор решения: Beneviento
→ Ссылка
Тогда оставляй asNavFor только для одного из них.
$('.my-slider').slick({
slidesToShow: 3,
slidesToScroll: 1,
variableWidth: true,
focusOnSelect: true,
asNavFor: '.slider-b', // Оставьте синхронизацию только с .slider-b
});
$('.my-slider2').slick({
slidesToShow: 3,
slidesToScroll: 1,
variableWidth: true,
focusOnSelect: true,
// Не указывайте asNavFor здесь, чтобы отвязать от синхронизации
});
$('.slider-b').slick({
arrows: false,
fade: true,
slidesToShow: 1,
asNavFor: '.my-slider', // Сохраните синхронизацию только с .my-slider
});