I want to add Swiper Slider on my website. I have added Swiper CDN to my html. But it is not working. I don't know what is wrong with my code. I have copy pasted the same code which Swiper has on it's website. But still it does not slide. Can anyone help me what is that I am missing.
From here I copy pasted the code.
HTML CODE -
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
<title> </title>
</head>
<body>
<div >
<nav >
<div >
<a href="#">Navbar</a>
<button type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span ></span>
</button>
<div id="navbarSupportedContent">
<ul >
<li >
<a aria-current="page" href="#">Home</a>
</li>
<li >
<a href="#">About Me</a>
</li>
<li >
<a href="#">Gallery</a>
</li>
<li >
<a href="#">Services</a>
</li>
<li >
<a href="#">Press Media</a>
</li>
<li >
<a href="#">Enquiry</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<br><br><br>
<div >
<!-- Slider main container -->
<div >
<!-- Additional required wrapper -->
<div >
<!-- Slides -->
<div >Slide 1</div>
<div >Slide 2</div>
<div >Slide 3</div>
<div >Slide 4</div>
<div >Slide 5</div>
<div >Slide 6</div>
...
</div>
<!-- If we need pagination -->
<div ></div>
<!-- If we need navigation buttons -->
<div ></div>
<div ></div>
<!-- If we need scrollbar -->
<div ></div>
</div>
</div>
<script>
const swiper = new Swiper('.swiper', {
// Optional parameters
direction: 'vertical',
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
</script>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
CodePudding user response：
Here is my try, changed the javascript code
var swiper = new Swiper(".swiper-js", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
scrollbar: {
el: '.swiper-scrollbar',
},
pagination: {
el: '.swiper-pagination',
},
});<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
<title> </title>
</head>
<body>
<div >
<nav >
<div >
<a href="#">Navbar</a>
<button type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span ></span>
</button>
<div id="navbarSupportedContent">
<ul >
<li >
<a aria-current="page" href="#">Home</a>
</li>
<li >
<a href="#">About Me</a>
</li>
<li >
<a href="#">Gallery</a>
</li>
<li >
<a href="#">Services</a>
</li>
<li >
<a href="#">Press Media</a>
</li>
<li >
<a href="#">Enquiry</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<br><br><br>
<div >
<!-- Slider main container -->
<div >
<!-- Additional required wrapper -->
<div >
<!-- Slides -->
<div >Slide 1</div>
<div >Slide 2</div>
<div >Slide 3</div>
<div >Slide 4</div>
<div >Slide 5</div>
<div >Slide 6</div>
...
</div>
<!-- If we need pagination -->
<div ></div>
<!-- If we need navigation buttons -->
<div ></div>
<div ></div>
<!-- If we need scrollbar -->
<div ></div>
</div>
</div>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>CodePudding user response：
Hey I found the answer.
I shifted this script above like this and added css, check below code and css. This worked.
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.dvSlider .swiper', {
// Optional parameters
// direction: 'vertical',
// loop: true,
slidesPerView: 1,
spaceBetween: 30,
loop: true,
// If we need pagination
pagination: {
el: ".swiper-pagination",
clickable: true,
},
// Navigation arrows
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
</script>
CSS -
.dvSlider .slider {
width: 100%;
height: 100vh;
}
CodePudding user response：
You write shipper script code before the library load this cause it's a js error in console I fixed your code and paste you can directly use the code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
<title> </title>
</head>
<body>
<div >
<nav >
<div >
<a href="#">Navbar</a>
<button type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span ></span>
</button>
<div id="navbarSupportedContent">
<ul >
<li >
<a aria-current="page" href="#">Home</a>
</li>
<li >
<a href="#">About Me</a>
</li>
<li >
<a href="#">Gallery</a>
</li>
<li >
<a href="#">Services</a>
</li>
<li >
<a href="#">Press Media</a>
</li>
<li >
<a href="#">Enquiry</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<br><br><br>
<div >
<!-- Slider main container -->
<div >
<!-- Additional required wrapper -->
<div >
<!-- Slides -->
<div >
<img src="https://via.placeholder.com/1002" alt="">
</div>
<div >
<img src="https://via.placeholder.com/1002" alt="">
</div>
<div >
<img src="https://via.placeholder.com/1002" alt="">
</div>
<div >
<img src="https://via.placeholder.com/1002" alt="">
</div>
<div >
<img src="https://via.placeholder.com/1002" alt="">
</div>
</div>
<!-- If we need pagination -->
<div ></div>
<!-- If we need navigation buttons -->
<div ></div>
<div ></div>
<!-- If we need scrollbar -->
<div ></div>
</div>
</div>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
const swiper = new Swiper('.swiper', {
// Optional parameters
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
</script>
</body>
</html>