awesome responsive slider
A Pen by Abdallah Moussa on CodePen.
Created
January 19, 2022 14:50
-
-
Save HeNy007/23f79af168c29825924200526967802c to your computer and use it in GitHub Desktop.
flex Slider
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
| <body> | |
| <div class="container"> | |
| <div class="slide slide1 active "> | |
| <span></span> | |
| </div> | |
| <div class="slide slide2"> | |
| </div> | |
| <div class="slide slide3"> | |
| </div> | |
| <div class="slide slide4"> | |
| </div> | |
| <div class="slide slide5"> | |
| </div> | |
| <div class="slide slide6"> | |
| </div> | |
| </div> | |
| </body> | |
| <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></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
| let i=0 ; | |
| $('.slide').click(function(){ | |
| $('.active').addClass('nonActive').find('span').empty() | |
| $(this).removeClass('nonActive').addClass('active') | |
| i= $(this).index() | |
| }) | |
| setItner = setInterval(go,4000); | |
| function go(){ | |
| $('.active').addClass('nonActive').find('span').empty() | |
| $($('.slide')[i%6]).removeClass('nonActive').addClass('active') | |
| i++; | |
| } | |
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
| *{ | |
| box-sizing: border-box; | |
| padding: 0px; | |
| margin: 0px; | |
| } | |
| body{ | |
| background-color:whitesmoke | |
| } | |
| .container{ | |
| width: 100%; | |
| height: 400px; | |
| border-bottom:5px solid darkred; | |
| display: flex; | |
| margin: auto; | |
| padding: 10px; | |
| justify-content: center; | |
| box-shadow: 0px 3px 15px | |
| } | |
| .slide{ | |
| min-width: 10px; | |
| width: 50px; | |
| height: 100%; | |
| justify-content: center; | |
| cursor: pointer; | |
| margin: 0 10px; | |
| border-radius: 50px; | |
| display: flex; | |
| align-items: flex-end; | |
| background-size: cover; | |
| background-position: center; | |
| box-shadow: 3px 3px 5px black; | |
| opacity: .5; | |
| } | |
| .active{ | |
| flex-grow: 1; | |
| transition-duration: 1s; | |
| opacity: 1; | |
| padding: 0 10px; | |
| border-radius: 25px; | |
| padding-bottom: 10px | |
| } | |
| .nonActive{ | |
| flex-grow: 0; | |
| opacity: .5 | |
| } | |
| .slide:nth-of-type(1){ | |
| background-image: url('https://cdn.wallpapersafari.com/68/12/9a2wy5.jpeg') | |
| } | |
| .slide:nth-of-type(2){ | |
| background-image: url('https://cdn.wallpapersafari.com/3/53/0xgnyc.jpg') | |
| } | |
| .slide:nth-of-type(3){ | |
| background-image: url('https://mcdn.wallpapersafari.com/medium/28/35/fslPOF.jpg') | |
| } | |
| .slide:nth-of-type(4){ | |
| background-image: url('https://mcdn.wallpapersafari.com/medium/18/88/gsAVlZ.jpg') | |
| } | |
| .slide:nth-of-type(5){ | |
| background-image: url('https://mcdn.wallpapersafari.com/medium/7/54/v7t0ST.jpg') | |
| } | |
| .slide:nth-of-type(6){ | |
| background-image: url('https://mcdn.wallpapersafari.com/medium/16/66/Iv6KfC.jpg') | |
| } | |
| @media screen and (max-width: 700px) { | |
| .slide{ | |
| width: 20px; | |
| } | |
| .active{ | |
| border-radius: 25px | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment