Hi, I have a problem with my slide.
I try to do it like this https://stackblitz.com/edit/swiper-demo-13-centered?file=index.html
but when I put my slide in the container that has the “swiper-wrapper” class, it won’t let me scroll I don’t know why that happens, but if I remove it from the container that contains the “swiper-wrapper” class, some idea works normal for me. that can help me.
My constant for slide options:
const slideOpts = {
slidesPerView: 3,
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
autoplay: true
},
on: {
beforeInit() {
const swiper = this;
swiper.classNames.push(`${swiper.params.containerModifierClass}coverflow`);
swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);
swiper.params.watchSlidesProgress = true;
swiper.originalParams.watchSlidesProgress = true;
},
setTranslate() {
const swiper = this;
const {
width: swiperWidth, height: swiperHeight, slides, $wrapperEl, slidesSizesGrid, $
} = swiper;
const params = swiper.params.coverflowEffect;
const isHorizontal = swiper.isHorizontal();
const transform$$1 = swiper.translate;
const center = isHorizontal ? -transform$$1 + (swiperWidth / 2) : -transform$$1 + (swiperHeight / 2);
const rotate = isHorizontal ? params.rotate : -params.rotate;
const translate = params.depth;
// Each slide offset from center
for (let i = 0, length = slides.length; i < length; i += 1) {
const $slideEl = slides.eq(i);
const slideSize = slidesSizesGrid[i];
const slideOffset = $slideEl[0].swiperSlideOffset;
const offsetMultiplier = ((center - slideOffset - (slideSize / 2)) / slideSize) * params.modifier;
let rotateY = isHorizontal ? rotate * offsetMultiplier : 0;
let rotateX = isHorizontal ? 0 : rotate * offsetMultiplier;
// var rotateZ = 0
let translateZ = -translate * Math.abs(offsetMultiplier);
let translateY = isHorizontal ? 0 : params.stretch * (offsetMultiplier);
let translateX = isHorizontal ? params.stretch * (offsetMultiplier) : 0;
// Fix for ultra small values
if (Math.abs(translateX) < 0.001) translateX = 0;
if (Math.abs(translateY) < 0.001) translateY = 0;
if (Math.abs(translateZ) < 0.001) translateZ = 0;
if (Math.abs(rotateY) < 0.001) rotateY = 0;
if (Math.abs(rotateX) < 0.001) rotateX = 0;
const slideTransform = `translate3d(${translateX}px,${translateY}px,${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
$slideEl.transform(slideTransform);
$slideEl[0].style.zIndex = -Math.abs(Math.round(offsetMultiplier)) + 1;
if (params.slideShadows) {
// Set shadows
let $shadowBeforeEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');
let $shadowAfterEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');
if ($shadowBeforeEl.length === 0) {
$shadowBeforeEl = swiper.$(`<div class="swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}"></div>`);
$slideEl.append($shadowBeforeEl);
}
if ($shadowAfterEl.length === 0) {
$shadowAfterEl = swiper.$(`<div class="swiper-slide-shadow-${isHorizontal ? 'right' : 'bottom'}"></div>`);
$slideEl.append($shadowAfterEl);
}
if ($shadowBeforeEl.length) $shadowBeforeEl[0].style.opacity = offsetMultiplier > 0 ? offsetMultiplier : 0;
if ($shadowAfterEl.length) $shadowAfterEl[0].style.opacity = (-offsetMultiplier) > 0 ? -offsetMultiplier : 0;
}
}
// Set correct perspective for IE10
if (swiper.support.pointerEvents || swiper.support.prefixedPointerEvents) {
const ws = $wrapperEl[0].style;
ws.perspectiveOrigin = `${center}px 50%`;
}
},
setTransition(duration) {
const swiper = this;
swiper.slides
.transition(duration)
.find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')
.transition(duration);
}
}
}
My Slide:
<ion-slides class="swiper-container ios slides-ios hydrated swiper-container-initialized swiper-container-horizontal" pager="false" style="cursor: grab;" [options]="slideOpts">
<!---->
<div class="swiper-wrapper">
<ion-slide class="ios swiper-slide swiper-zoom-container hydrated swiper-slide-next">
<ion-card class="food-main-h-card food-card2 slide-left ios hydrated">
<div class="food-card2-bg ion-text-uppercase" style="background-image: url("https://images.pexels.com/photos/772513/pexels-photo-772513.png?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260");">
<h2 class="card2-title"> </h2>
</div>
</ion-card>
</ion-slide>
<ion-slide class="ios swiper-slide swiper-zoom-container hydrated swiper-slide-next">
<ion-card class="food-main-h-card food-card2 slide-left ios hydrated">
<div class="food-card2-bg ion-text-uppercase" style="background-image: url("https://images.pexels.com/photos/772513/pexels-photo-772513.png?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260");">
<h2 class="card2-title"> </h2>
</div>
</ion-card>
</ion-slide>
<ion-slide class="ios swiper-slide swiper-zoom-container hydrated swiper-slide-next">
<ion-card class="food-main-h-card food-card2 slide-left ios hydrated">
<div class="food-card2-bg ion-text-uppercase" style="background-image: url("https://images.pexels.com/photos/772513/pexels-photo-772513.png?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260");">
<h2 class="card2-title"> </h2>
</div>
</ion-card>
</ion-slide>
<ion-slide class="ios swiper-slide swiper-zoom-container hydrated swiper-slide-next">
<ion-card class="food-main-h-card food-card2 slide-left ios hydrated">
<div class="food-card2-bg ion-text-uppercase" style="background-image: url("https://images.pexels.com/photos/772513/pexels-photo-772513.png?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260");">
<h2 class="card2-title"> </h2>
</div>
</ion-card>
</ion-slide>
</div>
</ion-slides>
My idea is that it looks like this:
And not like this
I’ve already tried CSS but haven’t succeeded