cronapp-framework-mobile-js/components/templates/slider.template.html

Javascript library for CronApp's projects

<div class="crn-slider display-ion-slider" id="crn-slider-${COMPONENTID}">
  <ion-slide-box class="" auto-play="false" slide-interval="2000" does-continue="false">

    <ion-slide xattr-theme="positive-bg" id="crn-slider-item-${RANDOM}-1" data-component="crn-slider-item" class="positive-bg active crn-slider-item" data-container="true" data-replace="true">
      <img alt="Placehold" src="node_modules/cronapp-framework-mobile-js/img/placehold-300x200.png" class="component-holder" style="object-fit: cover;" xattr-position="" width="100%" height="100%" object-fit="object-fit: cover;" data-component="crn-image" id="crn-image-${RANDOM}">
      <h2 class="text-center top-50" data-component="crn-label" data-container="true" data-replace="true" horizontal-text-position="text-center" vertical-text-position="top-50">SLIDE 1</h2>
    </ion-slide>

    <ion-slide xattr-theme="royal-bg" id="crn-slider-item-${RANDOM}-2" data-component="crn-slider-item" class="royal-bg crn-slider-item" data-container="true" data-replace="true">
      <img alt="Placehold" src="node_modules/cronapp-framework-mobile-js/img/placehold-300x200.png" class="component-holder" style="object-fit: cover;" xattr-position="" width="100%" height="100%" object-fit="object-fit: cover;" data-component="crn-image" id="crn-image-${RANDOM}">
      <h2 class="text-center top-50" data-component="crn-label" data-container="true" data-replace="true" horizontal-text-position="text-center" vertical-text-position="top-50">SLIDE 2</h2>
    </ion-slide>

    <ion-slide xattr-theme="balanced-bg" id="crn-slider-item-${RANDOM}-3" data-component="crn-slider-item" class="balanced-bg crn-slider-item" data-container="true" data-replace="true">
      <img alt="Placehold" src="node_modules/cronapp-framework-mobile-js/img/placehold-300x200.png" class="component-holder" style="object-fit: cover;" xattr-position="" width="100%" height="100%" object-fit="object-fit: cover;" data-component="crn-image" id="crn-image-${RANDOM}">
      <h2 class="text-center top-50" data-component="crn-label" data-container="true" data-replace="true" horizontal-text-position="text-center" vertical-text-position="top-50">SLIDE 3</h2>
    </ion-slide>

  </ion-slide-box>
</div>