Мобильная версияЯ хотел бы, чтобы кадр изображения была центрирована (сегодня он остается влево), будь то на компьютере или мобильном устройстве, но пока я не справился с этим.
May Prime Dife Me с некоторым советом о том, как лучше всего это делать? ---- < /p>
Multi Slideshow with Fading & Random Exit
.slideshow-container {
height: 59dvh;
margin-top: 0px;
margin-left: 10px;
width: 59vw;
overflow: hidden;
position: relative;
border-radius: 8px;
display: inline-block;
}
.slide {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.7s;
z-index: 1;
pointer-events: none;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 8px;
}
/* Fade in when active */
.slide.active {
opacity: 1;
z-index: 3;
pointer-events: auto;
}
/* Random slide-out classes */
.slide.out-left { animation: outLeft 0.7s forwards; }
.slide.out-right { animation: outRight 0.7s forwards; }
.slide.out-top { animation: outTop 0.7s forwards; }
.slide.out-bottom { animation: outBottom 0.7s forwards; }
@keyframes outLeft { to { opacity: 0; transform: translateX(-100%); } }
@keyframes outRight { to { opacity: 0; transform: translateX(100%); } }
@keyframes outTop { to { opacity: 0; transform: translateY(-100%); } }
@keyframes outBottom { to { opacity: 0; transform: translateY(100%); } }
/* Arrow Controls */
.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 4;
background: rgba(30,30,30,0.6);
border: none;
color: #fff;
font-size: 2rem;
width: 40px;
height: 60px;
cursor: pointer;
outline: none;
border-radius: 6px;
transition: background 0.2s;
opacity: 0.85;
}
.arrow:hover { background: rgba(30,30,30,0.95); }
.arrow.left { left: 10px; }
.arrow.right { right: 10px; }
chatting, chatting bla bla bla
←
→
chatting, chatting bla bla bla
←
→
chatting, chatting bla bla bla
// Random sides array for exit transition
const sides = ['out-left', 'out-right', 'out-top', 'out-bottom'];
// Slideshow class for multiple independent instances
class Slideshow {
constructor(container, intervalMs) {
this.container = container;
this.slides = Array.from(container.querySelectorAll('.slide'));
this.leftBtn = container.querySelector('.arrow.left');
this.rightBtn = container.querySelector('.arrow.right');
this.current = 0;
this.intervalMs = intervalMs;
this.timer = null;
this.isAuto = true;
this.leftBtn.addEventListener('click', () => this.onArrow('left'));
this.rightBtn.addEventListener('click', () => this.onArrow('right'));
this.startAuto();
}
startAuto() {
this.stopAuto();
this.isAuto = true;
this.timer = setTimeout(() => this.next(1, true), this.intervalMs);
}
stopAuto() {
if (this.timer) clearTimeout(this.timer);
this.isAuto = false;
}
onArrow(direction) {
// If auto, pause and allow manual navigation
if (this.isAuto) {
this.stopAuto();
} else {
this.next(direction === 'right' ? 1 : -1, false);
}
}
next(dir, auto = false) {
const oldIdx = this.current;
let newIdx = (oldIdx + dir + this.slides.length) % this.slides.length;
// Prepare classes
this.setOutTransition(oldIdx);
this.showSlide(newIdx);
this.current = newIdx;
if (auto && this.isAuto) {
this.timer = setTimeout(() => this.next(1, true), this.intervalMs);
}
}
setOutTransition(idx) {
const outClass = sides[Math.floor(Math.random() * sides.length)];
const slide = this.slides[idx];
slide.classList.remove('active');
slide.classList.remove('out-left','out-right','out-top','out-bottom');
// Apply random out direction
slide.classList.add(outClass);
// Remove out class after animation
setTimeout(() => slide.classList.remove(outClass), 700);
}
showSlide(idx) {
this.slides.forEach((s, i) => {
if (i === idx) s.classList.add('active');
else s.classList.remove('active');
});
}
}
// Setup multiple slideshows with different showtimes
new Slideshow(document.getElementById('slideshow1'), 6000);
new Slideshow(document.getElementById('slideshow2'), 8500);
Подробнее здесь: https://stackoverflow.com/questions/797 ... cture-show
