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

Hi Fam....

Wishing you a prosperous 2024!

Demo on Vercel, open using your mobile device.

SI7InstagramStories.gif


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!
 
Click to expand...
Mashiane

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>
 
You must log in or register to reply here.
Top