layui-点击左右箭头实现轮播效果-箭头在上方显示

186 阅读1分钟

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原本上面有的箭头。

image.png

具体样式:

image.png