Javascript Slider

11.08.2017 11:59

yalvace WM Aracı Kullanıcı

Üyelik 31.12.2016
Yaş/Cinsiyet 25 / E
Meslek Full Stack Developer
Konum İstanbul Anadolu

Ad Soyad E** Y**
Mesajlar 69
Beğeniler 10 / 5
Ticaret 0, (%0)

Merhabalar arkadaşlar,

Elimde divleri slider haline getirebilecek bir fonksiyon var fakat şöyle bir sorunum var. Tasarımda iki bölümde slider var ve bu fonksiyonu kullanmalıyım. İlk divimin sliderini ilerletince ikinici slider'da aynı fonksiyonu kullandığı için o da ilerliyor. Bunu nasıl çözebilirim ?

Fonksiyonum :

var slideIndex = 1;

showSlides(slideIndex);



function plusSlides(n) {

  showSlides(slideIndex += n);

}



function currentSlide(n) {

  showSlides(slideIndex = n);

}



function showSlides(n) {

  var i;

  var slides = document.getElementsByClassName("mySlides");

  var dots = document.getElementsByClassName("dot");

  if (n > slides.length) {slideIndex = 1}

  if (n < 1) {slideIndex = slides.length}

  for (i = 0; i < slides.length; i++) {

      slides[i].style.display = "none";

  }

  for (i = 0; i < dots.length; i++) {

      dots[i].className = dots[i].className.replace(" active", "");

  }

  slides[slideIndex-1].style.display = "block";

  dots[slideIndex-1].className += " active";

}

11.08.2017 12:06

#2

FurkanKandemir WM Aracı Kullanıcı

Üyelik 25.05.2015
Yaş/Cinsiyet 32 / E
Meslek Web Yazılım Uzmanı
Konum İstanbul Anadolu

Ad Soyad F** K**
Mesajlar 833
Beğeniler 0 / 287
Ticaret 13, (%100)

Tetiklerken aynı fonk. tetiklenirse öyle olur. 2. Sliderın div ve ya idlerini değiştirip deneyiniz. Daha sonra bu değişikliği fonk. lara da uygulamanız gereklidir.

11.08.2017 12:20

#3

yalvace WM Aracı Kullanıcı

Üyelik 31.12.2016
Yaş/Cinsiyet 25 / E
Meslek Full Stack Developer
Konum İstanbul Anadolu

Ad Soyad E** Y**
Mesajlar 69
Beğeniler 10 / 5
Ticaret 0, (%0)

Denedim fakat ilk sliderimdaki içerikler birbirine giriyor o şekilde

FurkanKandemir

11.08.2017 12:51

#4

FurkanKandemir WM Aracı Kullanıcı

Üyelik 25.05.2015
Yaş/Cinsiyet 32 / E
Meslek Web Yazılım Uzmanı
Konum İstanbul Anadolu

Ad Soyad F** K**
Mesajlar 833
Beğeniler 0 / 287
Ticaret 13, (%100)

2. sliderın id ve class'larını değişince haliyle css ile de ekleme yapmanız gereklidir.

11.08.2017 12:55

#5

Guvven - Mutlu Sona Yaklaşırken. Kullanıcı

Üyelik 20.06.2016
Yaş/Cinsiyet 35 / E
Meslek Freestyle Web Designer
Konum Aydın

Ad Soyad G** C**
Mesajlar 632
Beğeniler 0 / 196
Ticaret 9, (%89)

yalvace daha önce kullanmıştım.. test edebilirsin..





















  

    1 / 4

    

    Caption Text

  



  

    2 / 4

    

    Caption Two

  



  

    3 / 4

    

    Caption Three

  

  

    

    4 / 4

    

    Caption Four

  



  ❮

  ❯





  

  

  

   


























  

    1 / 3

    

    Caption Text

  



  

    2 / 3

    

    Caption Two

  



  

    3 / 3

    

    Caption Three

  



  ❮

  ❯



  

  

  

  







<script>

(function() {



  init(); //on page load - show first slide, hidethe rest



  function init() {



    parents = document.getElementsByClassName('slideshow-container');



    for (j = 0; j < parents.length; j++) {

      var slides = parents[j].getElementsByClassName("mySlides");

      var dots = parents[j].getElementsByClassName("dot");

      slides[0].classList.add('active-slide');

      dots[0].classList.add('active');

    }

  }



  dots = document.getElementsByClassName('dot'); //dots functionality



  for (i = 0; i < dots.length; i++) {



    dots[i].onclick = function() {



      slides = this.parentNode.parentNode.getElementsByClassName("mySlides");



      for (j = 0; j < this.parentNode.children.length; j++) {

        this.parentNode.children[j].classList.remove('active');

        slides[j].classList.remove('active-slide');

        if (this.parentNode.children[j] == this) {

          index = j;

        }

      }

      this.classList.add('active');

      slides[index].classList.add('active-slide');



    }

  }

//prev/next functionality

  links = document.querySelectorAll('.slideshow-container a');



  for (i = 0; i < links.length; i++) {

    links[i].onclick = function() {

      current = this.parentNode;



      var slides = current.getElementsByClassName("mySlides");

      var dots = current.getElementsByClassName("dot");

      curr_slide = current.getElementsByClassName('active-slide')[0];

      curr_dot = current.getElementsByClassName('active')[0];

      curr_slide.classList.remove('active-slide');

      curr_dot.classList.remove('active');

      if (this.className == 'next') {



        if (curr_slide.nextElementSibling.classList.contains('mySlides')) {

          curr_slide.nextElementSibling.classList.add('active-slide');

          curr_dot.nextElementSibling.classList.add('active');

        } else {

          slides[0].classList.add('active-slide');

          dots[0].classList.add('active');

        }



      }



      if (this.className == 'prev') {



        if (curr_slide.previousElementSibling) {

          curr_slide.previousElementSibling.classList.add('active-slide');

          curr_dot.previousElementSibling.classList.add('active');

        } else {

          slides[slides.length - 1].classList.add('active-slide');

          dots[slides.length - 1].classList.add('active');

        }



      }



    }



  }

})();

</script>

1 kişi bu mesajı beğendi.

11.08.2017 13:52

#6

yalvace WM Aracı Kullanıcı

Üyelik 31.12.2016
Yaş/Cinsiyet 25 / E
Meslek Full Stack Developer
Konum İstanbul Anadolu

Ad Soyad E** Y**
Mesajlar 69
Beğeniler 10 / 5
Ticaret 0, (%0)

Maalesef sorun devam ediyor..

16.08.2017 10:05

#7

yalvace WM Aracı Kullanıcı

Üyelik 31.12.2016
Yaş/Cinsiyet 25 / E
Meslek Full Stack Developer
Konum İstanbul Anadolu

Ad Soyad E** Y**
Mesajlar 69
Beğeniler 10 / 5
Ticaret 0, (%0)

Başka bir çözüm yolu varmı acaba ? Farklı bir fw yada fonksiyonda olabilir..

17.08.2017 10:25

#8

yalvace WM Aracı Kullanıcı

Üyelik 31.12.2016
Yaş/Cinsiyet 25 / E
Meslek Full Stack Developer
Konum İstanbul Anadolu

Ad Soyad E** Y**
Mesajlar 69
Beğeniler 10 / 5
Ticaret 0, (%0)

Güncel arkadaşlar sorunum devam ediyor :(

Javascript Slider

Üye Girişi Yap