jQuery轮播图像滑块（平滑淡入/淡出）自动滚动不起作用

Question

我有一个图片滑块脚本。所有的工作，但幻灯片切换太急剧，我不能添加任何平滑，只有我没有做，结果是零。也无法在移动/平板电脑设备上使用所有效果。请帮助升级脚本。谢谢。让力量与你同在！

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

<style>
.wbsn-animate-slider-opacity {animation:opacity-slider 2s;-ms-animation:opacity-slider 2s;-webkit-animation:opacity-slider 2s;-moz-animation:opacity-slider 2s;-o-animation:opacity-slider 2s;}
.wbsn-display-container{position:relative;}
.wbsn-content{max-width:980px;margin:auto;}
.wbsn-animate-bottom{position:relative;animation:animatebottom 0.4s;}
@keyframes animatebottom{from{bottom:-300px;opacity:0;} to{bottom:0;opacity:1;}}
@keyframes opacity-slider{from{opacity:0;} to{opacity:1;}}
</style>


<p></p><div class="wbsn-display-container wbsn-content wbsn-animate-bottom" style="background-color:#C48B48!important;box-shadow:0 0 3px #7B2F04;">
<img class="Slides" src="img/sliding/00.jpg" style="width:100%;border:0px;background-color:#C48B48!important;"><img class="Slides" src="img/sliding/01.jpg" style="width:100%;border:0px;background-color:#C48B48!important;">
<img class="Slides" src="img/sliding/02.jpg" style="width:100%;border:0px;background-color:#C48B48!important;"><img class="Slides" src="img/sliding/03.jpg" style="width:100%;border:0px;background-color:#C48B48!important;">
<img class="Slides" src="img/sliding/04.jpg" style="width:100%;border:0px;background-color:#C48B48!important;"><img class="Slides" src="img/sliding/05.jpg" style="width:100%;border:0px;background-color:#C48B48!important;">
<img class="Slides" src="img/sliding/06.jpg" style="width:100%;border:0px;background-color:#C48B48!important;"><img class="Slides" src="img/sliding/07.jpg" style="width:100%;border:0px;background-color:#C48B48!important;">
<img class="Slides" src="img/sliding/08.jpg" style="width:100%;border:0px;background-color:#C48B48!important;"></div>


<script type="text/javascript">
var myIndex = 0; carousel();

function carousel() { var i;
var x = document.getElementsByClassName("Slides");
for (i = 0; i < x.length; i++) {
   x[i].style.display = "none";
   x[i].classList.remove("wbsn-animate-slider-opacity");
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
x[myIndex-1].classList.add("wbsn-animate-slider-opacity");
setTimeout(carousel, 5000); // Change every 5 sec
}</script>

我的JSFiddle：https://jsfiddle.net/1mxz6nzw