Javascript 单击下一个图像时渲染下一个图像？

当用户单击下一个图像时，我希望下一个图像将取代carousal中的当前图像。有办法做到这一点吗

我对jCarouselLite的配置如下：

var carousalConfig={
btnNext:“.corousal导航右箭头”，
btnPrev:“.corousal导航左箭头”，
btnGo:[]，
垂直：假，
可见：2，
起点：0，
后置：功能（a）{
a、 css（{opacity:.35}）；
a、 css（{opacity:1}）；
}
$（'.carousal coontainer'）.jCarouselLite（carousalConfig）；

同样的html

<div class="carousal-coontainer">
    <ul>
        <li><img src="image/1.jpg"></li>
        <li><img src="image/2.jpg"></li>
        <li><img src="image/3.jpg"></li>
    </ul>
</div>
<div>
    <div class="carousal_left_arrow"> <span class="left-arrow"> </span></div>
    <div class="carousal_right_arrow"> <span class="right-arrow"></span> </div>
</div>    

jCarouselLite有一个名为“go”的事件，您可以在其中指定要转到的幻灯片，或者（如果使用时没有数字）将转到下一张幻灯片。在slider options中，我们可以向需要接收单击事件的元素添加一个类，然后在初始化后将单击事件附加到li元素

附带说明：jCarouselLite很旧，无法与jQuery3.0+一起使用。有许多免费的替代方案提供相同的功能

• -jQuery插件
• -无依赖关系
• -jQuery插件或无依赖项

var carousalConfig={
btnNext:“.default.next”，
btnPrev:“.default.prev”，
btnGo:[]，
可见：2，
起点：0，
后置：功能（a）{
//向下一个元素添加一个类，以便我们可以附加单击事件
a、 next（）.css({
不透明度：.50
}).addClass（“模糊”）；
//remove类以删除事件附件
a、 prev（）.css({
不透明度：1
}).removeClass（“模糊”）；
}
};
$（文档）.ready（函数（）{
let carousel=$（'.custom container'）；
旋转木马。jCarouselLite（旋转木马配置）；
//Carousel已初始化，因此将click事件处理程序附加到“.fuzzle”类
carousel.on（“单击”，“模糊”，函数（）{
旋转木马触发器（“go”）；
})
})；

#jcl demo.carousel{
边框：1px实心#巴巴巴；
边界半径：10px；
背景色：鬼影白；
浮动：左；
左侧填充：10px；
最大宽度：100%；
溢出：隐藏；
/*需要渲染而不闪烁*/
/*位置：相对位置；
可见性：隐藏；
左：-5000px*/
}
/*基于图像的旋转木马内容的样式。仅宽度和高度是必需的*/
#jcl演示.carousel>ul>li>img{
宽度：150px；
高度：118px；
垂直对齐：中间对齐；
/*可选的*/
保证金：10px 10px 10px 0；
边界半径：5px；
}
/*基于文本的旋转木马内容的样式设置。只有宽度和高度是必需的*/
#jcl演示.carousel>ul>li>p{
宽度：130px；
高度：98px；
保证金：10px 10px 10px 0；
边框：1px实心#808080；
边界半径：5px；
线高：正常；
背景色：#fff；
填充：10px；
}
/*上一个和下一个定位按钮的样式*/
#jcl演示a.prev，
#jcl演示a.下一步，
#jcl演示a.go{
显示：块；
宽度：26px；
高度：30px；
线高：1；
背景色：#333333；
颜色：鬼白色；
文字装饰：无；
字体系列：Arial，无衬线；
字体大小：25px；
边界半径：8px；
浮动：左；
}
#jcl demo a.prev.disabled，
#jcl演示a.next.disabled，
#jcl演示a.prev.已禁用：悬停，
#jcl演示a.next.disabled:悬停{
背景色：#8d8d8d；
游标：默认值；
}
#jcl演示a.go.highlight{
背景色：#dedede；
颜色：#000；
}
#jcl演示a.prev{
利润率：10px0px0；
文本缩进：7px；
}
#jcl演示a.next{
利润率：10px0；
文本缩进：10px；
}
#jcl演示a.prev:悬停，
#jcl演示a.下一步：悬停，
#jcl演示a.go:悬停{
背景色：#666666；
}
/*用于外部控件、滑块、小部件、mid等的附加旋转木马样式*/
#jcl演示。外部控制按钮，
#jcl demo.ImageSlideText按钮{
保证金：5px5px0；
}
#jcl demo.externalControl a.next，
#jcl demo.externalControl a.prev，
#jcl演示。外部控制a.go，
#jcl demo.ImageSliderText a.next，
#jcl demo.imageSliderExt a.prev，
#jcl demo.imageSliderExt a.go{
边距：0 5px 0 0；
填充：7px 5px 0 5px；
字体大小：15px；
文本对齐：居中；
边界半径：3px；
}
#jcl demo.widget img{
光标：指针；
}
#jcl演示{
左边距：50像素；
宽度：400px；
高度：300px；
}
#jcl演示。垂直{
左边距：170px；
}
#jcl demo.imageSlider.carousel>ul>li>img，
#jcl演示.imageSliderText.carousel>ul>li>img{
宽度：400px；
高度：300px；
}
#jcl demo.imageSlider.carousel>ul>li>p，
#jcl演示.imageSliderText.carousel>ul>li>p{
宽度：380px；
高度：280px；
}
/*其他常见样式*/
.清楚{
明确：两者皆有；
}

你也可以提供HTML吗？你可以发布一个完整的例子，包括编译后的HTML和CSS。你提供的越多，调试问题就越容易。另外，你可以提供一个指向jCarouselLite CDN的链接吗？@KalimahApps，我已经更新了HTML和CDN。好的。我终于可以得到一个完整的例子了。所以在你的问题中，你认为是否要滑动旋转木马，使单击的图像移动一步，并使其相邻图像也移动？@KalimahApps我想做的是，单击下一个图像（在本例中为模糊图像）时，旋转木马应将图像向前移动一步