"scroll slider "
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

<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 ----------> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="slidesContainer"> <div id="slide01" data-slide="s1" class="slide slide01 active"> <div class="bcg"></div> <div class="slideContent"> <h1>Slide 1 Title</h1> <p>This is a short description.</p> </div> </div> <div id="slide02" data-slide="s2" class="slide slide02"> <div class="bcg"></div> <div class="slideContent"> <h1>Slide 2 Title</h1> <p>This is a short description.</p> </div> </div> <div id="slide03" data-slide="s3" class="slide slide03"> <div class="bcg"></div> <div class="slideContent"> <h1>Slide 3 Title</h1> <p>This is a short description.</p> </div> </div> <div id="slide04" data-slide="s0" class="slide slide04"> <div class="bcg"></div> <div class="slideContent"> <h1>Slide 4 Title</h1> <p>This is a short description.</p> </div> </div> <ul class="nav"> <li class="active"><a id="s0" href="#slide01">Slide 1</a></li> <li><a id="s1" href="#slide02">Slide 2</a></li> <li><a id="s2" href="#slide03">Slide 3</a></li> <li><a id="s3" href="#slide04">Slide 4</a></li> </ul> </div> <script> (function ($) { // Variables var sectionFrom, $slide = $('.slide'), $slideActive = $('.slide.active'), $navLink = $('.nav a'), $navLi = $('.nav li'), $body = $('body'); // Init function function init() { // Set active slide visible TweenLite.set($slideActive, { x: '0%' }); // Fade slides in TweenLite.set($body, { className: '-=loading' }); } init(); // Navigation click $navLink.on('click', function (e) { if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } // prevent animation when animating if (!$body.hasClass('is-animating')) { var sectionFrom = $('.slide.active'), sectionToID = $(e.target).attr('href'), sectionTo = $('div' + sectionToID); if (sectionFrom.attr('id') !== sectionTo.attr('id')) { scrollToSection(sectionFrom, sectionTo); } } }); function scrollToSection(sectionFrom, sectionTo) { var heading = sectionTo.find('h1'), subheading = sectionTo.find('p'), bcg = sectionTo.find('.bcg'), bcgFrom = sectionFrom.find('.bcg'), tlDown = new TimelineLite({ onComplete: setActiveSection(sectionFrom, sectionTo) }), tlUp = new TimelineLite(); if (sectionFrom.index() < sectionTo.index()) { //console.log('going down'); tlDown .set($body, { className: '+=is-animating' }) .to(sectionFrom, 1.2, { x: '-=100%', ease: Power4.easeInOut, clearProps: 'all' }, '0') .to(sectionTo, 1.2, { x: '0%', ease: Power4.easeInOut }, '0') .to(bcgFrom, 1.2, { x: '30%', ease: Power4.easeInOut, clearProps: 'all' }, '0') .from(bcg, 1.2, { x: '-30%', ease: Power4.easeInOut, clearProps: 'all' }, '0') .from(heading, 0.7, { autoAlpha: 0, x: 40, ease: Power4.easeInOut }, '-=1') .from(subheading, 0.7, { autoAlpha: 0, x: 40, ease: Power4.easeInOut }, '-=0.6') .set($body, { className: '-=is-animating' }); } else { //console.log('going up'); tlUp .set($body, { className: '+=is-animating' }) .set(sectionTo, { x: '-100%' }) .to(sectionFrom, 1.2, { x: '100%', ease: Power4.easeInOut, clearProps: 'all' }, '0') .to(sectionTo, 1.2, { x: '0%', ease: Power4.easeInOut }, '0') .to(bcgFrom, 1.2, { x: '-30%', ease: Power4.easeInOut, clearProps: 'all' }, '0') .from(bcg, 1.2, { x: '30%', ease: Power4.easeInOut, clearProps: 'all' }, '0') .from(heading, 0.7, { autoAlpha: 0, x: 40, ease: Power4.easeInOut }, '-=1') .from(subheading, 0.7, { autoAlpha: 0, x: 40, ease: Power4.easeInOut }, '-=0.6') .set($body, { className: '-=is-animating' }); } } function setActiveSection(sectionFrom, sectionTo) { // Add active class to the current slide sectionFrom.removeClass('active'); sectionTo.addClass('active'); // Add a body class highlighting the current slide $body.removeAttr('class').addClass($(sectionTo).attr('id') + '-active'); // Highlight current slide in the navigation var currentSlideIndex = parseInt($(sectionTo).attr('id').slice(-2)) - 1; $navLi.removeAttr('class'); $navLi.eq(currentSlideIndex).addClass('active'); } })(jQuery); $('.slide').bind('mousewheel', function (e) { $("#" + $(this).attr('data-slide')).trigger('click'); }); </script>
body { font: 16px/1.5 'Open Sans', Helvetica, Helvetica Neue, Arial, sans-serif; background-color: #2e2e30; color: #fff; } h1, h2, h3, h4 { font-weight: 700; } .slidesContainer { position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; } .slideContent { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; } .slideContent h1 { font-size: 24px; margin-bottom: 5px; line-height: 1em; } .slideContent p { font-size: 14px; color: rgba(255, 255, 255, 0.7); margin: 0; } /* =Project Slides */ .slide { height: 100%; text-align: center; overflow: hidden; position: absolute; top: 0; left: 0; bottom: 0; right: 0; transform: translateX(100%); transition: opacity 0.3s linear, visibility 0.3s linear; opacity: 1; visibility: visible; } .loading { opacity: 0; visibility: hidden; } .bcg { background-size: cover; background-position: center center; background-repeat: no-repeat; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; opacity: 0.9; z-index: 1; } .slide01 .bcg { background-image: url('https://s-media-cache-ak0.pinimg.com/736x/80/91/f9/8091f9dceb2ea55fa7b57bb7295e1824--hd-iphone--wallpapers-backgrounds-wallpapers.jpg'); } .slide02 .bcg { background-image: url(https://www.planwallpaper.com/static/images/880665-road-wallpapers.jpg); } .slide03 .bcg { background-image: url(https://s-media-cache-ak0.pinimg.com/736x/80/91/f9/8091f9dceb2ea55fa7b57bb7295e1824--hd-iphone--wallpapers-backgrounds-wallpapers.jpg'); } .slide04 .bcg { background-image: url(https://www.planwallpaper.com/static/images/880665-road-wallpapers.jpg); } .slide04 .slideContent h1 { color: #222; } .slide04 .slideContent p { color: rgba(0, 0, 0, 0.7); } /* =Navigation */ .nav { position: fixed; bottom: 40px; right: 40px; left: 40px; list-style: none; z-index: 3; margin: 0; padding: 0; } .nav li { float: left; list-style: none; width: 25%; text-align: center; } .nav a { color: #222; display: block; text-decoration: none; padding: 8px 16px; font-size: 12px; border: 1px rgba(255, 255, 255, 0.7) solid; border-width: 1px 0 1px 1px; background-color: rgba(255, 255, 255, 0.2); transition: all 0.3s linear; } .nav li:last-child a { border-width: 1px } .nav li.active a { background-color: rgba(255, 255, 255, 0.8); }

Related: See More


Questions / Comments: