In this video, I'm going to show you how to use Effect flip Slider on your own website by jishaansinghal
In this video,I'm going to show you how to use Effect flip Slider on your own website by jishaansinghal
Code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Swiper demo</title> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> <style> html, body { position: relative; height: 100%; } body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000; margin: 0; padding: 0; background-image: linear-gradient(to right, #051937, #252b67, #5b3692, #9f34b4, #eb12c7); } .swiper { width: 300px; height: 300px; padding: 50px; -webkit-box-shadow: 5px 5px 20px 5px #000000; box-shadow: 5px 5px 20px 5px #000000; } .swiper-slide { background-position: center; background-size: cover; width: 300px; height: 300px; -webkit-box-shadow: 5px 5px 20px 5px #000000; box-shadow: 5px 5px 20px 5px #000000; } .swiper-slide img { display: block; width: 100%; height: 100% !important; } </style> </head> <body> <div class="swiper mySwiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="https://swiperjs.com/demos/images/nature-1.jpg" /> </div> <div class="swiper-slide"> <img src="https://swiperjs.com/demos/images/nature-2.jpg" /> </div> <div class="swiper-slide"> <img src="https://swiperjs.com/demos/images/nature-3.jpg" /> </div> <div class="swiper-slide"> <img src="https://swiperjs.com/demos/images/nature-4.jpg" /> </div> <div class="swiper-slide"> <img src="https://swiperjs.com/demos/images/nature-5.jpg" /> </div> <div class="swiper-slide"> <img src="https://swiperjs.com/demos/images/nature-6.jpg" /> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> <div class="swiper-pagination"></div> </div> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <script> var swiper = new Swiper(".mySwiper", { effect: "flip", grabCursor: true, pagination: { el: ".swiper-pagination", }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, }); </script> </body> </html>
keywords:
website design and development,motivation,personal development,career,business,ecommerce,job,moshiur,codersfoundation,lifestyle,rich life,website design,bangla tutorial,coding,computer programming,online career,freelancing,wordpress,wordpress bangla tutorial,woocommerce,wordpress plugins,website development,wordpress development,make website,job opportunity,Funny,Bangladeshi,Youtuber,Comedy,Entertainment,Prank
FreelancingOnline Money EarningTutorialEducationLearn EnglishFunny Videosmake money onlinevlogFreelancer nasimbangla funny videobangladesh top freelancermotivational video best
outsourcingfreelancingfreelancing bangla tutorialoutsourcing institutejamal sirjamal sir video tutorialjamal sir freelancing video tutorialfreelance jobhow to get freelance jobfreelancing training center chittagongfreelanceing training center dhakafreelancing banglajamal sir channelseo bangla tutorialMohammad Jamal uddinfreelancer jamal uddinmohammad Jamal uddinmohammad jamal uddin
Comments
Post a Comment