Skocz do zawartości

Zdjęcie
* * * * * 1 głosy

Pomoc w uruchomieniu autoplay slidera

javascript slider

4 odpowiedzi w tym temacie
  • Zaloguj się, aby dodać odpowiedź
Sekko

    Nowy użytkownik

  • 3 postów
0
Neutralna

Napisano 03 listopada 2015 - 14:18

#1

Witam wszystkich!

Jako, że jesteście mądrymi ludźmi proszę Was o pomoc w "uruchomieniu" slidera :) Nie znam się kompletnie na Javascripcie tylko html i css - męcze się z tym na różne sposoby już 2 dni :(. Proszę o pomoc w uruchomieniu autoprzewijania w sliderze. Metodę "clickania" wyszukałem tu na forum, ale nie moge jej w żaden sposób spiąć ze sliderem aby się przewijał. Jquery itp - podpięte :)

HTML slidera:

	<div class="slider">
	  <div class="arrows">
	    <a class="previous previous-slide" href="#"><</a>
	    <a class="next next-slide" href="#">></a>
	  </div>
	  <div class="slides">
			<div class="slide active picture1">
			<center>
				<div class="slide-content">
				<h2>Konfekcjonowanie</h2>
				<p>Clocks+ helps you break the barriers of space and time to get information for any city you like. You can search for and organise your favorite cities so that you can easily find out the correct local time.</p>
				<a target="_blank" href="https://itunes.apple.com/gb/app/clocks+/id937380413?mt=8">Check me out</a>
				</div>
				</center>
			</div>
			<div class="slide picture2">
			<center>
				<div class="slide-content">
				<h2>Timezones</h2>
				<p>Clocks+ helps you break the barriers of space and time to get information for any city you like. You can search for and organise your favorite cities so that you can easily find out the correct local time.</p>
				<a target="_blank" href="https://itunes.apple.com/gb/app/clocks+/id937380413?mt=8">Check me out</a>
				</div>
				</center>
			</div>
			<div class="slide picture3">
			<center>
				<div class="slide-content">
				<h2>Timezones</h2>
				<p>Clocks+ helps you break the barriers of space and time to get information for any city you like. You can search for and organise your favorite cities so that you can easily find out the correct local time.</p>
				<a target="_blank" href="https://itunes.apple.com/gb/app/clocks+/id937380413?mt=8">Check me out</a>
				</div>
				</center>
			</div>
		</div>
		<div class="bullets">
		</div>
	</div>

i obecny Javascript:

var $slider = $(".slider"), $bullets = $(".bullets");
		function calculateHeight(){
			var height = $(".slide.active").outerHeight();
			$slider.height(height);
		}

		$(window).resize(function() {
			calculateHeight();
		    clearTimeout($.data(this, 'resizeTimer'));
		});
		
		function resetSlides(){
			$(".slide.inactive").removeClass("inactiveRight").removeClass("inactiveLeft");
		}

		function gotoSlide($activeSlide, $slide, className){
			 $activeSlide.removeClass("active").addClass("inactive "+className);
			 $slide.removeClass("inactive").addClass("active");
			 calculateHeight();
			 resetBullets();
			 setTimeout(resetSlides, 300);
		}

		$(".next").on("click", function(){
			 var $activeSlide = $(".slide.active"),
				 $nextSlide = $activeSlide.next(".slide").length != 0 ? $activeSlide.next(".slide") : $(".slide:first-child");
				 console.log($nextSlide);
				 gotoSlide($activeSlide, $nextSlide, "inactiveLeft");
		});
		$(".previous").on("click",  function(){
			 var $activeSlide = $(".slide.active"),
				 $prevSlide = $activeSlide.prev(".slide").length != 0 ? $activeSlide.prev(".slide") : $(".slide:last-child");

				 gotoSlide($activeSlide, $prevSlide, "inactiveRight");
		});
		$(document).on("click", ".bullet", function(){
			if($(this).hasClass("active")){
				return;
			}
			var $activeSlide = $(".slide.active");
			var currentIndex = $activeSlide.index();
			var targetIndex = $(this).index();
			console.log(currentIndex, targetIndex);
			var $theSlide = $(".slide:nth-child("+(targetIndex+1)+")");
			gotoSlide($activeSlide, $theSlide, currentIndex > targetIndex ? "inactiveRight" : "inactiveLeft");
		})
		function addBullets(){
			var total = $(".slide").length, index = $(".slide.active").index();
			for (var i=0; i < total; i++){
				var $bullet = $("<div>").addClass("bullet");
				if(i==index){
					$bullet.addClass("active");	
				}
				$bullets.append($bullet);
			}
		}
		function resetBullets(){
			$(".bullet.active").removeClass("active");
			var index = $(".slide.active").index()+1;
			console.log(index);
			$(".bullet:nth-child("+index+")").addClass("active");
		}
		addBullets();
		calculateHeight();

    function zmianaslajdu() {
                counter++;
                showCurrent();
             }
                
            function zmianaslajdu2() {
                counter--;
                showCurrent();
             }
            
            interval = setInterval(zmianaslajdu, 5000);
            zmianaslajdu();
                
            // add click events to prev & next buttons 
            document.querySelector('.next').addEventListener('click', function() {
                counter++;
                showCurrent();
                clearInterval(interval);
                interval = setInterval(zmianaslajdu, 5000);
                zmianaslajdu();
              }, false);
     
            document.querySelector('.previous').addEventListener('click', function() {
                counter--;
                showCurrent();
                clearInterval(interval);
                interval = setInterval(zmianaslajdu2, 5000);
                zmianaslajdu2();
              }, false);		

  • 0

