How to add Flip image Slider with CDN without downloading any file 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@7/swiper-bundle.min.css"/>
<style>
html,
body {
position: relative;
height: 100%;
}
body {
background-image: linear-gradient(to bottom, #051937, #004d7a, #008793, #00bf72, #a8eb12);
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper {
width: 300px;
height: 300px;
padding: 50px;
}
.swiper-slide {
background-position: center;
background-size: cover;
width: 300px;
height: 300px;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="10.jpg" />
</div>
<div class="swiper-slide">
<img src="6.jpg" />
</div>
<div class="swiper-slide">
<img src="7.jpg" />
</div>
<div class="swiper-slide">
<img src="8.jpg" />
</div>
<div class="swiper-slide">
<img src="3.jpg"/>
</div>
<div class="swiper-slide">
<img src="9.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@7/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>
Connect/Contact with me here
Fiverr : https://www.fiverr.com/jishaansinghal
Youtube : https://www.youtube.com/channel/UCIgDfi6qUcTmeepNJ7uqLBQ
Facebook : https://www.facebook.com/jishaan.singhal
FB Group :https://www.facebook.com/groups/457165385377074
FB Group :https://www.facebook.com/groups/freegigpromotewithjishaansinghal
FB Page :https://www.facebook.com/promoteyourgig
Twitter : twitter.com/jishaan_singhal
Instagram : https://www.instagram.com/jishaansinghal
Linkedin : https://www.linkedin.com/in/jishaan-singhal-1b77b2203
Blogger : https://jishaansinghal.blogspot.com
Email : jishaanwm21@gmail.com
keywords:
css, html, online tutorials, javascript, html css website, css glassmorphism, responsive website design tutorial, how to make parallax scrolling website, javascript parallax effect, javascript parallax effects, javascrpt parallax website, parallax scrolling website using html css javascript, how to make website, how to create a parallax scrolling effect, simple parallax website, javascript parallax website, websites parallax scrolling, simple parallax scrolling effect, parallax scrolling tutorial, parallax web design, parallax website html css, css animation, css animation effects, html css, css only, javascript calendar, calendar, simple javascript calendar, glassmorphism, glass morphism, how to make, personal portfolio website, css website design, responsive website design step by step, create a responsive website, how to build a responsive html5 website, how to make responsive website using html css, how to make website responsive using css, build a responsive real world website from scratch, how to build a complete responsive website, how to make a responsive website, build a complete responsive website using html and css, website design 2020, html website, css website tutorial, online live class, bd online live class, online live class bd, digital marketing bangla tutorial 2020, digital marketing, digital marketing course, digital marketing course bangla, digital marketing tutorial, digital marketing tutorial step by step, digital marketing tutorial for beginners bangla, digital marketing tutorial for beginners, digital marketing tutorial for beginners 2020, digital marketing tutorial for bangla, digital marketing tutorial in bangla, youtube subscriber kaise badhaye, subscriber app, 4000 hours watch time, 1000 subscriber app, subscriber, lucky pandey, lucky pandey 2m, youtube search trick, fasted growing youtube channel, jquery slick slider tutorial, adobe xd, jquery slider tutorial, web design, web development, post grid, web development tutorial, adobe xd tutorial for beginners, adobe xd animation, web development tutorial for beginners, web development with python, web development for beginners, web development full course, web development 2022, web development interview questions, post grid wordpress, post grid plugin wordpress, adobe xd app design, web development full course in hindi, create a parallax scrolling website javascript, css animated cigarette animation effect, css 3d text animation effects |, animated cigarette, css 3d rotation, css 3d transforms, css 3d rotation animation effects, css 3d effect, glowing loader ring animation effects, animation, glowing loader ring animation, css3 glowing effects, css effects, css loading animation, latest css animation effects, css3, pure css loader animation, css loader animation, glowing effects, setup tour, my setup, room tour, online tutorials setup tour, setup tour intro, room setup tour, my work space, full calendar, how to make calendar, full year calendar javascript, js calendar, year calendar, custom javascript calendar, water drop, css3 effect, dropmorphism, css effect, css water effect, realistic water drop, how to draw water drops, css only water drop effects, css circle menu, circular navigation, menu, circular navigation menu, javascript radial menu, radial menu, simple radial menu, radial menu website, circular navbar menu using html and css, how to create circular menu html css, css radial menu, animated menu, animated circular menu, animated, website concept 2020, landing page design html css javascript, website design tutorial, step by step website design, starbucks coffee web page design, website design using html css & javascript, how to build a website, creative landing page design using html css & javascript, build a simple website using html, how to make a website using html css, simple website using html css and javascript, how to make an interactive website using javascript, aditya vlog channel grow, aditya vlog channel, aditya vlog earning, aditya vlogs viral, aditya vlog interview, aditya vlogs, how to grow vlog channel, how to viral vlog on youtube, views kaise badhaye, games using html css and javascript, javascript games, html game, css game, best html css games, best javascript games, javascript snake games, javascript tic tac toe, tower blocks, games, bullseye game, memory game, top games using javascript, javascript game, top 10 games javascript, css3 game, html5 games, how to create a calendar in html and css, build a javascript calendar, dynamic calendar in javascript, how to display calendar in javascript, how to create calendar in html using javascript, calendar ui, css glassmorphism calendar, javascript working calendar, dycalendarjs, how to create calendar in html css using javascript, how to make animated website, glass morphism css, glass morphism ui design, glass morphism ui css, how to create a frosted glass effect glassmorphism, how to create glassmorphic effects in html & css, css glassmorphism designs, how to create the glass effect, css glass morphism ui design, 2021 ui trends, ui design trends 2021, css glass effects, css glass morphism, css3 glassmorphism, glass morphism effects, personal website html css, complete personal portfolio website design tutorial, how to create your personal portfolio from scratch, responsive website design tutorial from scratch, responsive website html css javascript, how to create a personal portfolio website 2020 step by step, how to create a complete personal portfolio website using html and css, create a personal portfolio website using html and css step by step, facebook business page, how to create facebook page, how to make money from facebook page bangla, make money online, facebook page, how to earn money from facebook, facebook video monetization, facebook business page setup, bangla tutorial, rohan nag, make money from facebook page, make money from facebook ads, bangla guitar learning for beginners, guitar learning easy way, easy guitar learning, beginners acouestic guitar learning, easy guitar lesson bangla, eeasy guitar learning practice, গিটার বাজানো শেখা, bangla guitar chords, bangla guitar lessons, bangla guitar tutorial, guitar tutorial bangla, how to change chords, chords, guitar menia, super easy guitar lesson, learning guitar, guitar easy exercise, easy fingering practice, best guitar lesson video, how to use owl carousel, owl carousel 2 tutorial, how to use owl carousel in your website, owl carousel, owl carousel example, how to install owl carousel 2, how to make a testimonial carousel with owl carousel, owl carousel tutorial, owl carousel slider, owl carousel slider responsive, owl carousel 2, owl carousel slider example code, jquery plugin tutorial, jquery tutorial, owl carousel slider example, how to use owl carousel with html and css | 2020, carousel, web dev, responsive personal portfolio website, complete responsive website from scratch, build a complete responsive personal portfolio website using html css, how to build a complete responsive website from scratch, complete clean and responsive website design tutorial from scratch, responsive website, website design, complete personal portfolio website, responsive,Web Tutorials,Css Effects,CSS Animation Effects,Frontend Developers,Html CSS Tutorial,Responsive Web Design,CSS Hover Effects,html,CSS,jQuery,Javascript,Bootstrap,Responsive Website Design,easy tutorials,web design course,html5,css3,responsive website design,GSAP,Glassmorphism,Glass morphism,Css Glassmorphism,website design html css,complete website in html and css,website design,web development,web design,latest css effects,javascript calendar,full calendar,how to make calendar,javascript,calendar,html,css,simple javascript calendar,online tutorials,full year calendar javascript,js calendar,year calendar,custom javascript calendar,water drop,html css,html,css,css3 effect,dropmorphism,online tutorials,css effect,css water effect,realistic water drop,how to draw water drops,css only water drop effects,css only,html,css,ambient light,css effect,css animation effect,online tutorials,html css,css animation,css 3d cube animation effects,css glowing effect,css 3d glowing cube animation,css3,glowing gradient effect,glowing cube with text,3d cube text,happy new year,html,css,animation,css 3d animation,css 3d,3d animation effects,css 3d effect,online tutorials,css only,css effect,css 3d animation effect,happy new year html css,css 3d transforms,css 3d rotation,css 3d effect,css 3d rotate animation,3d animation,html,css,animation,css effect,css effects,css animation effect,online tutorials,css animation,html css,html,css,christmas tree,html css christmas tree,css christmas tree,animated christmas tree,css only,3d christas tree,css 3d christmas tree,html css christmas animation,css animation,css animation effects,pure css 3d christmas tree animation,animated 3d christmas tree,css 3d christmas tree animation,online tutorials,christmas html css,css3,
Comments
Post a Comment