Swiper slider ilk slider da text parallax çalışmıyor

Merhaba arkadaşlar,
swiper slider ile ilgili bir sorun yaşadım
sliderim da yapmak istediğim resim yüklendikten sonra title paralax efectim ile gelmesini istiyorum

bunu yapabildim ama ilk slider da çalışmıyor, bir çok deneme yaptım ve araştırdım bir türlü başaramadım
ilk slider yüklendiğinde resim geldikten sonra text kayarak gelmesini istiyorum

aşağıda slider kodlarımı paylaştım bir index.html içerisinde çalıştırıp yaşadığım sorunu görebilirsiniz
ve çözüm üretmekte yardımcı olursanız sevinirim
slider geçişlerinde tüm sliderlarda geçişler çalışıyor.

Benim yapmak istediğim ilk slider yani siteye ilk girildiğinde resim gelsin sonra text gelsin

yardımcı olursanız sevinirim...

SAYGILARIMLA...

<link  rel="stylesheet"  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>



   	<div class="home_slider" data-parallax="true">
		<!-- Additional required wrapper -->
		<div class="swiper-wrapper">
			<!-- Slides -->
			<div class="swiper-slide">
				<img src="https://media.baamboozle.com/uploads/images/696394/1649085155_151634_import-url.jpeg" alt="etiket" data-swiper-parallax="-100"/>
				<div class="slider_title" data-swiper-parallax-y="50%" data-swiper-parallax-duration="3000">%50 VARAN İNDİRİM FIRSATLARI</div>
			</div>
			<div class="swiper-slide">
				<img src="https://thevillageatcumberlandpark.com/wp-content/uploads/2018/03/ThinkstockPhotos-872930764.jpg" alt="etiket" data-swiper-parallax="-100"/>
				<div class="slider_title" data-swiper-parallax="-50%"data-swiper-parallax-duration="3000">ALIŞVERİN EĞLENCELİ HALİ</div>
			</div>
			<div class="swiper-slide">
				<img src="https://webakula.ua/storage/1998/0ea679cc2aacae52cc309cc89d04f538.jpg" alt="etiket" data-swiper-parallax="-100"/>
				<div class="slider_title" data-swiper-parallax-y="80%" data-swiper-parallax-duration="3000">HARCADIKÇA KAZAN</div>
			</div>
		</div>
		<!-- If we need pagination -->
		<div class="swiper-pagination"></div>
		<!-- If we need navigation buttons -->
		<div class="swiper-button-prev"><i class="fa-solid fa-arrow-left-long"></i></div>
		<div class="swiper-button-next"><i class="fa-solid fa-arrow-right-long"></i></div>
	</div>
	
	<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

/* HOME SLIDER */
:root {--swiper-navigation-size: 3rem;}
.home_slider {position: relative;display: flex; width: 100%;height: 100%;overflow: hidden;background-color: var(--bg-white);}
.home_slider .swiper-wrapper .swiper-slide img{width:100%;height: 100%;object-fit: cover;}

/* varsayilan prev ve next icon sifirlama */
.home_slider .swiper-button-prev:after, .home_slider .swiper-button-next:after{content: ''!important;}
.home_slider .swiper-button-prev, .home_slider .swiper-button-next{width: 70px !important;top: auto !important;left: auto !important; bottom: 20px !important;color: var(--white);font-size: 2rem;transition: var(--t03);border-radius: 15px;}
.home_slider .swiper-button-prev:hover, .home_slider .swiper-button-next:hover{background-color: var(--bg-white);color: var(--black);}
.home_slider .swiper-button-prev{right: 100px !important;}
.home_slider .swiper-button-next{right: 20px !important;}

.swiper-slide{position: relative;}
.slider_title{position: absolute;z-index: 99;top: 50%;left: 10%;font-size: 5rem;text-shadow: 1px 2px 3px #fff;}

/* HOME SLIDER */
var home_slider = new Swiper(".home_slider", {
  lazy: true,
  loop: true,
  effect: 'fade',
  speed: 1000,
  parallax: true,
  navigation: {nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', },
  pagination: {el: ".swiper-pagination", clickable: true,},
  autoplay: {delay: 5000},
  keyboard: {
    enabled: true,
    onlyInViewport: false
  },
  runCallbacksOnInit: true,
  

});

Swiper slider ilk slider da text parallax çalışmıyor

Soru hatalı mı? 👎

Cevap yaz

Cevaplar (0)