carbon-components/html/carousel/carousel.html

Carbon Components is a component library for IBM Cloud

<!-- 
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<div class="bx--type-omega">Carousel Title</div>
<div class="bx--carousel" data-carousel>
  <button class="bx--carousel__btn" data-scroll-left>
    <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
      <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
    </svg>
  </button>
  <div class="bx--carousel-container">
    <div class="bx--filmstrip" tabindex="-1">
        <button class="bx--carousel__item" data-modal-target="#carousel-lightbox" data-carousel-item-index="0">
          <img src="http://via.placeholder.com/256x144?text&#x3D;/0">
        </button>
        <button class="bx--carousel__item" data-modal-target="#carousel-lightbox" data-carousel-item-index="1">
          <img src="http://via.placeholder.com/256x144?text&#x3D;1">
        </button>
        <button class="bx--carousel__item" data-modal-target="#carousel-lightbox" data-carousel-item-index="2">
          <img src="http://via.placeholder.com/256x144?text&#x3D;2">
        </button>
        <button class="bx--carousel__item" data-modal-target="#carousel-lightbox" data-carousel-item-index="3">
          <img src="http://via.placeholder.com/256x144?text&#x3D;3">
        </button>
        <button class="bx--carousel__item" data-modal-target="#carousel-lightbox" data-carousel-item-index="4">
          <img src="http://via.placeholder.com/256x144?text&#x3D;4">
        </button>
        <button class="bx--carousel__item" data-modal-target="#carousel-lightbox" data-carousel-item-index="5">
          <img src="http://via.placeholder.com/256x144?text&#x3D;5">
        </button>
    </div>
  </div>
  <button class="bx--carousel__btn" data-scroll-right>
    <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
      <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
    </svg>
  </button>
</div>

<div id="carousel-lightbox" class="bx--modal" data-modal>
  <div class="bx--lightbox" data-lightbox data-lightbox-index="0">
    <div class="bx--lightbox__main">
      <button class="bx--lightbox__btn" data-scroll-left>
        <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
          <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
        </svg>
      </button>
        <img src="http://via.placeholder.com/1056x594?text&#x3D;/0" class="bx--lightbox__item">
        <img src="http://via.placeholder.com/1056x594?text&#x3D;1" class="bx--lightbox__item">
        <img src="http://via.placeholder.com/1056x594?text&#x3D;2" class="bx--lightbox__item">
        <img src="http://via.placeholder.com/1056x594?text&#x3D;3" class="bx--lightbox__item">
        <img src="http://via.placeholder.com/1056x594?text&#x3D;4" class="bx--lightbox__item">
        <img src="http://via.placeholder.com/1056x594?text&#x3D;5" class="bx--lightbox__item">
      <button class="bx--lightbox__btn" data-scroll-right>
        <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
          <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
        </svg>
      </button>
    </div>
  </div>
</div>