js+html怎么实现【自定义轮播图动画】效果？

html：slide_item下面的内容是一样的

css：

.slides_container {
	overflow:hidden;
  margin-bottom: 0.3125rem;
}
.pagination {
	display: flex;
	justify-content: center;
}
.pagination li {
	cursor:pointer;
	overflow:hidden;
	display:inline-block;
	width:0.275rem;
  margin:0 0.025rem;
}
.pagination li a {
	margin:0 auto;
	display:block;
	width: 0.075rem;
	height: 0.075rem;
	border-radius:0.0375rem;
	background:#fff;
	font-size:0
}
.pagination li.current a,.pagination li:hover a {
	background:#00aeff;
}
.pagination li.current a{
	width:0.25rem;
}
.slide_item{
  width:4.925rem;
}

js：

// 轮播切换
(function () {
    $(function () {
        $('#slides').slides({
            preload: true,
            preloadImage: 'img/loading.gif',
            play: 5000,
            pause: 2500,
            hoverPause: true,
            animationStart: function () {
                $('.caption').animate({
                    bottom: -35
                }, 100);
            },
            animationComplete: function (current) {
                $('.caption').animate({
                    bottom: 0
                }, 200);
                if (window.console && console.log) {
                    console.log(current);
                };
            }
        });
    });
})()

    希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~