Make A Responsive Timeline Carousel Using HTML, CSS, and jQuery

By Bytewebster - March 13, 2023

Responsive Timeline Carousel Using HTML and CSS

Welcome to bytewebster front-end projects on how to create a responsive timeline carousel using HTML, CSS, and jQuery! In this project, we'll be walking through step-by-step instructions on how to create a visually stunning timeline carousel that will look great on any device.

Working

The timeline carousel is a graphical user interface (GUI) element and it works by using HTML, CSS, and jQuery to create a carousel that allows users to scroll through the timeline horizontally. Each event or milestone is represented by a slide or card, which contains information such as the event's date, description, and image.

Direct Download

Detailed Overview of Project

A timeline carousel is a graphical user interface (GUI) element that displays a series of events or milestones in chronological order, often accompanied by images or other media. It is commonly used on websites or applications to showcase a company's history, product development timeline, or personal achievements.

Overall, the timeline carousel is a great way to visually display a series of events or milestones in a compact and engaging format, making it an essential element for many websites and applications.

HTML Structure

First of all we will prepare its basic HTML structure, and We have tried our best to keep the code as lightweight as possible that's why you will not have any problem in understanding this code.

This is HTML code for a timeline carousel. It is a section element with a class of "timeline". Inside the section element, there is a div element with a class of "item-wrapper" and a data attribute of "timeline-carousel".

This div contains three "item" divs, each representing a point in the timeline. Each "item" div contains two child divs. The first child div has a class of "image" and contains a div with a class of "wrapper".

The "wrapper" div has an inline style attribute that sets the background image of the div. This creates the image for the timeline point.

<section class="timeline">
    <div class="item-wrapper" data-js="timeline-carousel">

        <div class="item">
            <div class="image">
                <div class="wrapper" style="background: url('https://wallpapercave.com/dwp1x/wp4469508.jpg') center center; background-size:cover;"></div>
            </div>
            <div class="inner">
                <span class="year">2013</span>
                <span class="month">June 14</span>
                <p>Lorem, ipsum dolor, sit amet consectetur adipisicing elit. Repellendus quibusdam quaerat, sequi dicta ab modi ipsam molestias excepturi rem quisquam repudiandae. Dolores, qui, soluta?</p>
              <a href="#" class="more">Read more</a>
            </div>
        </div>

       
        <div class="item">
            <div class="image">
                <div class="wrapper" style="background: url('https://c4.wallpaperflare.com/wallpaper/352/54/531/galaxy-mac-planet-scientific-wallpaper-preview.jpg') center center; background-size:cover;"></div>
            </div>
            <div class="inner">
                <div class="pointer"></div>
                <span class="month">July 5	</span>
                <p>Lorem, ipsum dolor, sit amet consectetur adipisicing elit. Repellendus quibusdam quaerat, sequi dicta ab modi ipsam molestias excepturi rem quisquam repudiandae. Dolores, qui, soluta?</p>
              <a href="#" class="more">Read more</a>
            </div>
        </div>

       
        <div class="item">
            <div class="image">
                <div class="wrapper" style="background: url('https://free4kwallpapers.com/uploads/originals/2019/12/23/space-wallpaper.jpg') center center; background-size:cover;"></div>
            </div>
            <div class="inner">
                <span class="year">2015</span>
                <span class="month">January 10</span>
                <p>Lorem, ipsum dolor, sit amet consectetur adipisicing elit. Repellendus quibusdam quaerat, sequi dicta ab modi ipsam molestias excepturi rem quisquam repudiandae. Dolores, qui, soluta?</p>
              <a href="#" class="more">Read more</a>
            </div>
        </div>   
    </div>
</section>

The second child div of the "item" div has a class of "inner" and contains three elements: two span elements for the year and month of the timeline point, and a paragraph element for the text description of the event.

Additionally, there is an anchor element with a class of "more" that can be used to link to additional information about the timeline point.

The carousel functionality is provided by JavaScript code that utilizes the "timeline-carousel" data attribute on the "item-wrapper" div. it likely uses JavaScript to manipulate the display of the "item" divs to create a scrolling effect.

Styling With CSS

Now that we've gone through the HTML structure of the timeline carousel, let's move on to the CSS styling. This is where we'll be adding the visual design and layout to our carousel.

This is a CSS code for our responsive timeline carousel. The .timeline class is the container for the entire timeline and has a fixed height with overflow hidden. The :before and :after pseudo-elements are used to create the vertical lines on the sides of the timeline.

The .slick-list class is used to allow for overflow of the items in the carousel. .item class is used to set the cursor to pointer for the timeline items. The .wrapper class is used to set the style for each item in the timeline with a border radius, border, and opacity.

.timeline {
  position: relative;
  overflow: hidden;
  padding: 50px 6.9444% 90px 6.9444%;
}

.timeline:after, .timeline:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  height: 100%;
  width: 6.9444%;
  background-color: #1d1d1e;
  z-index: 3;
  width: 6.9444%;
}

