I am trying to implement multiple splide as a slider solution in my website. But the images are not displaying correctly (weird width, height, overflow). When testing it in simple html code all work correctly but not inside my "final" version.
here is the current code :
<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/splide.min.css">
<script src="assets/js/pageContent.js" defer></script>
<script src="assets/js/navBar.js" defer></script>
<script src="assets/js/splide.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
new Splide('#slider1', {
perPage: 1,
perMove: 1,
gap: "30px",
type: 'loop',
heightRatio:0.25,
}).mount();
});
document.addEventListener('DOMContentLoaded', function () {
new Splide('#slider2', {
perPage: 1,
perMove: 1,
gap: "30px",
type: 'loop',
heightRatio:0.25,
}).mount();
});
</script>
</head>
<body>
<header>
</header>
<div class="topnav" id="myTopnav">
<a href="#" onclick="showPage('home')">Home</a>
<a href="#" onclick="showPage('page1')">Projet 42</a>
<a href="#" onclick="showPage('page2')">Art du Verre</a>
<a href="#" onclick="showPage('page3')">Ctrl-Z</a>
<a href="#" onclick="showPage('page4')">Transmissions</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="container">
<div class="side-column">
<!-- Content for the left column -->
</div>
<main>
<div id="home" class="page">
<br />
</div>
<div id="page1" class="page">
<!-- First Carousel -->
<div class="sliderBox">
<section id="slider1" class="splide" aria-label="Splide Basic HTML Example">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide"><img src="photo/ctrlz/angel001.jpeg"></li>
<li class="splide__slide"><img src="photo/42/42_SNO_02.jpeg"></li>
<li class="splide__slide"><img src="photo/42/42_SNO_03.jpeg"></li>
</ul>
</div>
</section>
</div>
</div>
<div id="page2" class="page">
<div class="sliderBox">
<section id="slider2" class="splide" aria-label="Splide Basic HTML Example">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide"><img src="photo/42/42_SNO_03.jpeg"></li>
<li class="splide__slide"><img src="photo/42/42_SNO_04.jpeg"></li>
<li class="splide__slide"><img src="photo/42/42_SNO_05.jpeg"></li>
</ul>
</div>
</section>
</div>
</main>
<div class="side-column">
<!-- Content for the right column -->
</div>
</div>
<footer>
</footer>
</body>
</html>
I tried in a simple html page all work correctly but not inside my "final" version. I did some test using class to keep something clean. Different code implementation of the splide script. But I guess I have a conflict somewhere in my code. I can share a link to the current result.