Why my div is overlapping even I used white-space in my javascript slider?
Question
I don't understand why the div is overlapping. I want my div to be exact I as I click next or back pages. Here is my code
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
.slider-wrap {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
background: black;
}
.slider-main {
white-space: nowrap;
transition: ease 1000ms;
position: absolute;
width: 100%;
height: 200px;
}
.item {
width: 100%;
height: 200px;
background: red;
display: inline-flex;
position: relative;
}
.text {
position: absolute;
background: gray;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: white;
font-size: 25px;
}
.btn {
display: flex;
align-items: center;
justify-content: center;
}
.slider-prev,.slider-next {
padding: 10px;
font-size: 25px;
cursor: pointer;
}
</style>
</head>
<body>
<section class="product">
<div class="container-fluid">
<div class="slider-wrap">
<div class="slider-main">
<div class="item">
<div class="text">1</div>
</div>
<div class="item">
<div class="text">2</div>
</div>
<div class="item">
<div class="text">3</div>
</div>
<div class="item">
<div class="text">4</div>
</div>
<div class="item">
<div class="text">5</div>
</div>
<div class="item">
<div class="text">6</div>
</div>
</div>
</div>
</div>
</section>
<div class="btn">
<button class="slider-prev" > Prev </button>
<button class="slider-next" > Next </button>
</div>
<script>
let sliderMain = document.querySelector('.slider-main')
let sliderPrev = document.querySelector('.slider-prev')
let sliderNext = document.querySelector('.slider-next')
let slidesLength = sliderMain.querySelectorAll('.item').length
console.log(slidesLength)
let activeSlideIndex = 0;
sliderMain.style.left = `-${(slidesLength - 6) * 100}%`
sliderPrev.addEventListener('click',() => changeSlide('prev'));
sliderNext.addEventListener('click',() => changeSlide('next'));
const changeSlide = dir => {
// console.log(dir)
if (dir == 'next') {
activeSlideIndex--;
if (activeSlideIndex < -slidesLength + 1) {
activeSlideIndex = 0;
}
} else if (dir == "prev") {
activeSlideIndex++;
if (activeSlideIndex > 0) {
activeSlideIndex = -slidesLength + 1
}
}
console.log(activeSlideIndex)
sliderMain.style.left = `-${(slidesLength - 6 - activeSlideIndex) * 100}%`
}
</script>
My problem is that everythings alright in my javascript and html function but I don't know what's wrong with my css. I don't know if this is the result of my white-space: no-wrap which is giving a little space so that it will make increase the div margins. So anyone can help me about this? I want it to be normal with no overlapping in each click I do.
2 answers
solution1
1 2022-04-28 05:38:37
Just add a display inline-table inside the slider-main class
.slider-main {
white-space: nowrap;
transition: ease 1000ms;
position: absolute;
width: 100%;
height: 200px;
display: inline-table;
}
solution2
0 2022-04-28 05:37:37
From my point of view, the failure point is sliderMain.style.left. Instead of calculating and moving the div, you can display the items as none, and then display them as a block.
<div class="btn">
<button class="slider-prev" id="slipre" > Prev </button>
<button class="slider-next" id="slinext" > Next </button>
</div>
<script>
let slideIndex = 1;
document.getElementById("slipre").onclick = function () {
slide(slideIndex += -1);
}
document.getElementById("slinext").onclick = function () {
slide(slideIndex += 1);
}
function slide(x) {
let sliderItem = document.getElementsByClassName("item");
if (x > sliderItem.length) {slideIndex = 1} ;
if (x < 1) {slideIndex = sliderItem.length} ;
for (let i = 0; i < sliderItem.length; i++) {
sliderItem[i].style.display = "none";
}
sliderItem[slideIndex-1].style.display = "block";
}
</script>
don't mind the functions
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.