html部分
<div class="card-header-button" style="display:flex;align-items:center;width:auto;">
<!-- 左箭头 -->
<div id="above" style="display:inline-block;margin-right:20px;width:50px;height:50px;">
<img style="width:100%;height:100%" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fd00.paixin.com%2Fthumbs%2F1742172%2F29037053%2Fstaff_1024.jpg&refer=http%3A%2F%2Fd00.paixin.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668129528&t=aac1a36749407e0743782530d036f68f">
</div>
<!-- 右箭头 -->
<div id="next" style="display:inline-block;width:50px;height:50px;">
<img style="width:100%;height:100%" src="https://img2.baidu.com/it/u=2037455611,2358656486&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" >
</div>
</div>
<div class="layui-carousel" id="test10">
<div carousel-item>
<div>
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/02559d1c4dae406391072a495b1481cf~tplv-k3u1fbpfcp-zoom-1.image">
</div>
<div>
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/338091b99cd74ddfa0e3af0d7321f3de~tplv-k3u1fbpfcp-zoom-1.image">
</div>
<div>
<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7f1d2dd5e98e4a5a82376a0d39f9cb57~tplv-k3u1fbpfcp-zoom-1.image">
</div>
</div>
</div>
js部分
layui.use('carousel', function () {
var carousel = layui.carousel;
//图片轮播
let ins = carousel.render({
elem: '#test10'
, width: '400px'
, height: '400px'
, arrow: 'none' //始终显示箭头
, autoplay: false //是否自动切换
, indicator: 'none' //隐藏掉下方的小圆点
});
//上一张
$('#above').click(function () {
ins.slide('sub');
});
//下一张
$('#next').click(function () {
ins.slide('add');
});
});
审查元素可以看到---> add sub 是根据这一块拿到的
点击自己写的哪两个箭头就相当于点击了layui原本上面有的箭头。
具体样式: