Website Builder
Create a slider full demo with html css js
This is FULL DEMO SWIPER:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swiper</title>
<!-- Swiper CSS -->
<link rel="stylesheet" href="css/swiper-bundle.min.css"/>
<style>
body{
margin:0;
background:#0b1020;
font-family:system-ui;
padding:40px;
color:#fff;
}
.swiper{
width:800px;
max-width:100%;
height:300px;
border-radius:14px;
overflow:hidden;
}
.swiper-slide{
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
font-weight:bold;
background:#1e293b;
color:#fff;
}
</style>
</head>
<body>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<!-- Swiper JS -->
<script src="js/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper(".mySwiper", {
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
</body>
</html>
Copy
Good
Not good
Fantasy! This is perfect information!