Проблема со Slickslider

Question

Помогите пожалуйста, проблема в том что когда добавляю на одну страницу один и тот же слайдер но с разными классами и через массив на клик определенного блока вызываю именно тот слайдер что мне нужно, то у меня проблема возникает с кнопками. Сама проблема в том что на одном слайдере у меня работает только кнопка влево, а на втором слайдере только кнопка вправо. Но заметил такую штуку что делается клон кнопок которые попадают в одну группу (см. фото).

Вот код.

 $('.slider-nav').slick({
    autoplay: false,
    infinite: true,
    swipe: true,
    touchMove: true,
    // arrows: true,
    appendArrows: $('.arrows-block'),
});
$('.slider-bottom').slick({
    autoplay: false,
    infinite: true,
    swipe: true,
    touchMove: true,
    // arrows: true,
    appendArrows: $('.arrows-block'),
});
 
 
 
 let homeDesktop = [
        { target: '#Roadmap', class: '.slider-bottom', slide: 2, color: "#RoadmapBcg", button: ".close-roadmap" },
        { target: '#mission', class: '.slider-bottom', slide: 0, color: "#missionBcg", button: ".close-roadmap" },
    ]
    
    let homeDisplay = [
        { target: '#welcomePage', class: '.slider-nav', slide: 0, button: ".close-roadmap" },
        { target: '#socialPage', class: '.slider-nav', slide: 2, button: ".close-roadmap" },
    ]

homeDesktop.forEach(function (elem) {
        document.querySelector(elem.target).addEventListener('click', function () {
            document.querySelector('.slider-nav').style.display = 'none';
            gsap.to('.slick-slider', { autoAlpha: 1 })
            gsap.to(elem.class, { scale: 1 })
            $('.slider-bottom').slick('slickSetOption', {
                speed: 0
            });
            $('.slider-bottom').slick('slickGoTo', elem.slide);
            $('.slider-bottom').slick('slickSetOption', {
                speed: 400
            });
        })
        
        
homeDisplay.forEach(function (elem) {
        document.querySelector(elem.target).addEventListener('click', function () {
            document.querySelector('.slider-bottom').style.display = 'none';
            $('.slider-nav').slick('slickSetOption', {
                speed: 0
            });
            $('.slider-nav').slick('slickGoTo', elem.slide);
            $('.slider-nav').slick('slickSetOption', {
                speed: 400
            });
       
        })

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="https://dfrnc.com/logo.png" type="image/x-icon">
    <link href="http://fonts.cdnfonts.com/css/gotham" rel="stylesheet">

    <meta http-equiv='cache-control' content='no-cache'>
    <meta http-equiv='expires' content='0'>
    <meta http-equiv='pragma' content='no-cache'>
    <title>Vyshyvanka</title>
</head>

<body>
  
    <div class="arrows-block"></div>
    <div class="slider-all">
        <div class="block-slide">
            <div class="slider slider-nav">
               <div class="slider1"></div>
                     <div class="slider2"></div>
                           <div class="slider3"></div>
               </div>
               </div>
               </div>
               
               
        <div class="block-slide">
            <div class="slider slider-bottom">
               <div class="slider1"></div>
                     <div class="slider2"></div>
                           <div class="slider3"></div>
        </div>
    </div>
</body>

</html>

БЛОГ НА HUSL

Проблема со Slickslider

Ответы (0 шт):