Timeline Slider With Swift

Timeline Slider

Today we will create a timeline slider with swift.js and jQuery. It supports touch events and dragging movement. Perfect for modern web development!

First of all, we will create index.html and paste the following code into this file:

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="latin1_swedish_ci">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>Timeline Slider</title>        
        <link rel="icon" type="image/png" sizes="16x16" href="https://emils.graphics/img/favicon/favicon-16x16.png">
        <link rel="stylesheet" type="text/css" media="screen" href="demo.css">
                                                                
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,900;1,400&display=swap" rel="stylesheet">
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/js/swiper.min.js"></script>
    </head>
<body>

<div class="wrapper">

    <div class="intro-text">
        <h1>Timeline Slider</h1>
        <p>This slider use swift.js and jQuery to showcase your timeline in a unique way. Along with some custom CSS animations, this slider is visually engaging and fun to use.</p>
    </div>

  <div class="news-slider">
    <div class="news-slider__wrp swiper-wrapper">
      <div class="news-slider__item swiper-slide">
        <a href="#" class="news__item">
          <div class="news-box">
            <span class="news-box__title"><i class="bi bi-check-lg"></i></span>
            <hr>
          </div>
          <div class="news__title">
            Initial Concepts
          </div>

          <p class="news__txt">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text...
          </p>
        </a>
      </div>

      <div class="news-slider__item swiper-slide">
        <a href="#" class="news__item">
          <div class="news-box">
            <span class="news-box__title"><i class="bi bi-check-lg"></i></span>
            <hr>
          </div>
          <div class="news__title">
            Product Website
          </div>

          <p class="news__txt">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text...
          </p>
        </a>
      </div>

      <div class="news-slider__item swiper-slide">
        <a href="#" class="news__item">
          <div class="news-box">
            <span class="news-box__title ongoing"><i class="bi bi-arrow-right"></i></span>
            <hr>
          </div>
          <div class="news__title">
            Distribution
          </div>

          <p class="news__txt">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text...
          </p>
        </a>
      </div>

      <div class="news-slider__item swiper-slide">
        <a href="#" class="news__item">
          <div class="news-box">
            <span class="news-box__title ongoing"><i class="bi bi-arrow-right"></i></span>
            <hr>
          </div>
          <div class="news__title">
            Social Media Engagement
          </div>

          <p class="news__txt">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text...
          </p>
        </a>
      </div>

      <div class="news-slider__item swiper-slide">
        <a href="#" class="news__item">
          <div class="news-box">
            <span class="news-box__title ongoing"><i class="bi bi-arrow-right"></i></span>
            <hr>
          </div>
          <div class="news__title">
            Advertising
          </div>

          <p class="news__txt">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text...
          </p>
        </a>
      </div>

      <div class="news-slider__item swiper-slide">
        <a href="#" class="news__item">
          <div class="news-box">
            <span class="news-box__title goal"><i class="bi bi-check-circle-fill"></i></span>
          </div>
          <div class="news__title">
            Complete Business
          </div>

          <p class="news__txt">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text...
          </p>
        </a>
      </div>
    </div>

      <div class="news-slider__arrows">
        <button class="news-slider__arrow news-slider-prev">
            <i class="bi bi-chevron-left"></i>
        </button>

        <div class="news-slider__pagination"></div>

        <button class="news-slider__arrow news-slider-next">
            <i class="bi bi-chevron-right"></i>
        </button>
      </div>
  </div>
</div>

<script src="demo.js"></script>
</body>
</html>

Then we paste this into the created demo.css:

