aelbore

<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,200,300,600,700' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<button id="toggleButton">Toggle</button>

<ul class="timeline" id="timeline">
  <li class="li complete">
    <div class="timestamp">
      <span class="author">Abhi Sharma</span>
      <span class="date">11/15/2014<span>
    </div>

aelbore

Horizontal Timeline with Swiper

Horizontal Timeline with SwiperJS

A Pen by Jay on CodePen.

License.

aelbore

:host {
  section {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--bto-carousel-width, 200px);
    gap: var(--bto-carosel-gap, 8px);
    padding: var(--bto-carousel-padding-container, 10px 0);
    overflow-x: auto;
 }