I'm trying to mimmick the behaviour seen on this page:

I'm using Ken Wheeler's Slick Slider, as the original page uses that.

A slider is used to view the motorbike at different angles. This is a standard slider. However you also have the option to choose the color theme of the motorbike using the dots beneath the slider. Selecting a different color seems to load an alternate slider with a different set of images, with the same angle of the bike still showing.

How would one achieve this using the Slick Slider?

Here's the HTML I'm using:

<div class="main-slider">
    <div class="slider">
        <div class="slide"> 
            <img src=".png"/>
        </div>
        <div class="slide"> 
            <img src=".png"/>
        </div>
        <div class="slide"> 
            <img src=".png"/>
        </div>
        <div class="slide"> 
            <img src=".png"/>
        </div>
    </div>
    <div class='dots'><i></i><i></i></div>
    <div class="slider">
        <div class="slide"> 
            <img src=".png"/>
        </div>
        <div class="slide"> 
            <img src=".png"/>
        </div>
        <div class="slide"> 
            <img src=".png"/>
        </div>
        <div class="slide"> 
            <img src=".png"/>
        </div>
    </div>
    <div class='dots'><i></i><i></i></div>
</div>

And here's the JS:

        jQuery('.slider').slick({
            infinite: true,
            slidesToShow: 1,
            slidesToScroll: 1,
            fade: true,
            speed: 1,
            // adaptiveHeight: true
        });

CSS:

.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; }

At the moment I'm activating both sliders but they're on top of each other.