swiper轮播切换滑动滚动条自动播放BANNER使用layui选项卡tab效果

原创

已于 2023-08-01 21:05:30 修改 · 870 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#layui #数学建模 #java

于 2023-06-13 13:06:58 首次发布

此代码示例展示了如何使用Swiper库创建一个轮播图，并与layui的选项卡组件结合，实现当轮播图切换时选项卡同步高亮，以及点击选项卡时轮播图相应切换的效果。Swiper配置了autoplay和loop属性以实现自动播放和循环播放功能。

swiper轮播切换滑动滚动条自动播放BANNER使用layui选项卡tab效果

Swiper演示 - Swiper中文网

事件API：slideChangeTransitionStart(swiper)_Swiper参数选项

layui:https://layui.dev/docs/2.8/tab/#brief

开始

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.8.6/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<style>
    .top_tab{
        text-align:justify;
        text-align-last:justify;
    }
</style>
<!--https://tool.4xseo.com/a/20.html-->
<div class="layui-tab layui-tab-brief">
    <ul class="layui-tab-title top_tab">
        <li id="layui_this_0" class="layui-this tab_top" index_val="1">标签1</li>
        <li id="layui_this_1" class="tab_top" index_val