3枚の画像が順番に切り替わっていくメインビジュアルをSlick.jsで作成！ソースコードも紹介！

<div class="slider">
	<div class="slider-wrapper">
		<div id="js-slider1" class="slider__list">
			<div class="slider__img">
				<img src="#" alt="スライダー1">
			</div>
			<div class="slider__img">
				<img src="#" alt="スライダー2">
			</div>
			<div class="slider__img">
				<img src="#" alt="スライダー3">
			</div>
		</div>
		<div id="js-slider2" class="slider__list">
			<div class="slider__img">
				<img src="#" alt="スライダー1">
			</div>
			<div class="slider__img">
				<img src="#" alt="スライダー2">
			</div>
			<div class="slider__img">
				<img src="#" alt="スライダー3">
			</div>
		</div>
		<div id="js-slider3" class="slider__list">
			<div class="slider__img">
				<img src="#" alt="スライダー1">
			</div>
			<div class="slider__img">
				<img src="#" alt="スライダー2">
			</div>
			<div class="slider__img">
				<img src="#" alt="スライダー3">
			</div>
		</div>
	</div>
</div>

.slider {
    width: 100%;
    height: 60vw;
    max-height: 450px;
    position: relative;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
}
.slider-wrapper {
    position: absolute;
    left: 50%;
    top: 0;
    width: 4000px;
    margin-left: -2000px;
    font-size: 0;
    opacity: 1;
    transition: all 1s cubic-bezier(.25, .46, .45, .94);
}
.slider__list {
    display: inline-block;
    width: 75vw;
    margin-left: 5px;
    margin-right: 5px;
}
.slider__img {
    position: relative;
    float: left;
}
.slider__img::before {
    content: "";
    display: block;
    padding-top: 75%;
}
.slider__img img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

function threeFadeSlider(selector, slideDelay, initialSlide) {
    // 説明1
    jQuery(selector).on('init', function () {
        // 説明2
        const jQueryself = jQuery(this);
        setTimeout(function () {
            jQueryself.slick('slickSetOption', 'autoplay', true, true);
        }, slideDelay);
    });
    // 説明3
    jQuery(selector).slick({
        arrow: false,
        autoplay: true,
        autoplaySpeed: 3000,
        fade: true,
        prevArrow: false,
        nextArrow: false,
        pauseOnFocus: false,
        pauseOnHover: false,
        pauseOnDotsHover: false,
        speed: 1000,
        initialSlide: initialSlide,
    });
}
// 説明4
threeFadeSlider('#js-slider1', 2000, 2);
threeFadeSlider('#js-slider2', 1000, 0);
threeFadeSlider('#js-slider3', 0, 1);

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>