.timeline:after {
  left: 0;
}

.timeline:before {
  right: 0;
  opacity: 0;
}

.slick-list {
  overflow: visible;
}

.timeline .slick-dots {
  bottom: -73px;
}

.image {
  padding-right: 30px;
}

.item {
  cursor: pointer;
}

.wrapper {
  border-radius: 20px;
  border: 1px solid gold;
  opacity: 0.4;
  padding-bottom: 71.4%;
  -webkit-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  -o-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.inner:after {
  width: calc(100% - 30px);
}

.inner {
  position: relative;
  padding-top: 45px;
}

.inner:after {
  position: absolute;
  width: 100%;
  top: 45px;
  left: 0;
  content: "";
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.year {
  font-size: 46px;
  line-height: 36px;
  color: white;
  display: table;
  letter-spacing: -1px;
  padding-right: 10px;
  background-color: #1d1d1e;
  z-index: 1;
  position: relative;
  margin: -15px 0 20px;
  font-weight: 900;
}
.year:after {
  content: "";
  position: absolute;
  display: block;
  left: -10px;
  top: 0;
  height: 100%;
  width: 10px;
  background-color: #1d1d1e;
  z-index: 3;
}
.month {
  font-size: 21px;
  text-transform: uppercase;
  color: #b38c52;
  display: block;
  margin-bottom: 10px;
  font-weight: 900;
}
p {
  font-size: 23px;
  line-height: 24px;
  color: white;
  width: 80%;
  font-weight: 400;
  margin-bottom: 15px;
}
.more {
  font-size: 22px;
  color: red;
  display: table;
  margin-bottom: 10px;
  font-weight: 600;
  text-decoration: none;
  position: relative;
}
.more:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  border-bottom: 2px solid red;
  -webkit-transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  -o-transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.more:hover:after {
  width: 100%;
}

.pointer {
  height: 29px;
  position: relative;
  z-index: 1;
  margin: -4px 0 16px;
}

.pointer:after, .pointer:before {
  position: absolute;
  content: "";
}

.pointer:after {
  width: 9px;
  height: 9px;
  border-radius: 100%;
  top: 0;
  left: 0;
  background-color: #b38c52;
}

.pointer:before {
  width: 1px;
  height: 100%;
  top: 0;
  left: 4px;
  background-color: #b38c52;
}

.wrapper {
  opacity: 1 !important;
}

.slick-dots {
  bottom: 60px;
  list-style: none;
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
  z-index: 2;
}

.slick-dots li {
  cursor: pointer;
  display: inline-block;
  margin: 0 15px;
  position: relative;
  width: 10px;
  height: 10px;
}

.slick-dots li:last-child {
  margin-right: 0;
}

.slick-dots li.slick-active button {
  background: red;
  border-color: red;
}

.slick-dots li button {
  display: block;
  font-size: 0;
  width: 25px;
  height: 25px;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  -webkit-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  -o-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.slick-dots li button:hover {
  background: red;
  border-color: red;
}

The .year, .month, p, and .more classes are used to style the text and headings within each timeline item. The .pointer class is used to create the small circle on the left side of each item.

The .slick-dots class is used to create the navigation dots at the bottom of the timeline. The .slick-dots li class is used to style each individual dot, with the .slick-dots li.slick-active button class being used to style the active dot.

JavaScript Explanation

Now we're on last and major part of this Responsive Timeline Carousel which is the javascript part but here we have used jQuery and Owl Carousel CDN.

The jQuery and Owl Carousel code that we have used on this project combines these two technologies to create a responsive timeline carousel that displays a sequence of events in a visually appealing way.

This code is using jQuery to select an element with a specific data-js attribute and initialize an Owl Carousel plugin on it.

The first line defines a custom jQuery method called $.js which takes a parameter el. It returns a jQuery object that selects any element with a data-js attribute that matches the value of el.

$.js = function (el) {
    return $('[data-js=' + el + ']')
};

function carousel() {
  $.js('timeline-carousel').slick({
    infinite: false,
    arrows: false,
    dots: true,
    autoplay: false,
    speed: 1100,
    slidesToShow: 2,
    slidesToScroll: 2,
    responsive: [
      {
        breakpoint: 800,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }]
  });
}

carousel();

The carousel() function calls this custom method with the value 'timeline-carousel' to select the element with the data-js attribute set to 'timeline-carousel'.

By understanding how this code works, you can also modify it to suit your needs and create similar carousels or sliders on your website.

We appreciate you taking the time to read this article, and hope that you found the project to be enjoyable.

Video of the Project

Smooth Accordion using Alpine.js

Sliding Signup and Login Form

Bootstrap Admin Dashboard Template

Javascript Card slider parallax effect

Take This Short Survey!

Download Source Code Files

From here You can download the source code files of this Responsive Timeline Carousel.
If you are just starting in web development, these snippets will be useful. We would appreciate it if you would share our blog posts with other like-minded people.