I’m having flickering issue with a swiper in popup
the issue is not present if the swiper is not in a popup
here is the swiper code
<div class="section-container">
<div id="mobile-container" class="mobile-container image-1">
<div class="slider-element-container">
<div class="swiper-container11" dir="rtl">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="content">
<span class="headline">اعلان مجاني</span>
<span class="tag">24 ساعة</span>
<ul>
<li>يعرض في نطاق مدينتك</li>
<li>التواصل عن طريق التطبيق</li>
<li>يمكن ادراج مادة اعلانية واحدة (فيديو او صورة)</li>
</ul>
<button class="button" aria-label="Read more">اضف اعلانك</button>
</div>
</div>
<div class="swiper-slide">
<div class="content">
<span class="headline">اعلان محلي</span>
<span class="tag">اسبوع واحد</span>
<ul>
<li>يعرض في نطاق مدينتك.</li>
<li>التواصل داخل او خارج التطبيق.</li>
<li>يمكن ادراج مجموعة مواد اعلانية (فيديو او صورة).</li>
<li>يمكنك تغيير محتوى الإعلان في اي وقت.</li>
</ul>
<button class="button" aria-label="Read more">150 ريال</button>
</div>
</div>
<div class="swiper-slide">
<div class="content">
<span class="headline">اعلان متجر</span>
<span class="tag">اسبوع واحد</span>
<ul>
<li>يعرض في كل المدن والمناطق</li>
<li>التواصل داخل او خارج التطبيق.</li>
<li>يمكن ادراج مجموعة مواد اعلانية (فيديو او صورة).</li>
<li>يمكنك تغيير محتوى الإعلان في اي وقت.</li>
<li>ربط متجرك الإلكتروني بالإعلان</li>
</ul>
<button class="button" aria-label="Read more">500 ريال</button>
</div>
</div>
</div>
<div class="swiper-pagination11"></div>
</div>
</div>
</div>
</div>
here is the css
.mobile-container.image-3{ background-image: url('../assets/bg/1.jpg'); }
.mobile-container.image-2{ background-image: url('../assets/bg/2.jpg'); }
.mobile-container.image-1{ background-image: url('../assets/bg/3.jpg'); }
div.section-container {
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.mobile-container {
width: 100%;
height: 100%;
position: relative;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
-webkit-box-shadow: 0px 20px 30px -30px #202637;
box-shadow: 0px 20px 30px -30px #202637;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.mobile-container::before,
.mobile-container::after {
content: '';
display: block;
height: 140px;
width: 100%;
position: absolute;
left: 0;
z-index: 1;
}
.mobile-container::before {
top: 0;
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(rgba(0, 0, 0, 0)));
background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#000, endColorstr=rgba(0, 0, 0, 0), GradientType=0);
}
.mobile-container::after {
bottom: 0;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#000));
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=rgba(0, 0, 0, 0), endColorstr=#000, GradientType=0);
}
.swiper-pagination11 {
position: absolute;
text-align: center;
-webkit-transition: .3s opacity;
transition: .3s opacity;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
z-index: 10;
}
.slider-element-container {
position: relative;
z-index: 2;
height: calc(100% - 27px);
padding-bottom: 25px;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.slider-element-container .swiper-container11 {
width: 100%;
padding: 0 20px 40px;
height: 90%;
}
.slider-element-container .swiper-pagination-bullet {
background-color: rgba(255, 255, 255, 0.9);
}
.slider-element-container .swiper-pagination-bullet.swiper-pagination-bullet-active {
background-color: #F02B67;
}
.slider-element-container .swiper-slide {
width: 100%;
padding: 30px;
background-color: #FFF;
border-radius: 8px;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
opacity: 0.3;
height: 100%;
-webkit-transform: scale(0.85)!important;
transform: scale(0.85)!important;
}
.slider-element-container .swiper-slide .content {
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
opacity: 0;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.slider-element-container .swiper-slide .content .headline {
font-size: 22px;
line-height: 26px;
font-weight: 700;
color: #202637;
margin-bottom: 15px;
}
.slider-element-container .swiper-slide .content .tag {
padding: 4px 5px;
background-color: #202637;
color: #FFF;
font-size: 10px;
line-height: 10px;
font-weight: 700;
text-transform: uppercase;
display: inline-block;
margin-bottom: 40px;
border-radius: 4px;
}
.slider-element-container .swiper-slide .content button.button {
cursor: pointer;
width: 100%;
margin-top: auto;
text-align: center;
text-transform: uppercase;
font-weight: 600;
color: #FFF;
background-color: #F02B67;
border-radius: 6px;
border: 0 none;
-webkit-appearance: none;
-webkit-box-shadow: 0 10px 10px -10px rgba(240, 43, 103, 0.6);
box-shadow: 0 10px 10px -10px rgba(240, 43, 103, 0.6);
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.slider-element-container .swiper-slide .content button.button:hover {
-webkit-transform: translate(0, -2px);
transform: translate(0, -2px);
-webkit-box-shadow: 0 10px 10px -10px #F02B67;
box-shadow: 0 10px 10px -10px #F02B67;
}
.slider-element-container .swiper-slide .content button.button:focus {
outline: 1px dashed #202637;
}
.slider-element-container .swiper-slide.swiper-slide-active {
opacity: 1;
-webkit-transform: scale(1)!important;
transform: scale(1)!important;
}
.slider-element-container .swiper-slide.swiper-slide-active .content {
opacity: 1;
}
.infobox-container {
display: none;
}
@media screen and (min-width: 1024px) {
.infobox-container {
display: block;
position: absolute;
right: 50px;
bottom: 50px;
z-index: 99;
}
.infobox-container .infobox-toggle {
width: 50px;
height: 50px;
border-radius: 100px;
background: #E48873;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.infobox-container .social-media-links {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
position: absolute;
right: 80px;
bottom: 15px;
}
.infobox-container .social-media-links a {
margin: 0 15px;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.infobox-container .social-media-links a:hover {
-webkit-transform: translate(0, -2px);
transform: translate(0, -2px);
}
.infobox-container .social-media-links a:hover svg path {
fill: #E48873;
}
.infobox-container .infobox-detail-container {
display: none;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: absolute;
bottom: 80px;
min-width: 240px;
right: 0;
background: #FFF;
border-radius: 12px;
padding: 20px;
}
.infobox-container .infobox-detail-container.active {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.infobox-container .infobox-detail-container h4 {
margin-bottom: 15px;
font-size: 22px;
line-height: 24px;
font-weight: 600;
color: #000;
}
.infobox-container .infobox-detail-container p {
margin-bottom: 15px;
font-weight: 400;
font-size: 16px;
line-height: 20px;
color: #000;
}
.infobox-container .infobox-detail-container ul {
list-style: none;
padding: 0;
}
.infobox-container .infobox-detail-container ul li {
display: block;
list-style: none;
padding: 0;
margin-bottom: 6px;
}
.infobox-container .infobox-detail-container ul li:last-child {
margin: 0;
}
.infobox-container .infobox-detail-container ul li a {
display: block;
width: 100%;
padding: 5px 8px;
font-weight: 600;
font-size: 18px;
line-height: 20px;
background-color: #F4F4F4;
border-radius: 4px;
color: #000;
text-decoration: none;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.infobox-container .infobox-detail-container ul li a:hover {
background-color: #E48873;
color: #FFF;
}
}
here is the JS code for the swiper
adsSwiper = new Swiper('.swiper-container11', { direction: 'horizontal', loop: false, grabCursor: true, slidesPerView: 1.35, centeredSlides: true, spaceBetween: 20, roundLengths: true, pagination: { el: '.swiper-pagination11' } });
adsSwiper.on('slideChangeTransitionStart', function () {
$('.swiper-slide').removeClass('elevation-10');
$('.swiper-slide-active').addClass('elevation-10');
if (adsSwiper.activeIndex === 1) {
var mobileContainer = $('#mobile-container');
mobileContainer.removeClass();
mobileContainer.addClass('mobile-container');
mobileContainer.addClass('image-2');
} else if (adsSwiper.activeIndex === 2) {
var mobileContainer = $('#mobile-container');
mobileContainer.removeClass();
mobileContainer.addClass('mobile-container');
mobileContainer.addClass('image-3');
} else if (adsSwiper.activeIndex === 0) {
var mobileContainer = $('#mobile-container');
$('#mobile-container').removeClass();
$('#mobile-container').addClass('mobile-container');
$('#mobile-container').addClass('image-1');
}
});