Carousel Events

Last carousel you'll ever need

Events Carousel

<div class="container">
  <div class="events-carousel">
    <div class="events-carousel-itself">
      <div class="event-info">
        <div class="event-image">
          <img src="/img/event/1.jpg" alt="Event 1">
        </div>
        <div class="event-description">
          <h4 class="event-name text-uppercase m-b">Rock Concert &#x27;Infinity&#x27;</h4>
          <div class="event-details">
            <div class="event-place">
              <i class='fa fa-map-marker'></i>London, UK <a class="event-info-button" href="#"><i class='fa fa-info-circle'></i></a>
            </div>
            <div class="event-date"><i class='fa fa-calendar'></i>June, 19</div>
            <div class="event-time"><i class='fa fa-clock-o'></i>19:00</div>
            <div class="event-buttons">
              <a href="#" class="button button-theme button-rounded event-info-button button-shrink text-uppercase m-t">Info</a>
              <a href="#" class="button button-action button-rounded button-shrink text-uppercase m-t">Buy ticket</a>
            </div>
          </div>
        </div>
      </div>
      <div class="event-info">
        <div class="event-image">
          <img src="/img/event/2.jpg" alt="Event 2">
        </div>
        <div class="event-description">
          <h4 class="event-name text-uppercase m-b">Comic-Con</h4>
          <div class="event-details">
            <div class="event-place">
              <i class='fa fa-map-marker'></i>Mumbai, India <a class="event-info-button" href="#"><i class='fa fa-info-circle'></i></a>
            </div>
            <div class="event-date"><i class='fa fa-calendar'></i>July, 09</div>
            <div class="event-time"><i class='fa fa-clock-o'></i>4:00 am</div>
            <div class="event-buttons">
              <a href="#" class="button button-theme button-rounded event-info-button button-shrink text-uppercase m-t">Info</a>
              <a href="#" class="button button-action button-rounded button-shrink text-uppercase m-t">Buy ticket</a>
            </div>
          </div>
        </div>
      </div>
      <div class="event-info">
        <div class="event-image">
          <img src="/img/event/3.jpg" alt="Event 3">
        </div>
        <div class="event-description">
          <h4 class="event-name text-uppercase m-b">Spring Open Air Performance</h4>
          <div class="event-details">
            <div class="event-place">
              <i class='fa fa-map-marker'></i>Tokyo, Japan <a class="event-info-button" href="#"><i class='fa fa-info-circle'></i></a>
            </div>
            <div class="event-date"><i class='fa fa-calendar'></i>March, 21</div>
            <div class="event-time"><i class='fa fa-clock-o'></i>12:30 pm</div>
            <div class="event-buttons">
              <a href="#" class="button button-theme button-rounded event-info-button button-shrink text-uppercase m-t">Info</a>
              <a href="#" class="button button-action button-rounded button-shrink text-uppercase m-t">Buy ticket</a>
            </div>
          </div>
        </div>
      </div>
      <div class="event-info">
        <div class="event-image">
          <img src="/img/event/4.jpg" alt="Event 4">
        </div>
        <div class="event-description">
          <h4 class="event-name text-uppercase m-b">Downtown Jazz Jam Session</h4>
          <div class="event-details">
            <div class="event-place">
              <i class='fa fa-map-marker'></i>New-York, USA <a class="event-info-button" href="#"><i class='fa fa-info-circle'></i></a>
            </div>
            <div class="event-date"><i class='fa fa-calendar'></i>September, 21</div>
            <div class="event-time"><i class='fa fa-clock-o'></i>23:00</div>
            <div class="event-buttons">
              <a href="#" class="button button-theme button-rounded event-info-button button-shrink text-uppercase m-t">Info</a>
              <a href="#" class="button button-action button-rounded button-shrink text-uppercase m-t">Buy ticket</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>