v2.5.2
Giriş yap

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

devnanotek
395 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...

Cevap yaz
Cevaplar (2)
devnanotek
635 gün önce

@devepdogukan

Hocam teşekkür ederim aynen bunu arıyordum, yalnız benim yaptığım çalışmada bu slider numarasına göre işlem yapmıyor
bunun sebebi sanırım swiper-slide classına width: auto; vermem
eğer slider elemanlarım 100% olsaydı

  1. slider dediğimde ilk menü elemanı 6 dediğimde 6.eleman ekranda olurdu

benim çalışmamda aynı anda birden fazla swiper-slide göründüğü için ilk gözükenler slider 1 sayılıyor ekranda görünmeyenler slider 2 sayılıyor
bunuda 768'den sonra diğer elemnlarınkine 2 verdim en sonda kalanlar için 5 kullandım ve şimdilik bu şekilde iş görüyor gibi :)

eğer bunun direk active classı alanı göstermek gibi birşey varsa o süper olurdu :)

Değerli ve kıymetli cevabınız ve çözümünüz için çok teşekkür ederim hocam

SAYGILARIMLA...

devepdogukan
641 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', },
});