Sekko

    Nowy użytkownik

  • 3 postów
0
Neutralna

Napisano 03 listopada 2015 - 17:58

#2
Ok, udało się rozwiązać - może się komuś przyda: $(function() { $('.next').each(function(){ var button = $(this); setInterval(function() {button.click();}, 5000); }); });
  • 0

zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 03 listopada 2015 - 18:03

#3

Ok, udało się rozwiązać - może się komuś przyda: $(function() { $('.next').each(function(){ var button = $(this); setInterval(function() {button.click();}, 5000); }); });

zacząłem Ci pisać odpowiedź, ale chyba nie wysłałem.

Nie wystarczy w opcjach ustawić autoplay: true, ? Tak mówi dokumentacja


UPDATE: Ok, pomyliłem tematy. Chodziło mi o to: http://web-talk.pl/t...ijanie-slidera/


  • 0

unbreak

    WT Elite

  • 1 937 postów
    • Czas spędzony online: 27d 8h 43m 36s
506
Znakomita!
  • Location/home/unbreak

Napisano 04 listopada 2015 - 08:23

#4

Ok, udało się rozwiązać - może się komuś przyda: $(function() { $('.next').each(function(){ var button = $(this); setInterval(function() {button.click();}, 5000); }); });

Okej, ale raczej nie do końca jest to fajne rozwiązanie, czemu? Ponieważ jak klikniesz sam na button next to nie zresetuje Ci intervala, przez to bardzo szybko zmieni się slajd na kolejny, a nie dopiero po 5sek.

Proponuję to dać do jakiejś funkcji autoPlay() czy coś w tym rodzaju, setInterval przypisać do jakiejś zmiennej globalnej (w obrębie slider, np inv), w momencie wywołania ręcznego clicku dać clearInterval(inv), a na końcu autoPlay().


  • 1

webDeveloper


Sekko

    Nowy użytkownik

  • 3 postów
0
Neutralna

Napisano 04 listopada 2015 - 09:29

#5

Okej, ale raczej nie do końca jest to fajne rozwiązanie, czemu? Ponieważ jak klikniesz sam na button next to nie zresetuje Ci intervala, przez to bardzo szybko zmieni się slajd na kolejny, a nie dopiero po 5sek.

Proponuję to dać do jakiejś funkcji autoPlay() czy coś w tym rodzaju, setInterval przypisać do jakiejś zmiennej globalnej (w obrębie slider, np inv), w momencie wywołania ręcznego clicku dać clearInterval(inv), a na końcu autoPlay().

Faktycznie masz masz racje, taki błąd występuje. ten script, który dałem, też gdziesz tu na forum znalazlem :) czy w takim razie mógłbym liczyć na przerobienie kodu js?? jak już wspomniałem nie znam się kompletnie :)


  • 0





Podone tematy Collapse

  Temat Forum Autor Podsumowanie Ostatni post

Również z jednym lub większą ilością słów kluczowych: javascript, slider

Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych