为什么我的 div 重叠，即使我在 javascript slider 中使用了空白？
[英]Why my div is overlapping even I used white-space in my javascript slider?
问题描述
I don't understand why the div is overlapping.
我不明白为什么 div 重叠。 I want my div to be exact I as I click next or back pages.我希望我的 div 在我点击下一页或后一页时准确无误。 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.我的问题是我的 javascript 和 html function 一切正常，但我不知道我的 css 有什么问题。我不知道这是否是我的 white-space: no-wrap 的结果，它给了一点空间所以它将增加 div 边距。 So anyone can help me about this?所以任何人都可以帮助我吗？ I want it to be normal with no overlapping in each click I do.我希望它是正常的，每次点击都不会重叠。
2 个解决方案
解决方案1
1 2022-04-28 05:38:37
Just add a display inline-table inside the slider-main class只需在 slider-main 内添加一个显示内联表 class
.slider-main {
white-space: nowrap;
transition: ease 1000ms;
position: absolute;
width: 100%;
height: 200px;
display: inline-table;
}
解决方案2
0 2022-04-28 05:37:37
From my point of view, the failure point is sliderMain.style.left.在我看来，失败点是 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。
<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不介意功能
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.