ms.slides

The slides widget represents the collection of slides.


Variables

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

Examples

Bootstrap Slider example
<div ms-widget="ms.slides">
      <div class="carousel slide" id="myslider" data-ride="carousel">
        <div class="carousel-inner">
            <div ng-repeat="slide in slides" ng-class="{active: $index==0}">
                <a href="">
                    <img ng-src="//:0" alt="">
                </a>
                <div class="carousel-caption ">
                    <h3></h3>
                    <p></p>
                </div>
            </div>
        </div>

        <a href="#myslider" data-slide="prev" >
            <i class="fa fa-chevron-left home-carousel-icon-right"></i>
        </a>
        <a href="#myslider" data-slide="next" >
            <i class="fa fa-chevron-right home-carousel-icon-left"></i>
        </a>
    </div>
</div>
Basic Slider
<div ms-widget="ms.slides">
       <a ng-animate="slide" href="
"> <img ng-src="//:0" alt=""> </a>
           <div>
               <a ng-click="prev()">Previous</a> &nbsp; | &nbsp;
               <a ng-click="next()">Next</a>  
          </div>
    </div>
</div>
Carousel Slider
<div ms-widget="ms.slides" id="home-carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div data-ng-repeat="slide in slides" data-ng-class="{active:$index==0}" class="item">
            <a href="">
                <img class="" data-ng-src="//:0" alt="" title="">
            </a>
            <div class="carousel-caption">
                <h3></h3>
                <p></p>
            </div>
        </div>
    </div>
    <!-- Controls -->
    <a class="left arrow-right" href="#home-carousel" data-slide="prev"><i class="fa fa-chevron-left primary"></i></a>
    <a class="right arrow-left" href="#home-carousel" data-slide="next"><i class="fa fa-chevron-right  primary"></i></a>
</div>
Basic Slider for Touch-screen devices
<div ms-widget="ms.slides">
       <a ng-animate="slide" href="
"> <img ng-src="//:0" alt=""> </a>
           <div>
               <a ng-swipe-right="previous()">Previous</a> &nbsp; | &nbsp;
               <a ng-swipe-left="next()">Next</a>  
          </div>
    </div>
</div>