画像切り替えについて

http://kenpicopico.starfree.jp/kenpicopico_diary/929/
http://kenpicopico.site/?p=929

こちらのサイトの表示方法で複数枚の写真を切り替えたいのですが
どうすれば良いかわかる方がいましたらヒントを教えていただけるとありがたいです。

https://www.net-marketing.co.jp

こちらのサイトの画像のスライド方法です！

ソースコードを見てみたところ以下のようになっていました。
コードを見てみたところ上のようになっていました。
どうすれば実装できるかを教えていただきたいです。

scriptは読めるのですが、動作しないため何が足りないかわからずに質問させてもらいました。

<article class="topWhat mb150 col-12 col-sm-12 col-md-12 col-lg-12 ">
                        <div class="topWhat__bg--img">
                         <ul>
                            <li style="z-index: 975; width: 100vw;"><span style="width: 1604px; transform: translate(0px, -122.166px);"></span></li>
                            <li style="display: list-item; z-index: 976; width: 99.878%;"><span style="width: 1604px; transform: translate(0px, -122.166px);"></span></li>
                            <li style="display: list-item; z-index: 974; width: 100%;"><span style="width: 1604px; transform: translate(0px, -122.166px);"></span></li>
                         </ul>
                        </div>
                　　</article>

$(function() {
   
	//what's nM slider
	function nmAnimation() {
		var animeID = 0;
		
		var zindex = 0;
		function mediaSlideMove(){
			zindex++;
			var $elm = $('.topWhat .topWhat__bg--img li').eq(animeID);
			$elm.show().css({'z-index': zindex});
			gsap.fromTo($elm, 1.2, { width : '0%'}, { width: '100%',  ease: "power4.inOut", onComplete: function(){
				
			}});
		}
		function mediaSlideSet(){
			if(animeID >= 2) {
				animeID = 0;
			} else {
				animeID++;
			}
			mediaSlideMove();
		}
		reasonInterval = setInterval(mediaSlideSet,3500);
	}
});

.topWhat {
    padding-bottom: 73px; 
    background-color: rgba(255, 255, 0, 0);
}
.topWhat .gridContents {
      padding-right: 20px; 
}
.topWhat .topWhat__bg--img {
      height: 480px;
}
.topWhat .topWhat__bg--img ul{
    height: 400px;
}

.topWhat .topWhat__bg--img ul li{
    height: 400px;
}

.topWhat .topWhat__bg--img ul li > span{
    height: 400px;
}
.topWhat .topWhat__bg--img ul li:nth-child(1) span {
        background-image: url("/image/sl1.jpg"); 
        background-size: cover;
        background-position: center center;
}
.topWhat .topWhat__bg--img ul li:nth-child(2) span {
        background-image: url("/image/sl2.jpg");
        background-size: cover;
        background-position: center center;
}
.topWhat .topWhat__bg--img ul li:nth-child(3) span {
        background-image: url("/image/sl3.jpg");
        background-size: cover;
        background-position: center center; 
}
.topWhat .topWhat__title {
      top: 30px;
      font-size: 30px; 
}