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]

You can watch here on how we created this with SithasoIONIC7 Wireframe App.

 

[Mashiane]

To encourage learning... this is the full representation of the HTML of the swiper component.

<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>