Slick Slider с цветными образцами - несколько ползунков? ⇐ Javascript

[Anonymous]

Я пытаюсь воспользоваться поведением, которое можно увидеть на этой странице: https://www.mvagusta.com/gb/en/product/rush/1000образно Slick Slider Кена Уилера, как используется исходная страница. Это стандартный ползунок. Однако у вас также есть возможность выбрать цветовую тему мотоцикла, используя точки под ползунком. Выбор другого цвета, кажется, загружает альтернативный ползунок с другим набором изображений, с тем же углом велосипеда, который все еще отображается. p>
Вот HTML, который я использую: < /p>

Код: Выделить всё

[i]

[img]https://www.mvagusta.com/media/e875a67a-402a-4332-a803-ac2d4e4c1665/6.png[/img]

[img]https://www.mvagusta.com/media/83f15669-5cf4-46d8-8749-e9a91b514ba5/7.png[/img]

[img]https://www.mvagusta.com/media/2cb1b3c6-820c-4fa5-9482-e626e407db46/8.png[/img]


[/i][i][/i]


[i]

[img]https://www.mvagusta.com/media/38986e96-48aa-485b-8ff2-d2c0c3336893/6.png[/img]

[img]https://www.mvagusta.com/media/5f54b370-b99f-4695-9856-2740273910c9/7.png[/img]

[img]https://www.mvagusta.com/media/534e9081-7ba9-47ce-85ad-a7f6c3d953c6/8.png[/img]


[/i][i][/i]

< /code>
А вот JS: < /p>
        jQuery('.slider').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
fade: true,
speed: 1,
// adaptiveHeight: true
});
< /code>
css: < /p>
.dots { display: block; text-align: center; width: 100%; height: 50px; }
.dots i {
display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 10px; cursor: pointer; background-color: #ff0000;
}
.dots i:nth-of-type(1) { background-color: #000; }

На данный момент я активирую обе ползунки, но они друг на друга.

Подробнее здесь: https://stackoverflow.com/questions/794 ... le-sliders