Share My Creation [Web][SithasoIONIC7] Instagram Stories using SwiperJS

Hi Fam....

Wishing you a prosperous 2024!

Demo on Vercel, open using your mobile device.



Get source code + Abstract Designer Guide from your SI7 Download, later today.

NB: The ADG gives you a step by step instructions on how to create the app using the Abstract Designer Custom Views.

With Love!
 

Mashiane

Expert
Licensed User
Longtime User
To encourage learning... this is the full representation of the HTML of the swiper component.

B4X:
<div id="swiper1" class="swiper ion-padding" style="width:100%">
    <div id="swiper1slides" class="swiper-wrapper">
        <div id="swiperslide1" class="swiper-slide"><ion-avatar id="avatar1"
                style="border-color: rgb(34, 156, 226); border-style: solid; border-width: 2px; margin-bottom: 15px; margin-right: 15px; padding: 2px; overflow: visible; position: relative;"><img
                    id="avatar1_img" alt=""
                    src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;w=128&amp;h=128&amp;q=60&amp;facepad=1.5"><ion-badge
                    id="avatar1_badge" mode="ios"
                    style="aspect-ratio:1/1;border-radius:100%;display:flex;align-items:center;justify-content:center;background-color:#229ce2;bottom:-10px;right:-10px;position:absolute"><ion-icon
                        id="avatar1_badge_icon" name="add"></ion-icon></ion-badge></ion-avatar></div>
        <div id="swiperslide2" class="swiper-slide"><ion-avatar id="avatar3"
                style="border:2px solid #97cdec;padding:2px"><img id="avatar3_img" alt=""
                    src="https://images.unsplash.com/photo-1568967729548-e3dbad3d37e0?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;w=128&amp;h=128&amp;q=60&amp;facepad=1.5"></ion-avatar>
        </div>
        <div id="swiperslide3" class="swiper-slide"><ion-avatar id="avatar4"
                style="border:2px solid #97cdec;padding:2px"><img id="avatar4_img" alt=""
                    src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;w=128&amp;h=128&amp;q=60&amp;facepad=1.5"></ion-avatar>
        </div>
        <div id="swiperslide4" class="swiper-slide"><ion-avatar id="avatar2"
                style="border:2px solid #97cdec;padding:2px"><img id="avatar2_img" alt=""
                    src="https://images.unsplash.com/photo-1557296387-5358ad7997bb?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;w=128&amp;h=128&amp;q=60&amp;facepad=1.5"></ion-avatar>
        </div>
        <div id="swiperslide5" class="swiper-slide"><ion-avatar id="avatar5"
                style="border:2px solid #97cdec;padding:2px"><img id="avatar5_img" alt=""
                    src="https://images.unsplash.com/photo-1489424731084-a5d8b219a5bb?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;w=128&amp;h=128&amp;q=60&amp;facepad=1.5"></ion-avatar>
        </div>
        <div id="swiperslide6" class="swiper-slide"><ion-avatar id="avatar6"
                style="border:2px solid #97cdec;padding:2px"><img id="avatar6_img" alt=""
                    src="https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;w=128&amp;h=128&amp;q=60&amp;facepad=1.5"></ion-avatar>
        </div>
    </div>
</div>
 
Cookies are required to use this site. You must accept them to continue using the site. Learn more…