Create custome timeline slider with jquery, also containes year slider click and slide through the time lines.
Evolution of Royal Enfield
Royal Enfield is an Indian multinational motorcycle manufacturing company headquartered in Chennai, Tamil Nadu, India.
HTML
<main>
<section class="parallax-five scrollblock">
<div class="mn-container">
<h1>Evolution of Royal Enfield</h1>
<p>
Royal Enfield is an Indian multinational motorcycle manufacturing
company headquartered in Chennai, Tamil Nadu, India.
</p>
<div class="re-time-slider">
<div class="arrow-icon re-time-arrow">
<span class="prev-icon"><img src="./assets/left.png" /></span>
<span class="next-icon"
><img src="./assets/right-chevron.png"
/></span>
</div>
<div class="imgSlider">
<div class="slide-item active-slide" data-start-year="1893">
<div class="slide-Infomation">
<div class="slide-year">1893</div>
<h3>Royal Enfield Quadricycle</h3>
<p>
Royal Enfield is an Indian multinational motorcycle
manufacturing company headquartered in Chennai, Tamil Nadu,
India. The company claims to be "the oldest global
motorcycle brand in continuous production and operates
manufacturing plants in Chennai in India.
</p>
</div>
<div class="image-container">
<img src="assets/splatter.png" />
</div>
</div>
<div class="slide-item slide-hidden" data-start-year="1913">
<div class="slide-Infomation">
<div class="slide-year">1913</div>
<h3>Royal Enfield Quadricycle</h3>
<p>
Royal Enfield is an Indian multinational motorcycle
manufacturing company headquartered in Chennai, Tamil Nadu,
India. The company claims to be "the oldest global
motorcycle brand in continuous production and operates
manufacturing plants in Chennai in India.
</p>
</div>
<div class="image-container">
<img src="assets/splatter2.png" />
</div>
</div>
<div class="slide-item slide-hidden" data-start-year="1959">
<div class="slide-Infomation">
<div class="slide-year">1959</div>
<h3>Royal Enfield Quadricycle</h3>
<p>
Royal Enfield is an Indian multinational motorcycle
manufacturing company headquartered in Chennai, Tamil Nadu,
India. The company claims to be "the oldest global
motorcycle brand in continuous production and operates
manufacturing plants in Chennai in India.
</p>
</div>
<div class="image-container">
<img src="assets/splatter4.png" />
</div>
</div>
<div class="slide-item slide-hidden" data-start-year="1965">
<div class="slide-Infomation">
<div class="slide-year">1965</div>
<h3>Royal Enfield Quadricycle</h3>
<p>
Royal Enfield is an Indian multinational motorcycle
manufacturing company headquartered in Chennai, Tamil Nadu,
India. The company claims to be "the oldest global
motorcycle brand in continuous production and operates
manufacturing plants in Chennai in India.
</p>
</div>
<div class="image-container">
<img src="assets/splatter2.png" />
</div>
</div>
<div class="slide-item slide-hidden" data-start-year="1967">
<div class="slide-Infomation">
<div class="slide-year">1967</div>
<h3>Royal Enfield Quadricycle</h3>
<p>
Royal Enfield is an Indian multinational motorcycle
manufacturing company headquartered in Chennai, Tamil Nadu,
India. The company claims to be "the oldest global
motorcycle brand in continuous production and operates
manufacturing plants in Chennai in India.
</p>
</div>
<div class="image-container">
<img src="assets/splatter2.png" />
</div>
</div>
<div class="slide-item slide-hidden" data-start-year="1980">
<div class="slide-Infomation">
<div class="slide-year">1980</div>
<h3>Royal Enfield Quadricycle</h3>
<p>
Royal Enfield is an Indian multinational motorcycle
manufacturing company headquartered in Chennai, Tamil Nadu,
India. The company claims to be "the oldest global
motorcycle brand in continuous production and operates
manufacturing plants in Chennai in India.
</p>
</div>
<div class="image-container">
<img src="assets/splatter.png" />
</div>
</div>
<div class="slide-item slide-hidden" data-start-year="2021">
<div class="slide-Infomation">
<div class="slide-year">2021</div>
<h3>Royal Enfield Quadricycle</h3>
<p>
Royal Enfield is an Indian multinational motorcycle
manufacturing company headquartered in Chennai, Tamil Nadu,
India. The company claims to be "the oldest global
motorcycle brand in continuous production and operates
manufacturing plants in Chennai in India.
</p>
</div>
<div class="image-container">
<img src="assets/splatter.png" />
</div>
</div>
</div>
<div class="timeline-roller">
<ul
data-center-year="1965"
class="rollerUL"
data-re-item="7"
data-re-gap="5"
data-years='[{"startYear": "1893", "endYear":"1912"},
{"startYear": "1913", "endYear":"1922"},
{"startYear": "1959", "endYear":"1964"},
{"startYear": "1965", "endYear":"1966"},
{"startYear": "1967", "endYear":"1979"},
{"startYear": "1980", "endYear":"2020"},
{"startYear": "2021", "endYear":"2021"}
]'
></ul>
</div>
</div>
</div>
</section>
</main>CSS
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap');
* {
margin: 0;
padding: 0;
color: #f2f5f7;
font-family: sans-serif;
letter-spacing: 1px;
font-weight: 300;
font-family: 'Montserrat', sans-serif;
box-sizing: border-box;
}
html,
body {
width: 100%;
overflow-y: auto;
background-color: #3a113f;
overflow-x: hidden;
}
h1 {
font-size: 70px;
margin-top: 50px;
}
.parallax-five .conatiner
{
width: 1170px;
margin: 0 auto;
position: relative;
padding: 20px 0px;
}
.parallax-five .mn-container {
z-index: 2;
}
/*Styling Buttons*/
.parallax-five {
padding: 0px 0 70px 0px;
background: #090912;
overflow: hidden;
height: 100vh;
}
.parallax-five .main-heading {
margin-top: 0;
}
.mn-container {
width: 100%;
text-align: center;
}
.main-heading {
font-size: 70px;
margin-top: 40px;
}
.main-flexcon {
display: flex;
flex-direction: row;
}
.left-elem {
position: relative;
width: 60%;
font-size: 13px;
min-height: 500px;
}
.left-elem .re-logo {
width: 200px;
top: 0;
}
.left-elem .re-logo img {
width: 100%;
}
.right-elem {
width: 40%;
}
.back-animation-triangle {
width: 530px;
height: 530px;
position: absolute;
top: 0;
margin-left: -180px;
z-index: 0;
animation: MoveUpDownFive 8s linear infinite;
}
.back-animation-triangle span {
position: absolute;
width: 100%;
height: 100%;
}
.back-animation-triangle span img {
width: 100%;
}
.back-animation-triangle span:nth-child(2) {
left: 60px;
top: 41px;
}
.arrow-icon {
width: 1000px;
top: 50%;
z-index: 10;
margin-left: -500px;
left: 50%;
position: absolute;
display: flex;
justify-content: space-between;
}
.re-bike {
width: 530px;
height: auto;
z-index: 3;
position: relative;
top: 0;
}
.re-bike img {
width: 100%;
}
.re-sec-left-con {
float: left;
width: 50%;
font-size: 13px;
}
.re-sec-left-con p {
line-height: 20px;
margin-bottom: 10px;
}
.re-sec-left-con .re-logo {
width: 120px;
margin-top: 80px;
}
.re-sec-left-con .re-logo img {
width: 100%;
}
.re-sec-right-con {
float: left;
width: 50%;
position: relative;
text-align: center;
}
.re-sec-right-con img {
width: 90%;
}
.re-bike-two {
margin-top: 20px;
}
.secthrepad {
margin-bottom: 80px;
}
.movie-sec {
display: flex;
flex-wrap: wrap;
width: 90%;
margin: 20px auto;
align-self: center;
justify-content: space-between;
}
.timeline-roller {
width: 600px;
position: relative;
margin: 0 auto;
}
.rollerUL {
width: 600px;
position: relative;
margin-left: 0;
padding: 0;
margin: 1px auto;
list-style: none;
border-bottom: 1px #575751 solid;
display: flex;
justify-content: space-between;
align-self: center;
transition: all 0.5s ease;
}
.rollerUL li {
height: 40px;
width: 1px;
background: #575751;
float: left;
align-self: flex-end;
}
.rollerUL .pointer-li {
height: 70px;
align-self: end;
position: relative;
cursor: pointer;
}
.rollerUL .pointer-li::after {
left: -4px;
cursor: pointer;
top: 0;
position: absolute;
content: '';
width: 10px;
height: 10px;
background: #575751;
border-radius: 50%;
}
.rollerUL .pointer-li span {
position: absolute;
color: #575751;
top: 0;
width: 150px;
left: 50%;
margin-left: -75px;
margin-top: -25px;
font-size: 12px;
transition: all 0.3s ease;
}
.rollerUL .pointer-li .end-time {
display: none;
}
.rollerUL .pointer-li:hover {
background: #ffffff;
}
.rollerUL .pointer-li:hover::after {
background: #ffffff;
}
.pointer-li.active-time-line {
background: #ffffff;
}
.pointer-li.active-time-line::after {
background: #ffffff;
}
.pointer-li.active-time-line span {
width: 200px;
margin-left: -100px;
color: #ffffff;
top: -20px;
font-size: 25px;
}
.imgSlider {
position: relative;
margin: 30px auto;
width: 900px;
height: 500px;
}
.imgSlider .image-container {
width: 90%;
}
.imgSlider .image-container img {
width: 100%;
}
.slide-Infomation {
position: absolute;
width: 380px;
margin-right: 20px;
margin-top: 80px;
z-index: 5;
right: 0;
}
.slide-year {
font-size: 70px;
font-weight: bold;
text-align: left;
padding-left: 50px;
}
.slide-Infomation h3 {
text-align: left;
margin-top: 20px;
padding-left: 50px;
}
.slide-Infomation p {
padding-left: 50px;
font-size: 13px;
text-align: left;
margin-top: 20px;
}
.slide-Infomation img {
width: 100%;
}
.slide-item {
transition: all 0.3s ease;
opacity: 0;
position: absolute;
}
.slide-item.slide-hidden {
opacity: 0;
}
.slide-item.active-slide {
opacity: 1;
}
.bounce {
width: 20px;
-moz-animation: bounce 2s infinite;
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
.iwc-header-wrapper {
transition: all 0.3s ease;
}
.iwc-header-wrapper nav {
transition: all 0.3s ease;
}
.iwc-header-wrapper.sticky-full-header nav {
margin-top: -60px;
position: fixed;
top: 0;
}
.iwc-header-wrapper.stick-bottom-menu nav {
position: fixed;
top: 0;
margin-top: 0;
z-index: 10;
}
Jquery
$(document).ready(function () {
$header = $('.iwc-header-wrapper');
$num = $('.my-card').length;
$even = $num / 2;
$odd = ($num + 1) / 2;
if ($num % 2 == 0) {
$('.my-card:nth-child(' + $even + ')').addClass('active');
$('.my-card:nth-child(' + $even + ')')
.prev()
.addClass('prev');
$('.my-card:nth-child(' + $even + ')')
.next()
.addClass('next');
} else {
$('.my-card:nth-child(' + $odd + ')').addClass('active');
$('.my-card:nth-child(' + $odd + ')')
.prev()
.addClass('prev');
$('.my-card:nth-child(' + $odd + ')')
.next()
.addClass('next');
}
$('.my-card').click(function () {
$slide = $('.active').width();
console.log($('.active').position().left);
if ($(this).hasClass('next')) {
$('.card-carousel')
.stop(false, true)
.animate({ left: '-=' + $slide });
} else if ($(this).hasClass('prev')) {
$('.card-carousel')
.stop(false, true)
.animate({ left: '+=' + $slide });
}
$(this).removeClass('prev next');
$(this).siblings().removeClass('prev active next');
$(this).addClass('active');
$(this).prev().addClass('prev');
$(this).next().addClass('next');
});
// Keyboard nav
$('html body').keydown(function (e) {
if (e.keyCode == 37) {
// left
$('.active').prev().trigger('click');
} else if (e.keyCode == 39) {
// right
$('.active').next().trigger('click');
}
});
$('.prev-icon').click(function () {
$('.active').prev().trigger('click');
});
$('.next-icon').click(function () {
$('.active').next().trigger('click');
});
function runTimeLine() {
var getListItem = $('.timeline-roller').find('ul').data('re-item'),
itemGap = $('.timeline-roller').find('ul').data('re-gap'),
yearData = $('.timeline-roller').find('ul').data('years'),
liArray = [];
for (let i = 0; i < getListItem; i++) {
let yearStar = yearData[i].startYear;
let yearEnd = yearData[i].endYear;
liArray.push(
`<li class="pointer-li" data-start-year='${yearStar}' data-end-year='${yearEnd}'>
<span class='year-class-start'>${yearStar} <soan class='end-time'> to ${yearEnd}</span>
</li>`
);
if (i !== getListItem - 1) {
for (let j = 0; j < itemGap; j++) {
liArray.push('<li class="inner-li"></li>');
}
}
}
$('.rollerUL').append(liArray);
let centeryr = $('.rollerUL').data('center-year');
let viewportOffset = $(
".pointer-li[data-start-year='" + centeryr + "']"
).offset();
let getCengerliIntex = $(
".pointer-li[data-start-year='" + centeryr + "']"
).index();
$('.pointer-li').find('.end-time').fadeOut();
$('.pointer-li').click(function () {
// these are relative to the viewport, i.e. Ëœjtnmbhe window
let getSeletedyr = $(this).data('start-year');
let getSelLi = $(this).index();
let viewportOffsetSelected = $(this).offset();
let leftshift = viewportOffset.left;
let getHalfWid;
$('.pointer-li').find('.end-time').fadeOut();
$('.pointer-li').removeClass('active-time-line');
$(this).addClass('active-time-line');
$(this).find('.end-time').fadeIn();
if ($(window).width() > 768) {
if (getSelLi < getCengerliIntex) {
getHalfWid = viewportOffsetSelected.left - leftshift;
if (viewportOffsetSelected.left > leftshift) {
$('.rollerUL').css('margin-left', -Math.abs(getHalfWid));
} else {
$('.rollerUL').css('margin-left', Math.abs(getHalfWid / 2));
}
} else {
getHalfWid = viewportOffsetSelected.left - leftshift;
$('.rollerUL').css('margin-left', -Math.abs(getHalfWid / 2));
}
}
$('.imgSlider').find('.slide-item').removeClass('active-slide');
$('.imgSlider').find('.slide-item').addClass('slide-hidden');
$('.imgSlider')
.find(".slide-item[data-start-year='" + getSeletedyr + "']")
.addClass('active-slide');
$('.imgSlider')
.find(".slide-item[data-start-year='" + getSeletedyr + "']")
.removeClass('slide-hidden');
});
}
runTimeLine();
$('.rollerUL').find('li').eq(0).trigger('click');
$('.arrow-icon.re-time-arrow')
.find('.next-icon')
.click(function () {
$('.rollerUL')
.find('.active-time-line')
.nextAll('.pointer-li')
.eq(0)
.trigger('click');
});
$('.arrow-icon.re-time-arrow')
.find('.prev-icon')
.click(function () {
$('.rollerUL')
.find('.active-time-line')
.prevAll('.pointer-li')
.eq(0)
.trigger('click');
});
// handlescroll animation
});
