gpt4 book ai didi

javascript - 图片轮播 : Force Images to take up entire div (each image)

转载 作者:太空宇宙 更新时间:2023-11-04 01:21:36 25 4
gpt4 key购买 nike

我需要一种方法来强制每个 image 填充 div,无论 div 的大小如何。我认为这就是 width: 100% 应该做的,但它没有按我预期的方式工作。

Link to CodePen

const carousels = document.querySelectorAll('.image-carousel');

[].forEach.call(carousels, c => {
let next = document.querySelector('.next'),
prev = document.querySelector('.previous'),
bubblesContainer = document.querySelector('.bubbles'),
inner = document.querySelector('.inner'),
imgs = document.querySelectorAll('img'),
currentImageIndex = 0,
width = 100,
bubbles = [];

for (let i = 0; i < imgs.length; i++) {
let b = document.createElement('span');
b.classList.add('bubble');
bubblesContainer.append(b);
bubbles.push(b);

b.addEventListener('click', () => {
currentImageIndex = i;
switchImg();
});
}

function switchImg() {
inner.style.left = -width * currentImageIndex + '%';

bubbles.forEach(function (b, i) {
if (i === currentImageIndex) {
b.classList.add('active');
} else {
b.classList.remove('active');
}
});
}

next.addEventListener('click', () => {
currentImageIndex++;

if (currentImageIndex >= imgs.length) {
currentImageIndex = 0;
}

switchImg();
});

prev.addEventListener('click', () => {
currentImageIndex--;

if (currentImageIndex < 0) {
currentImageIndex = imgs.length - 1;
}

switchImg();
});

switchImg();
});
img {
height: 100%;
min-width: 100%;
}
.image-carousel {
width: 100%;
height: 50vh;
overflow: hidden;
position: relative;
}
.image-carousel .inner {
display: flex;
position: absolute;
left: 0;
transition: left 0.5s;
width: 100%;
height: 100%;
}
.image-carousel .bubbles {
display: flex;
justify-content: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-bottom: 5px;
}
.image-carousel .bubbles .bubble {
margin: 0 1rem 0.5rem;
background: white;
border-radius: 100%;
width: 10px;
height: 10px;
display: inline-block;
opacity: 0.25;
transition: 0.1s;
cursor: pointer;
}
.image-carousel .bubbles .bubble:hover {
opacity: 0.65;
}
.image-carousel .bubbles .bubble.active {
opacity: 1;
}
.image-carousel .next::after, .image-carousel .previous::after {
content: '>';
position: absolute;
top: 50%;
right: 0;
background: white;
width: 1rem;
height: 3rem;
font-weight: bold;
transform: translatey(-50%);
line-height: 3rem;
box-sizing: border-box;
padding: 0 0.2rem;
cursor: pointer;
}
.image-carousel .previous::after {
left: 0;
content: '<';
}
<div class="container">
<div class="row">
<div class="col-12">
<div class="image-carousel">
<div class="inner">
<img class="carousel one" src="https://via.placeholder.com/100x100">
<img class="carousel two" src="https://via.placeholder.com/100x100">
<img class="carousel three" src="https://via.placeholder.com/100x100">
<img class="carousel three" src="https://via.placeholder.com/100x100">
</div>
<div class="bubbles"></div>
<div class="previous"><button>&lt;</button></div>
<div class="next"><button>&gt;</button></div>
</div>
</div>
</div>
</div>

最佳答案

您可以尝试添加 display:block;最小宽度:100%;最小宽度强制元素填充父宽度。

关于javascript - 图片轮播 : Force Images to take up entire div (each image),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48955432/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com