Created
February 15, 2019 13:58
-
-
Save Moshyfawn/3fec7e94b535143e236e29d4c5f8597d to your computer and use it in GitHub Desktop.
Horizontal parallax sliding slider with Swiper.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="swiper-container main-slider loading"> | |
| <div class="swiper-wrapper"> | |
| <div class="swiper-slide"> | |
| <figure class="slide-bgimg" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLbVhsNzdIYmlfN1E)"> | |
| <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLbVhsNzdIYmlfN1E" class="entity-img" /> | |
| </figure> | |
| <div class="content"> | |
| <p class="title">Shaun Matthews</p> | |
| <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span> | |
| </div> | |
| </div> | |
| <div class="swiper-slide"> | |
| <figure class="slide-bgimg" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg)"> | |
| <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg" class="entity-img" /> | |
| </figure> | |
| <div class="content"> | |
| <p class="title">Alexis Berry</p> | |
| <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span> | |
| </div> | |
| </div> | |
| <div class="swiper-slide"> | |
| <figure class="slide-bgimg" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRml1b3B6eXVqQ2s)"> | |
| <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRml1b3B6eXVqQ2s" class="entity-img" /> | |
| </figure> | |
| <div class="content"> | |
| <p class="title">Billie Pierce</p> | |
| <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span> | |
| </div> | |
| </div> | |
| <div class="swiper-slide"> | |
| <figure class="slide-bgimg" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLVUpEems2ZXpHYVk)"> | |
| <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLVUpEems2ZXpHYVk" class="entity-img" /> | |
| </figure> | |
| <div class="content"> | |
| <p class="title">Trevor Copeland</p> | |
| <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span> | |
| </div> | |
| </div> | |
| <div class="swiper-slide"> | |
| <figure class="slide-bgimg" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM)"> | |
| <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM" class="entity-img" /> | |
| </figure> | |
| <div class="content"> | |
| <p class="title">Bernadette Newman</p> | |
| <span class="caption">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- If we need navigation buttons --> | |
| <div class="swiper-button-prev swiper-button-white"></div> | |
| <div class="swiper-button-next swiper-button-white"></div> | |
| </div> | |
| <!-- Thumbnail navigation --> | |
| <div class="swiper-container nav-slider loading"> | |
| <div class="swiper-wrapper"> | |
| <div class="swiper-slide"> | |
| <figure class="slide-bgimg" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLbVhsNzdIYmlfN1E)"> | |
| <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLbVhsNzdIYmlfN1E" class="entity-img" /> | |
| </figure> | |
| <div class="content"> | |
| <p class="title">Shaun Matthews</p> | |
| </div> | |
| </div> | |
| <div class="swiper-slide"> | |
| <figure class="slide-bgimg" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg)"> | |
| <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLWTdaX3J5b1VueDg" class="entity-img" /> | |
| </figure> | |
| <div class="content"> | |
| <p class="title">Alexis Berry</p> | |
| </div> | |
| </div> | |
| <div class="swiper-slide"> | |
| <figure class="slide-bgimg" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRml1b3B6eXVqQ2s)"> | |
| <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRml1b3B6eXVqQ2s" class="entity-img" /> | |
| </figure> | |
| <div class="content"> | |
| <p class="title">Billie Pierce</p> | |
| </div> | |
| </div> | |
| <div class="swiper-slide"> | |
| <figure class="slide-bgimg" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLVUpEems2ZXpHYVk)"> | |
| <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLVUpEems2ZXpHYVk" class="entity-img" /> | |
| </figure> | |
| <div class="content"> | |
| <p class="title">Trevor Copeland</p> | |
| </div> | |
| </div> | |
| <div class="swiper-slide"> | |
| <figure class="slide-bgimg" style="background-image:url(https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM)"> | |
| <img src="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM" class="entity-img" /> | |
| </figure> | |
| <div class="content"> | |
| <p class="title">Bernadette Newman</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Params | |
| let mainSliderSelector = '.main-slider', | |
| navSliderSelector = '.nav-slider', | |
| interleaveOffset = 0.5; | |
| // Main Slider | |
| let mainSliderOptions = { | |
| loop: true, | |
| speed:1000, | |
| autoplay:{ | |
| delay:3000 | |
| }, | |
| loopAdditionalSlides: 10, | |
| grabCursor: true, | |
| watchSlidesProgress: true, | |
| navigation: { | |
| nextEl: '.swiper-button-next', | |
| prevEl: '.swiper-button-prev', | |
| }, | |
| on: { | |
| init: function(){ | |
| this.autoplay.stop(); | |
| }, | |
| imagesReady: function(){ | |
| this.el.classList.remove('loading'); | |
| this.autoplay.start(); | |
| }, | |
| slideChangeTransitionEnd: function(){ | |
| let swiper = this, | |
| captions = swiper.el.querySelectorAll('.caption'); | |
| for (let i = 0; i < captions.length; ++i) { | |
| captions[i].classList.remove('show'); | |
| } | |
| swiper.slides[swiper.activeIndex].querySelector('.caption').classList.add('show'); | |
| }, | |
| progress: function(){ | |
| let swiper = this; | |
| for (let i = 0; i < swiper.slides.length; i++) { | |
| let slideProgress = swiper.slides[i].progress, | |
| innerOffset = swiper.width * interleaveOffset, | |
| innerTranslate = slideProgress * innerOffset; | |
| swiper.slides[i].querySelector(".slide-bgimg").style.transform = | |
| "translate3d(" + innerTranslate + "px, 0, 0)"; | |
| } | |
| }, | |
| touchStart: function() { | |
| let swiper = this; | |
| for (let i = 0; i < swiper.slides.length; i++) { | |
| swiper.slides[i].style.transition = ""; | |
| } | |
| }, | |
| setTransition: function(speed) { | |
| let swiper = this; | |
| for (let i = 0; i < swiper.slides.length; i++) { | |
| swiper.slides[i].style.transition = speed + "ms"; | |
| swiper.slides[i].querySelector(".slide-bgimg").style.transition = | |
| speed + "ms"; | |
| } | |
| } | |
| } | |
| }; | |
| let mainSlider = new Swiper(mainSliderSelector, mainSliderOptions); | |
| // Navigation Slider | |
| let navSliderOptions = { | |
| loop: true, | |
| loopAdditionalSlides: 10, | |
| speed:1000, | |
| spaceBetween: 5, | |
| slidesPerView: 5, | |
| centeredSlides : true, | |
| touchRatio: 0.2, | |
| slideToClickedSlide: true, | |
| direction: 'vertical', | |
| on: { | |
| imagesReady: function(){ | |
| this.el.classList.remove('loading'); | |
| }, | |
| click: function(){ | |
| mainSlider.autoplay.stop(); | |
| } | |
| } | |
| }; | |
| let navSlider = new Swiper(navSliderSelector, navSliderOptions); | |
| // Matching sliders | |
| mainSlider.controller.control = navSlider; | |
| navSlider.controller.control = mainSlider; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| %transition_all_03s { | |
| transition:all .3s ease; | |
| } | |
| %backface_visibility_hidden{ | |
| backface-visibility:hidden; | |
| -webkit-backface-visibility:hidden; | |
| } | |
| *, *:before, *:after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .swiper-container { | |
| width: 80%; | |
| height: 100vh; | |
| // display:inline-block; | |
| // vertical-align:top; | |
| float:left; | |
| transition:opacity .6s ease, transform .3s ease; | |
| &.nav-slider{ | |
| width:20%; | |
| padding-left:5px; | |
| .swiper-slide{ | |
| cursor:pointer; | |
| opacity:.4; | |
| transition:opacity .3s ease; | |
| &.swiper-slide-active{ | |
| opacity:1; | |
| } | |
| .content{ | |
| width:100%; | |
| .title{ | |
| font-size:20px; | |
| } | |
| } | |
| } | |
| } | |
| &:hover{ | |
| .swiper-button-prev, | |
| .swiper-button-next{ | |
| transform:translateX(0); | |
| opacity:1; | |
| visibility:visible; | |
| } | |
| } | |
| &.loading{ | |
| opacity:0; | |
| visibility:hidden; | |
| } | |
| } | |
| .swiper-wrapper{ | |
| } | |
| .swiper-slide{ | |
| overflow: hidden; | |
| @extend %backface_visibility_hidden; | |
| .slide-bgimg{ | |
| position:absolute; | |
| top:0; | |
| left:0; | |
| width:100%; | |
| height:100%; | |
| background-position:center; | |
| background-size:cover; | |
| } | |
| .entity-img{ | |
| display:none; | |
| } | |
| .content{ | |
| position:absolute; | |
| top:40%; | |
| left:0; | |
| width:50%; | |
| padding-left:5%; | |
| color:#fff; | |
| .title{ | |
| font-size:2.6em; | |
| font-weight:bold; | |
| margin-bottom:30px; | |
| } | |
| .caption{ | |
| display:block; | |
| font-size:13px; | |
| line-height:1.4; | |
| transform:translateX(50px); | |
| opacity:0; | |
| transition:opacity .3s ease, transform .7s ease; | |
| &.show{ | |
| transform:translateX(0); | |
| opacity:1; | |
| } | |
| } | |
| } | |
| } | |
| [class^="swiper-button-"]{ | |
| width:44px; | |
| opacity:0; | |
| visibility:hidden; | |
| @extend %transition_all_03s; | |
| } | |
| .swiper-button-prev{ | |
| transform:translateX(50px); | |
| } | |
| .swiper-button-next{ | |
| transform:translateX(-50px); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment