<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<h1 class="main-title">Roadmap By Pedalsup</h1>
<div class="slider">
<div class="slide active">
<div class="slide-container">
<h2 class="slide-Title">Q1 - 2021</h2>
<div class="slide-description">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Nunc blandit justo ac dolor lobortis suscipit. </li>
<li>Et tincidunt lectus porta sit amet. </li>
<li>Nulla dignissim ligula nec faucibus feugiat. </li>
</ul>
</div>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-Title">Q2 - 2021</h2>
<div class="slide-description">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Nunc blandit justo ac dolor lobortis suscipit. </li>
<li>Et tincidunt lectus porta sit amet. </li>
<li>Nulla dignissim ligula nec faucibus feugiat. </li>
</ul>
</div>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-Title">Q3 - 2021</h2>
<div class="slide-description">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Nunc blandit justo ac dolor lobortis suscipit. </li>
<li>Et tincidunt lectus porta sit amet. </li>
<li>Nulla dignissim ligula nec faucibus feugiat. </li>
</ul>
</div>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-Title">Q4 - 2021</h2>
<div class="slide-description">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Nunc blandit justo ac dolor lobortis suscipit. </li>
<li>Et tincidunt lectus porta sit amet. </li>
<li>Nulla dignissim ligula nec faucibus feugiat. </li>
</ul>
</div>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-Title">Q1 - 2022</h2>
<div class="slide-description">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Nunc blandit justo ac dolor lobortis suscipit. </li>
<li>Et tincidunt lectus porta sit amet. </li>
<li>Nulla dignissim ligula nec faucibus feugiat. </li>
</ul>
</div>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-Title">Q2 - 2022</h2>
<div class="slide-description">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Nunc blandit justo ac dolor lobortis suscipit. </li>
<li>Et tincidunt lectus porta sit amet. </li>
<li>Nulla dignissim ligula nec faucibus feugiat. </li>
</ul>
</div>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-Title">Q3 - 2022</h2>
<div class="slide-description">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Nunc blandit justo ac dolor lobortis suscipit. </li>
<li>Et tincidunt lectus porta sit amet. </li>
<li>Nulla dignissim ligula nec faucibus feugiat. </li>
</ul>
</div>
</div>
</div>
<div class="slide">
<div class="slide-container">
<h2 class="slide-Title">Q4 - 2022</h2>
<div class="slide-description">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Nunc blandit justo ac dolor lobortis suscipit. </li>
<li>Et tincidunt lectus porta sit amet. </li>
<li>Nulla dignissim ligula nec faucibus feugiat. </li>
</ul>
</div>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Dongle:wght@400;700&family=Outfit:wght@400;600;700&display=swap');
body{
background:linear-gradient(#15306C, #14142F);
margin:0;
padding:0;
width:100vw;
height:100vh;
overflow:hidden;
}
h1, h2, h3, h4,h5, h6{
font-family: 'Outfit', sans-serif;
}
p, a, ul li{
font-family: 'Dongle', sans-serif;
font-weight:400;
font-size:20px;
}
.main-title{
width:100%;
text-align:center;
color:#ffffff;
}
.slider {
margin: 80px 0;
height: 200px;
display: block;
perspective: 1000px;
position: relative;
width: 100vw;
}
.slide{
margin-left:-50px;
display: inline-block;
width: 400px;
position: absolute;
backface-visibility: hidden;
transition: .4s all;
border-radius:20px;
color:white;
backdrop-filter:blur(10px);
border: double 1px transparent;
border-radius: 30px;
background-image: linear-gradient(#0200546b, #0000006b),
linear-gradient(to right, #661dee73, #009dff75);
background-origin: border-box;
background-clip: content-box, border-box;
}
.slide-container{
padding:20px 30px;
}
.slide-container ul{
list-style:none;
margin:0;
padding:0;
}
.slide-container ul li{
padding:0;
}
.slide.active {
z-index: 4;
}
var Slider = function() {
var total, $slide, $slider, sliderWidth, increment = 120;
var on = function() {
$slider = $('.slider');
$slide = $('.slide');
sliderWidth = $slider.width();
total = $slide.length;
position();
}
var position = function() {
var sign, half = $('.active').index(), x = 0, z = 0, zindex,scaleX = 1.3,scaleY = 1.3, transformOrigin;
$slide.each(function(index, element) {
scaleX = scaleY = 1;
transformOrigin = sliderWidth / 2;
if(index < half) {
sign = 1;
zindex = index + 1;
x = sliderWidth / 2 - increment * (half - index + 1);
z = -increment * (half - index + 1);
} else if(index > half) {
sign = -1
zindex = total - index;
x = sliderWidth / 2 + increment * (index - half + 1);
z = -increment * (index - half + 1);
} else {
sign = 0;
zindex = total;
x = sliderWidth / 2;
z = 1;
scaleX = scaleY = 1.2;
transformOrigin = 'initial';
}
$(element).css(
{
'transform': 'translate3d(' + calculateX(x, sign, 300) + 'px, 0,' + z + 'px) scale3d(' + scaleX + ',' + scaleY + ', 1)',
'z-index': zindex,
'transform-origin-x': transformOrigin
}
);
});
};
var calculateX = function(position, sign, width) {
switch(sign) {
case 1:
case 0: return position - width / 2;
case -1: return position - width / 2;
}
}
var imageSize = function() {
return $slider.width() / 3;
}
var recalculateSizes = function() {
sliderWidth = $slider.width();
position();
}
var clickedImage = function() {
$('.active').removeClass('active');
$(this).addClass('active');
position();
}
var addEvents = function() {
$( window ).resize(recalculateSizes);
$(document).on('click','.slide', clickedImage);
}
return {
init: function() {
on();
addEvents();
}
};
}();
$(function(){
var slider = Slider.init();
})
