• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Slideshow Problem

A

alex141097

New member
Hey Leute,

Ich hoffe ihr könnt mir helfen bei einem Problem mit meiner Slideshow. Ich habe ein Slideshow Script welches sehr gut funktioniert, bis auf das es, wenn es beim letzten Slide ankommt, immer sofort auf den ersten Slide zurück springt. Also ist der letzte Slide nur für eine Sekunde sichtbar und sofort springt die Slideshow dann zurück zum Anfang. Ich sitze nun seit Stunden dadran und google wie verrückt, doch komme zu keiner Lösung.

Vielleicht kann mir ja einer von euch helfen? Hier ist mein Script:

HTML: 
<div id="slider">
	<div class="indicator">
		<div class="previous"></div>
			<div class="next"></div>
	</div>
	
       <ul class="slides">
		<li class="slide">
			<img src="/image1.png" alt="">
				<div class="info">
					<a href=""><h3>Lorem ipsum dolor sit amet, consectetur.</h3></a>
		                               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
				</div>
		</li>

                <li class="slide">
			<img src="/image2.png" alt="">
				<div class="info">
					<a href=""><h3>Lorem ipsum dolor sit amet, consectetur.</h3></a>
		                               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
				</div>
		</li>

                 <li class="slide">
			<img src="/image3.png" alt="">
				<div class="info">
					<a href=""><h3>Lorem ipsum dolor sit amet, consectetur.</h3></a>
		                               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
				</div>
		</li>
										
	</ul>
</div>

Code: 
$(function() {
	
	//Configuration 
	var pause =3000;
	var speed=1000;
	var width=827;
	var current=1;

	//cach
	var $slider=$('#slider');
	var $container=$slider.find('.slides');
	var $slides=$container.find('.slide');

	//slide js variable
	var interval;

	//Slide Main function
	function startSlider(){
	interval= setInterval(function(){
		$container.animate({'margin-left':'-='+width},speed, function(){
			current++;
			if (current===$slides.length) {
				current=1;
				$container.css('margin-left', 0);
				};
			});
		},pause);
	}

	// stop slide function  
	function stopSlider(){
		clearInterval(interval);
	}

	//When you keep your Mouse on slide, it will be pause
	// And when keep out your Mouse from slide it will be sliding 
	$slider.on('mouseenter', stopSlider).on('mouseleave', startSlider);

	// After keep out mouse from slide, then start slide function 
	startSlider();

	//Left indicator, that slide start from start point, function
	function lincoln(){
		$container.animate({'margin-left': '+='+width}, speed, function(){
				// current--;
				// if (current ===1) {
				// current=$slides.length;
				$container.css('margin-left',0);
			// };
		}), pause;
	}

	//Right indicator, that slide start from its own position, function
	function mahmud(){
		$container.animate({'margin-left':'-='+width}, speed, function(){
			current++;
			if (current===$slides.length) {
				current=1;
				$container.css('margin-left', 0);
			};
		}), pause;
	}

	//When you click on Left indicator it will work
	$('.previous').click(function(){
		lincoln();
	});

	//When you click on Right indicator it will work
	$('.next').click(function(){
		mahmud();
	});
	
});

Alles Liebe,

Alex
 
Zuletzt bearbeitet:
Hey,

schreib mal das "current++;" nach der If-Anweisung :). Ich habe das dumpfe Gefühl das er direkt wenn der max wert erreicht wird es gleich auf 1 stellt und dadurch wieder zum Anfang scrollt ;)

Sprich:

