<img src="abc.png" />
    
call to replace anchor tags contains '/admin' in href

Adding Sliders

You can use Slides on your StoreHippo site to promote your products and make your store more attractive. Slides are images that appear across your store's homepage and keep changing at short intervals. The slides can be updated as per the requirement of your store. For example, you can have a slide displaying your latest collection or promotional offers.

To add a new Slide, follow the steps described below:

1. Click on Site.

 


2. Click on Slides.
 


3. Click on Add New.
 


4. Fill all the necessary details in the form in order to add slides:
 
  • Image- Click on Choose File to upload image an to be shown in slide.

  • Title / Subtitle- Give an appropriate Title / Subtitle if needed.

  • Description- Enter a description as needed.

  • URL- Mention the URL of the page you would want your customers to be redirected to, when they click on the slide.

  • Tags- Input some words which can be used as tags to find particular slide.

  • Publish- Select / Unselect checkbox to Show / Hide slide respectively on website.

  • Sort Order- Give a numerical position to slide to make it appear in that particular sequence if there are more than one slide.
     

5. Click on Save to save your slide in site admin list.
You will be able to see the slide added on top of your slides list and also visible on your store homepage.
 

Use this widget to provides object along with all the details related to that slides(title,subtitile, images,url).
  
<div class="slider home-slider hidden-xs hidden-ms"  ms-widget="ms.slides" >
    <div ng-if="loading">       
            <p class="spinner" class="text-center">
                <i class="fa fa-cog text-center fa-spin fa-5x"></i>
            </p>        
    </div>
    <div ng-if="!loading" class="carousel slide" id="home-carousel" data-ride="carousel">
        <div class="carousel-inner">
            <div ng-repeat="slide in slides" class="item" ng-class="{active: $index==0}">
                <a href="{{slide.url}}">
                    <img class="image" ms-data-aspect-ratio='1920:635' ng-src="{{slide.image|image:'2048x2048'}}" alt="{{slide.title}}" >
                </a>
            </div>
        </div>
    </div>
</div>​

 
Generally, simple bootstrap carousel is used as shown in the above example. Slides array i.e. slides contains image object which can be used with image filters to get image url. 

2018-09-05T07:33:11.386Z