当前位置:网站首页>Swiper.js implémente l'effet de superposition de la rotation

Swiper.js implémente l'effet de superposition de la rotation

2021-11-25 17:28:47 Peng Shiyu

Insérer la description de l'image ici

Documentation:

En lignedemo:

Mise en œuvre du code source

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>swiper Superposition d'un diagramme de rotation </title>
</head>

<body>
    <link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />



    <style> body {
       display: flex; align-items: center; justify-content: center; } /* Conteneur extérieur */ .swiper {
       width: 600px; height: 300px; } /* Élément de rotation */ .swiper .swiper-slide {
       width: 80%; height: 100%; font-size: 32px; font-weight: 500; color: #ffffff; /* Texte centré verticalement */ display: flex; justify-content: center; align-items: center; } /*  Source de couleur :https://color.uisdc.com/ */ .swiper .swiper-slide-1 {
       background-color: #425066; } .swiper .swiper-slide-2 {
       background-color: #8d4bbb; } .swiper .swiper-slide-3 {
       background-color: #9d2933; } .swiper .swiper-slide-4 {
       background-color: #003371; } .swiper .swiper-slide-5 {
       background-color: #4c8dae; } </style>


    <div class="swiper">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide swiper-slide-1">1</div>
            <div class="swiper-slide swiper-slide-2">2</div>
            <div class="swiper-slide swiper-slide-3">3</div>
            <div class="swiper-slide swiper-slide-4">4</div>
            <div class="swiper-slide swiper-slide-5">5</div>
        </div>
        <!-- If we need pagination -->
        <div class="swiper-pagination"></div>

        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- If we need scrollbar -->
        <div class="swiper-scrollbar"></div>
    </div>


    <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

    <script> const swiper = new Swiper('.swiper', {
       effect: 'coverflow', loop: true, grabCursor: true, centeredSlides: true, slidesPerView: 'auto', coverflowEffect: {
       rotate: 0, stretch: 0, depth: 500, modifier: 1, slideShadows: false, }, pagination: {
       el: '.swiper-pagination', }, navigation: {
       nextEl: '.swiper-button-prev', prevEl: '.swiper-button-next', }, }); //  Écouter les événements de changement  swiper.on('slideChange', (e) => {
       console.log(e.realIndex); }); </script>
</body>

</html>

RÉFÉRENCES:
swiper Superposition de l'effet de rotation (Y compris le code source) - Cas

版权声明
本文为[Peng Shiyu]所创,转载请带上原文链接,感谢
https://chowdera.com/2021/11/20211125172652887h.html

随机推荐