html {
    position: relative;
    overflow-x: hidden !important;
}
body {
    font-family: "Montserrat", sans-serif;
    background-color: #fff;
    color: #000;
}
a, a:hover {
    text-decoration: none;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.wrapper {
    width: 100%;
    display: inline-block;
}
.intro-text {
    width: 100%;
    max-width: 1000px;
    margin: 200px auto 140px;
}
.intro-text h1 {
    font-size: 39px;
    margin-bottom: 30px;
}
.intro-text p {
    line-height: 1.7;
    font-size: 24px;
}
.news-slider {
    z-index: 2;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 60px;
}
.news-slider__wrp {
    display: flex;
    align-items: flex-start;
    position: relative;
    z-index: 2;
    left: -300px;
}
.news-slider__item {
    width: 400px;
    flex-shrink: 0;
}
.news-slider__item.swiper-slide {
    pointer-events: none;
    transition: all 0.3s;
}
.news-slider__item.swiper-slide-active, .news-slider__item.swiper-slide-prev, .news-slider__item.swiper-slide-next {
    opacity: 1;
    pointer-events: auto;
}
.news-slider__arrows {
    display: flex;
    margin-top: 50px;
}
.news-slider__arrow {
    background: transparent;
    border: none;
    display: inline-block;
    font-size: 24px;
    cursor: pointer;
    outline: none !important;
}
.news-slider__arrow i, .news-slider__arrow i::before {
    margin-left: -3px;
}
.news-slider__arrow:focus {
    outline: none !important;
}
.news-slider__pagination .swiper-pagination-bullet {
    width: 1em;
    height: 0.2em;
    display: inline-block;
    background: rgba(0, 0, 0, 0.25);
    opacity: 1;
    margin: 0 5px;
    transition: opacity 0.5s, background-color 0.5s, width 0.5s;
    transition-delay: 0.5s, 0.5s, 0s;
}
.news-slider__pagination .swiper-pagination-bullet-active {
    opacity: 1;
    background: #000;
    width: calc(1em * 3);
    transition-delay: 0s;
}
.news__item {
    padding: 0;
    color: #000;
    border-radius: 10px;
    display: block;
    transition: all 0.3s;
    padding-right: 2em;
}
.news__item.active {
    color: #000;
}
.news-box {
    margin-bottom: 20px;
    display: inline-block;
    width: 100%;
    position: relative;
}
.news-box hr {
    border-color: #0000001c;
    border-width: 3px;
    border-top: none;
    position: absolute;
    width: 100%;
    left: 38px;
    top: 20px;
    z-index: -1;
}
.news-box__title {
    font-size: 30px;
    font-weight: 500;
    display: flex;
    background: #000;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
}
.news__item .news-box__title i {
    color: #fff;
    display: contents;
    opacity: 0;
    transition: opacity 0.3s;
}
.news__item .news-box__title i::before {
    opacity: 0;
    transition: opacity 0.3s;
}
.news__item.active .news-box__title {
    background-color: #0033ad;
}
.news__item.active .news-box__title.ongoing {
    background-color: #ad0063;
}
.news__item.active .news-box__title.goal {
    background-color: #00ad9a;
}
.news__item.active .news-box__title i::before {
    opacity: 1;
    transition: opacity 0.3s;
}
.news__item.active .news-box__title i {
    opacity: 1;
}
.news-slider__pagination {
    margin-right: 3px;
}
.news__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.55;
    opacity: 0.7;
    margin-top: 10px;
    margin-bottom: 15px;
    transition: opacity 0.3s;
}
.news__txt {
    font-size: 14px;
    font-weight: 600;
    color: rgba(0,0,0,0.55);
    line-height: 1.9;
    opacity: 0.7;
    margin-top: 10px;
    transition: opacity 0.3s;
}
@media screen and (max-width: 1000px) {
    .news-slider__wrp {
        left: 0;
    }
}
@media screen and (max-width: 610px) {
    .intro-text {
        padding: 0 30px;
    }
    .news-slider__arrows {
        margin-left: 30px;
    }
    .news-slider__item {
        width: 100%;
        padding: 0 30px;
    }
}

And for the final step we create a file called demo.js and paste the Swift and jQuery code:

var items = document.querySelectorAll('.news__item');
var item = document.querySelector('.news__item');

var swiper = new Swiper('.news-slider', {
    effect: 'slide',
    grabCursor: true,
    loop: false,
    rewind: true,
    centeredSlides: true,
    slidesPerView: 'auto',
    keyboard: true,
    spaceBetween: 0,
    speed: 300,
    simulateTouch: true,
    navigation: {
        nextEl: '.news-slider-next',
        prevEl: '.news-slider-prev'
    },
    pagination: {
        el: '.news-slider__pagination',
        clickable: true
    },
    on: {
        init: function () {
            var activeItem = document.querySelector('.swiper-slide-active');

            var sliderItem = activeItem.querySelector('.news__item');

            $('.swiper-slide-active .news__item').addClass('active');

            var x = sliderItem.getBoundingClientRect().left;
            var y = sliderItem.getBoundingClientRect().top;
            var width = sliderItem.getBoundingClientRect().width;
            var height = sliderItem.getBoundingClientRect().height;
        }
    }
});

swiper.on('touchEnd', function () {
    $('.news__item').removeClass('active');
    $('.swiper-slide-active .news__item').addClass('active');
});

swiper.on('slideChange', function () {
    $('.news__item').removeClass('active');
});

swiper.on('slideChangeTransitionEnd', function () {
    $('.news__item').removeClass('active');
    var activeItem = document.querySelector('.swiper-slide-active');

    var sliderItem = activeItem.querySelector('.news__item');

    $('.swiper-slide-active .news__item').addClass('active');

    var x = sliderItem.getBoundingClientRect().left;
    var y = sliderItem.getBoundingClientRect().top;
    var width = sliderItem.getBoundingClientRect().width;
    var height = sliderItem.getBoundingClientRect().height;
});

There you have it! Use your new timeline slider as you wish.

Timeline Slider With Swift

Tags

Other

Main

Timeline Slider With Swift

Tags

Did you find this interesting?

Other

Main