exeicise
Created
February 14, 2024 10:01
-
-
Save gkanishk/b0a6afcde628692493e925702384f624 to your computer and use it in GitHub Desktop.
Swiper
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
| <!-- Slider main container --> | |
| <div class="swiper-container"> | |
| <!-- Additional required wrapper --> | |
| <div class="swiper-wrapper"> | |
| <!-- Slides --> | |
| <div class="swiper-slide c1">Slide 1</div> | |
| <div class="swiper-slide c2">Slide 2</div> | |
| <div class="swiper-slide c3">Slide 3</div> | |
| <div class="swiper-slide c4">Slide 4</div> | |
| <div class="swiper-slide c5">Slide 5</div> | |
| </div> | |
| <!-- If we need pagination --> | |
| <!-- <div class="swiper-pagination"></div> --> | |
| <!-- If we need navigation buttons --> | |
| <div class="swiper-button-prev"></div> | |
| <div class="swiper-button-next"></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
| var mySwiper = new Swiper ('.swiper-container', { | |
| // Optional parameters | |
| loop: true, | |
| slidesPerView : 2, | |
| centeredSlides : true, | |
| effect : 'coverflow', | |
| coverflow: { | |
| rotate: 0, | |
| stretch: 0, | |
| depth: 300, | |
| modifier: 1, | |
| // slideShadows : true | |
| }, | |
| // If we need pagination | |
| // pagination: '.swiper-pagination', | |
| // Navigation arrows | |
| nextButton: '.swiper-button-next', | |
| prevButton: '.swiper-button-prev', | |
| }) |
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://cdn.bootcss.com/Swiper/3.4.2/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
| .swiper-container { | |
| width: 800px; | |
| height: 400px; | |
| } | |
| .swiper-slide{ | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: center; | |
| align-items: center; | |
| font-size:2rem; | |
| font-family: monospace; | |
| letter-spacing: 0.08rem | |
| } | |
| .c1 { | |
| background-color: indianred; | |
| } | |
| .c2 { | |
| background-color: teal; | |
| } | |
| .c3 { | |
| background-color: lightskyblue; | |
| } | |
| .c4 { | |
| background-color: lightcoral; | |
| } | |
| .c5 { | |
| background-color: lightgoldenrodyellow; | |
| } |
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://cdn.bootcss.com/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