aiforge/templates/explore/repo_orgtop.tmpl

<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/6.8.0/swiper-bundle.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/6.8.0/swiper-bundle.min.css" rel="stylesheet">
<style>
    .repos--orgtop {
        margin-top: -1px;
    }

    .repos--orgtop .ui.card {
        box-shadow: none;
        border: 1px solid #DFE9F0;
    }

    .repos--orgtop .ui.card .content {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .repos--orgtop .swiper-pagination {
        position: relative;
        bottom: 0;
    }
</style>

<div class="repos--seach repos--orgtop">
    <div class="ui container">
        <h3>这些优秀的组织正在使用：</h3>
        <!-- Swiper -->
        <div class="ui container swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="ui card">
                        <a class="content" href="https://git.openi.org.cn/OpenI">
                            <img class="ui avatar image"
                                src="https://git.openi.org.cn/user/avatar/OpenI/-1"> OpenI 启智社区
                        </a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="ui card">
                        <a class="content" href="https://git.openi.org.cn/OpenI">
                            <img class="ui avatar image"
                                src="https://git.openi.org.cn/repo-avatars/992-68df2c96f5f2cd9366c5de577cda0d44">
                            TensorLayer
                        </a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="ui card">
                        <a class="content" href="https://git.openi.org.cn/OpenI">
                            <img class="ui avatar image"
                                src="https://git.openi.org.cn/user/avatar/PCL-Platform.Intelligence/-1">
                            PCL-Platform.Intelligence
                        </a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="ui card">
                        <a class="content" href="https://git.openi.org.cn/OpenI">
                            <img class="ui avatar image" src="https://git.openi.org.cn/user/avatar/BAAI/-1">
                            BAAI 北京智源人工智能研究院
                        </a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="ui card">
                        <a class="content" href="https://git.openi.org.cn/OpenI">
                            <img class="ui avatar image"
                                src="https://git.openi.org.cn/user/avatar/OpenModelZoo/-1"> OpenModelZoo
                        </a>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="ui card">
                        <a class="content" href="https://git.openi.org.cn/OpenI">
                            <img class="ui avatar image"
                                src="https://git.openi.org.cn/user/avatar/PCL_EngineClub/-1"> PCL_EngineClub
                        </a>
                    </div>
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
</div>
<!-- Initialize Swiper -->

<script>
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 5,
        spaceBetween: 30,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    });
</script>