ms.slides

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>