Code: 
$(function() {
	
	//Configuration 
	var pause =3000;
	var speed=1000;
	var width=827;
	var current=1;

	//cach
	var $slider=$('#slider');
	var $container=$slider.find('.slides');
	var $slides=$container.find('.slide');

	//slide js variable
	var interval;

	//Slide Main function
	function startSlider(){
	interval= setInterval(function(){
		$container.animate({'margin-left':'-='+width},speed, function(){
			if (current===$slides.length) {
				current=1;
				$container.css('margin-left', 0);
				};
			});
                        [B]current++;[/B]
		},pause);
	}

	// stop slide function  
	function stopSlider(){
		clearInterval(interval);
	}

	//When you keep your Mouse on slide, it will be pause
	// And when keep out your Mouse from slide it will be sliding 
	$slider.on('mouseenter', stopSlider).on('mouseleave', startSlider);

	// After keep out mouse from slide, then start slide function 
	startSlider();

	//Left indicator, that slide start from start point, function
	function lincoln(){
		$container.animate({'margin-left': '+='+width}, speed, function(){
				// current--;
				// if (current ===1) {
				// current=$slides.length;
				$container.css('margin-left',0);
			// };
		}), pause;
	}

	//Right indicator, that slide start from its own position, function
	function mahmud(){
		$container.animate({'margin-left':'-='+width}, speed, function(){
			if (current===$slides.length) {
				current=1;
				$container.css('margin-left', 0);
			};
                        [B]current++;[/B]
		}), pause;
	}

	//When you click on Left indicator it will work
	$('.previous').click(function(){
		lincoln();
	});

	//When you click on Right indicator it will work
	$('.next').click(function(){
		mahmud();
	});
	
});
 
Hey,

Schon mal vielen Dank für deine schnelle Antwort! Ich habe es probiert, doch irgendwie scheint auch das nicht so wirklich zu helfen :confused::confused:


EDIT: Sehr komisch, es klappt bei mir nach deiner Änderung scheinbar doch manchmal. Wenn ich es durch scrollen lasse, ist es so, dass er nur bei jedem 6-7 mal beim 3 Slide stehen bleibt.
 
Zuletzt bearbeitet:
Dann mach doch mal in der If-Anweisung ein Alert rein ;) und sag mir / uns ob die Funktion/Intervall am ende 1 oder aus irgendeinem Grund 2 mal aufgerufen wird.
 
Mach einfach mal zum Test den Intervall sehr hoch also pause=10000 oder so... es kann sein das sich das .animate überschneidet ;) berichte wenn das funktionieren sollte... bin gerade nicht in der Lage es zu testen sry :D
 
Ne das funktioniert wieder nur beim ersten mal und dann wieder nicht. Ich komm aber beim besten Willen nicht drauf, was falsch ist ..
 
Nun habe ich es :D und ja es liegt wirklich an dem current++;

änder das mal so ab in deinem Intervall:

Code: 
//Slide Main function
function startSlider(){
	interval= setInterval(function()
	{
		$container.animate({'margin-left':'-='+width},speed, function(){
			alert(current);
			if (current===$slides.length)
			{
				current=1;
				$container.css('margin-left', 0);
			} 
			else 
			{ 
				current++;
			}
		});
	},pause);
}

Das Alert rausnehmen wenn alles funktioniert ;D
 
Wow es klappt, vielen vielen Dank!!!

Wäre es zu frech dich noch um einmal Hilfe zu bitten? Ich sitze außerdem an dem Problem, dass wenn er von dem 3 auf den 1 Slide wechselt, nicht diese tolle Animation hat, dass er das kommende Bild reinschiebt, sondern vom 3 auf den 1 Slide wechselt er von dem 3 Bild zu nem weißen Bild und erst dann zeigt er das 1 Bild an. Verstehst du was ich meine? Ist es möglich das er wie, wenn er von dem 1 zum 2 Slide wechselt oder vom 2 zum 3, dass 1 Bild beim rüberwechseln schon anzeigt, statt dem hässlichen weissen für den kurzen moment? Wenn das nicht verständlich erklärt ist, kann ich auch ein kurzes Video hochladen.
 
Ja da musst du den Part ändern:
Code: 
$container.css('margin-left', 0);

Vllt durch das hier:
Code: 
$container.animate({'margin-left':'+='+(width*$slides.length)},(speed*2));

PS habe es nicht getestet ;) vllt würde sich hier auch eher ein fade besser machen :)
 
Ein wenig googeln schadet nicht :S...

z.B. indem du das hier:

Code: 
$container.css('margin-left', 0);

in das hier abänderst:
Code: 
$container.fadeOut("slow", function() {
	$container.css('margin-left', 0);
	$container.fadeIn("slow");
});
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben