jQuery轮播左右多项展示滑动

<div class="tabshow">
	<div class="wrapbox">
		<ul style="display:flex; align-items:center;">
			<li>
				<div class="t">2021第33届深圳国际医疗器械展览会</div>
				<p>我国是人口大国，行业属于国家重点支持的战略新兴产业，发展前景广阔。伴随着经济的快速发展，我国医疗器械行业增长迅速，与国际市场相比</p>
				<a href="">查看详情</a>
			</li>
			<li>
				<div class="t">2021第33届深圳国际医疗器械展览会</div>
				<p>我国是人口大国，行业属于国家重点支持的战略新兴产业，发展前景广阔。伴随着经济的快速发展，我国医疗器械行业增长迅速，与国际市场相比</p>
				<a href="">查看详情</a>
			</li>
			... ...
		</ul>
	</div>
	<div class="prev">
		// 左滑箭头
		<img src="../img/jiantou-l.png" />
	</div>
	<div class="next">
		// 右滑箭头
		<img src="../img/jiantou-r.png" />
	</div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
// 滑动轮播
var i = 0;
// 获取ul的宽度
var ulWidth = $(".wrapbox ul").width();
// 当前可见宽度
var dgWdith = $(".tabshow").width();
// 点击移动
$(".prev").click(function(){
	i--;
	if(i<0){
		i = 1;
	}
	$(".wrapbox ul").stop(true,false).animate({left:-i*dgWdith+"px"},500);
});
$(".next").click(function(){
	i++;
	if(i>1){
		i = 0;
	}
	$(".wrapbox ul").stop(true,false).animate({left:-i*dgWdith+"px"},500);
});