cronapp-framework-js/components/templates/carousel.template.html

Javascript library for CronApp's projects

<div class="carousel slide" data-ride="carousel" id="carousel-${RANDOM}">
  <div class="carousel-inner" role="listbox">
    <div class="item active" data-component="crn-carousel-item" id="crn-carousel-item-1">
      <img data-component="crn-image" alt="First Slide" style="margin: 0 auto; object-fit: cover;" xattr-position=""
        object-fit="object-fit: cover;" src="node_modules/cronapp-framework-js/img/placehold-900x500.png">
      <div class="carousel-caption">
        <h1 data-component="crn-title" class="text-center" title-position="text-center">First Slide</h1>
        <h2 data-component="crn-subtitle" class="text-center" subtitle-position="text-center">Subtitle</h2>
      </div>
    </div>

    <div class="item" data-component="crn-carousel-item" id="crn-carousel-item-2">
      <img data-component="crn-image" alt="First Slide" style="margin: 0 auto; object-fit: cover;" xattr-position=""
        object-fit="object-fit: cover;" src="node_modules/cronapp-framework-js/img/placehold-900x500.png">
      <div class="carousel-caption">
        <h1 data-component="crn-title" class="text-center" title-position="text-center">Second Slide</h1>
        <h2 data-component="crn-subtitle" class="text-center" subtitle-position="text-center">Subtitle</h2>
      </div>
    </div>

    <div class="item" data-component="crn-carousel-item" id="crn-carousel-item-3">
      <img data-component="crn-image" alt="First Slide" style="margin: 0 auto; object-fit: cover;" xattr-position=""
        object-fit="object-fit: cover;" src="node_modules/cronapp-framework-js/img/placehold-900x500.png">
      <div class="carousel-caption">
        <h1 data-component="crn-title" class="text-center" title-position="text-center">Third Slide</h1>
        <h2 data-component="crn-subtitle" class="text-center" subtitle-position="text-center">Subtitle</h2>
      </div>
    </div>
  </div>
  <ol class="carousel-indicators" id="carousel-indicators">
    <li class="active"></li>
    <li></li>
    <li></li>
  </ol>

  
  <a style="width: 100px;" href="#carousel-${RANDOM}" class="left carousel-control" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  
  
  <a href="#carousel-${RANDOM}" class="right carousel-control" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>