ms.slides

The slides widget represents the collection of slides.

Variables
Examples

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>