v2.5.2
Giriş yap

SWİPER SLİDER aktif slider ile başlatmak istiyorum

devnanotek
396 defa görüntülendi

Merhaba arkadaşlar, bir menü barım var, menü barda swiper slider kullandım
tab mantığı gibi aktif olan menü elemanım sayfa yenilendiğinde onun seçili olmasını ve ortada olmasını istiyorum

Görsel 1 :

Görsel görünmüyorsa linki

Görsel 2 :

Görsel görünmüyorsa linki

Görsel 3 :

Görsel görünmüyorsa linki

 <!-- PANEL MENU -->
 <section>
  <div class="menu_panel mb-5">
    <div class="container-xxl d-flex h-100">
      <div class="swiper">
        <ul class="ul_sifirla panel_ul swiper-wrapper">
          <li class="swiper-slide"> <a href="profil_panel.php" class="active"><i class="fa-solid fa-house"></i> <span>Overview</span></a> </li>
          <li class="swiper-slide"> <a href="profil_apply.php"><i class="fa-solid fa-briefcase"></i> <span>My Applications</span></a> </li>
          <li class="swiper-slide"> <a href="p_job_preferences.php"><i class="fa-solid fa-sliders"></i> <span>Job Preferences</span></a> </li>
          <li class="swiper-slide"> <a href="p_profil.php"><i class="fa-regular fa-circle-user"></i> <span>Personal Information</span></a> </li>
          <li class="swiper-slide"> <a href="profil_settings.php"><i class="fa-solid fa-gear"></i> <span>Settings</span></a> </li>
        </ul>
        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </div>
  </div>
</section>

SWIPER JS KOD :

var swiper = new Swiper(".swiper", {
  slidesPerView: "auto",
  grabCursor: true,
  spaceBetween: 30,
  navigation: {nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', },
});


Swiper aktif olan slider

> "swiper-slide-active" 

class'ını atıyor.
örnek ben menüdeki
settings menüsüne bu class verdim sayfa yenilendiğinde settings ekranda olmasını istiyorum ama
sayfa yenilenince slider en baştakini gösteriyor, overwiev olan menüyü gösteriyor.

örnek aldığım site sanırım bu işlemi react ile yapmış, sayfa yenilenmeden tüm sekme içeriği değişiyor
ben geleneksel kodladığım için :) bunu swiper yada farklı bir js kütüphaneside olur önereceğiniz çözüm yada desteği bekliyorum :(

Draggable Slider Tabs olarakta araştırdım
ama maalesef sayfa yenilendiğinde aktif olan elemanı gösterme işlemini yapamadım :(

owl slider Url Hash Navigation ile yapabilirim ama linkte ek birşey olmasını istemiyorum
menü mantığı gibi aktif class yada id vb. vereceğim eleman ekranda olmasını istiyorum...

Destek ve önerilerinizi bekliyorum

SAYGILARIMLA...

devepdogukan
642 gün önce

var swiper = new Swiper(".swiper", {
  initialSlide: 6, //Aktif olacak slide index'i
  slidesPerView: "auto",
  grabCursor: true,
  spaceBetween: 30,
  navigation: {nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', },
});