svelte + Framework7 + Swiper 轮播图

顶部的轮播图，添加自动切换，找的我好辛苦，免得忘记了

<script>
    import {
        Page,
        Swiper,
        SwiperSlide,
    } from "framework7-svelte";
    // import Swiper core and required modules
    import SwiperCore, { Autoplay, Pagination } from "swiper/core";
    // install Swiper modules
    SwiperCore.use([Autoplay, Pagination]);

    export let f7router;
</script>

<Page>
    <Swiper
        class="app-swiper app-swiper-fade"
        pagination={{
            dynamicBullets: true,
        }}
        autoplay={{
            delay: 3000,
            disableOnInteraction: true,
        }}
        effect="fade"
        style="padding: 0px;height: 180px;"
    >
        <SwiperSlide style="background-image: url(./images/home/1.png)" />
        <SwiperSlide style="background-image: url(./images/home/2.png)" />
        <SwiperSlide style="background-image: url(./images/home/3.png)" />
        <SwiperSlide style="background-image: url(./images/home/4.png)" />
    </Swiper>
</Page>

/* Swipers Demo */

.app-swiper {
    width: 100%;
    height: 100%;
}

.app-swiper .swiper-slide,
.app-swiper-multiple .swiper-slide {
    font-size: 25px;
    font-weight: 300;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    background: #fff;
    color: #000;
}

.app-swiper-multiple .swiper-slide {
    box-sizing: border-box;
    border: 1px solid #ccc;
    background: #fff;
}

.app-swiper-multiple {
    margin: 0px 0 35px;
    font-size: 18px;
    height: 120px;
}

.app-swiper-multiple.app-swiper-multiple-auto .swiper-slide {
    width: 85%;
}

.app-swiper-multiple.app-swiper-multiple-auto .swiper-slide:nth-child(2n) {
    width: 70%;
}

.app-swiper-multiple.app-swiper-multiple-auto .swiper-slide:nth-child(3n) {
    width: 30%;
}

.app-swiper-custom {
    height: 100%;
}

.app-swiper-custom .swiper-container {
    background: #000;
    height: 100%;
}

.app-swiper-custom .swiper-slide {
    background-size: cover;
    background-position: center;
}

.app-swiper-custom .swiper-pagination .swiper-pagination-bullet {
    cursor: pointer;
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0);
    opacity: 1;
    border-radius: 0;
    transition: 200ms;
    position: relative;
    transform: scale(0.9);
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.app-swiper-custom .swiper-pagination .swiper-pagination-bullet-active {
    z-index: 1;
    border: 1px solid #007aff;
    transform: scale(1.4);
}

.app-swiper-cube {
    width: 80%;
    height: 70%;
    top: 15%;
}

.app-swiper-coverflow {
    height: 60%;
    top: 20%;
}

.app-swiper-coverflow .swiper-slide {
    width: 65%;
}

.app-swiper-cube .swiper-slide,
.app-swiper-coverflow .swiper-slide {
    background-size: cover;
    color: #fff;
    -webkit-backface-visibility: hidden;
}

.app-swiper-fade .swiper-slide {
    background-size: cover;
    background-position: center;
}

.app-swiper-gallery-top {
    height: 70%;
}

.app-swiper-gallery-thumbs {
    margin-top: 10px;
    height: 20%;
    height: -webkit-calc(30% - 20px);
    height: -moz-calc(30% - 20px);
    height: -ms-calc(30% - 20px);
    height: calc(30% - 20px);
}

.app-swiper-gallery-thumbs .swiper-slide {
    width: 25%;
}

.app-swiper-gallery-thumbs .swiper-slide-pic {
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.35;
    transition: 300ms;
}

.app-swiper-gallery-thumbs .swiper-slide-thumb-active .swiper-slide-pic {
    opacity: 1;
}

.app-swiper-gallery-top .swiper-slide,
.app-swiper-gallery-thumbs .swiper-slide-pic {
    background-size: cover;
    background-position: center;
}

.app-swiper-parallax {
    height: 100%;
}

.app-swiper-parallax .swiper-parallax-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 130%;
    height: 100%;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center;
}

.app-swiper-parallax .swiper-slide {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 40px 60px;
    color: #fff;
}

.app-swiper-parallax .swiper-slide-title {
    font-size: 41px;
    font-weight: 300;
}

.app-swiper-parallax .swiper-slide-subtitle {
    font-size: 21px;
}

.app-swiper-parallax .swiper-slide-text {
    font-size: 14px;
    max-width: 400px;
    line-height: 1.3;
}

.app-swiper-lazy {
    height: 100%;
}

.app-swiper-lazy .swiper-slide {
    position: relative;
}

.app-swiper-lazy .swiper-slide img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

样式是使用的官方demo样式，按需修改

几个文档地址

f7官方让自己去swiper上查= = 跳转链接

这个是swiper的所有demo类型，可以根据需要查找，里面支持的框架基本都有了  链接跳转

最后一个是swiper 针对 svelte的文档 跳转链接