Helpcenter +918010117117 https://help.storehippo.com/s/573db3149f0d58741f0cc63b/ms.settings/5256837ccc4abf1d39000001/57614ef64256dc6851749879-480x480.png" [email protected] https://www.facebook.com/StoreHippohttps://twitter.com/StoreHippohttps://www.linkedin.com/company/hippoinnovations/https://plus.google.com/+Storehippo/posts
B4,309-10 Spaze iTech Park, Sector 49, Sohna Road, 122001 Gurgaon India

ms.slides

The slides widget represents the collection of slides.


Variables

slides
Returns the array of items where each item represents a slide. Each item contains various details about a slide like name, image(relative URL), title, subtitle, publish, link etc.
title Returns the title of the slide.
subtitle Returns the subtitle for the slide.
url It is the url to which a slide can be used to redirect to some page i.e. slides can be used as anchors.
publish Returns '1' if the slide is published to be displayed on front-end.

Examples

Image slider (vuejs themes)

<ms-slides tag="tag_name"> 
    <div v-if="slides?.length">
        <div id="myCarousel" class="carousel carousel-dark slide arrow-default" data-bs-ride="carousel">
            <div class="carousel-inner"> 
                <div class="carousel-item item" v-for="(slide , index) of slides" :class="{'active':index == 0}" :data-bs-interval="ms.variables?.slider_scrolling_interval?ms.variables.slider_scrolling_interval:'5000'">
                    <div class="slider_image w-100" v-if="slide.image">
                        <a :href="slide.url">
                            <ms-image :src="ms.filters.image(slide.image,'1920x750')" :title="slide.title" class="w-100"></ms-image>
                        </a>
                    </div>
                </div>
            </div>
            <!-- Left and right controls --->
            <button v-if="slides.length > 1" class="carousel-control-prev arrow-btn prev w-auto ps-2" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" style="width: 3rem; height: 3rem;" aria-hidden="true"></span>
            </button>
            <button v-if="slides.length > 1" class="carousel-control-next arrow-btn next w-auto pe-2" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
                <span class="carousel-control-next-icon" style="width: 3rem; height: 3rem;" aria-hidden="true"></span>
            </button>
        </div>
    </div>
</ms-slides>

Image slider (angular themes)

<div class="slider" id="banner_slider" ms-widget="ms.slides" ms-data-tag="home_top_slides" ms-data-interval="10000">
    <div ng-if="slides.length">
        <div dir="{{direction}}"  ms-widget="ms.addon.slickCarousel" ms-data-use_theme="1" ms-data-options="{{slideoptions}}">
            <a class="items" ng-repeat="slide in slides" href="{{slide.url}}">
                <img class="img-responsive" style="width:100%;" ms-data-centercropping="{{ms.variables.slider_center_cropping}}" ms-widget="ms.responsiveImage"  ms-data-aspect-ratio="2:1" ms-data-halign="center" ms-data-valign="middle" ms-data-placeholder-html='<div class="img-place-holder bigEntrance" ><table><tr><td>Slider {{$index+1}}<br>Size 1200x520</td></tr></table></div>' ng-src="{{::slide.image|image:'800x400'}}" alt="{{slide.title}}" ms-data-fit="cover" />
            </a>
        </div>
    </div>
</div>