"Clickable Slider"
Bootstrap 4.1.1 Snippet by Pawan Pandey

<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(); })

Related: See More


Questions / Comments: