Dynamic slides in a swiper,

Wappler General Need Help
1

Good evening,
Does anyone have documentation regarding dynamic slides in a swiper, ideally I would like the images to be in the background so that I can put divs on top. The divs will not move when changing slides.

I want to do this because I want to scroll through desktop images and I want to put the booking information above

Thanks in advance

2

You might have solved it Morgan but here is a suggestion in case you haven't...

I suppose you work on your fullscreen swiper as explained here:

So, include your swiper component inside a d-block with position-fixed class
Fow example:

<div class="container-fluid py-3 position-relative">
    <div class="d-block position-fixed top-0 start-0 w-100">
        <div is="dmx-swiper" id="swiper1" style="height: 100vh !important; " autoplay="true">
            <!-- your slides here (static or dynamic) -->
            <div class="swiper-slide"></div>
        </div>
    </div>
    <!-- here you add the content that you need to go on top of the swiper inside a container, section or whaever your structure requires... -->
    <div class="container">
         
    </div>
    <!-- OR -->
    <section>

    </section>
</div>
3 
 <style>
        #viewDesc {
            position: absolute;
            /* Positionne la div de façon absolue */
            top: 0;
            /* Place la div en haut de la page */
            left: 0;
            /* Aligne la div sur la gauche */
            width: 100%;
            /* Prend toute la largeur */
            z-index: 10;
            /* Assure que cette div est au-dessus de swiper */
            pointer-events: none;
            /* Permet de cliquer/interagir avec swiper derrière */
        }

        #viewDesc .col {
            pointer-events: auto;
            /* Permet l'interaction avec le contenu de viewDesc */
        }

        .swiper-slide {
            background-size: content;
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>
</head>

<body is="dmx-app" id="view">
    <dmx-query-manager id="query1"></dmx-query-manager>
    <dmx-serverconnect id="scSelectionSalle" url="dmxConnect/api/Entreprise/View/SelectionSalle.php" dmx-param:id="query.id" dmx-param:key="key"></dmx-serverconnect>

    <!-- Contenu positionné au-dessus -->
    <div class="row vh-100" id="viewDesc">
        <div class="col"></div>
        <div class="col-4">
            <div class="row">
                <div class="col mt-3 bg-white bg-opacity-50">
                    <div class="row">
                        <div class="col">
                            <h1>{{scSelectionSalle.data.querySelection.intituleSalles}}</h1>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <p>{{descriptionSallesPhotos}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Swiper -->
    <div is="dmx-swiper" id="swiper1" style="height: 100vh;" autoplay="true" dmx-bind:slides="scSelectionSalle.data.queryPhotos" grab-cursor="true" keyboard="true" observer="true" free-mode="true" mousewheel="true" loop="true" free-mode-sticky="true" hash-navigation="true" watch-state="true" pagination="bullets" navigation="true" scrollbar="true" speed="1000">
        <div class="swiper-slide vh-100" dmx-style:background-image="'url(&quot;' + urlSallesPhotos + '&quot;)'">

        </div>
    </div>

    <script src="bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>

</html>
1 Like