Develop Reference

Pictures in a Jquery slideshow are stuttering and showing incorrectly

I have a slideshow of 5 images, every couple seconds. It's supposed to go to the next image, and loop.
What is currently occurring is the first image shows up, then transitions to the next. When the next appears, it flashes back to the first image. Then it goes to the third image as it should in the series, but flashes back to the first image again. This continues all the way through to the fifth image.
But once it cycles through to the first image again (after going through all five) everything works fine from there on. Each image sits for 3 seconds and then moves on, no jumping back to image one or anything.
Here's the code I'm using.
Html:
<div id="slideshow">
<div>
<img src="Images/1.gif">
</div>
<div>
<img src="Images/2.gif">
</div>
<div>
<img src="Images/3.gif">
</div>
<div>
<img src="Images/4.gif">
</div>
<div>
<img src="Images/5.gif">
</div>
</div>
CSS:
#slideshow {
clear: both;
margin: 50px auto;
position: relative;
max-width: 960px;
height: 643px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
#slideshow img {
max-width: 100%;
}
JS:
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(800)
.next()
.fadeIn(800)
.end()
.appendTo('#slideshow');
}, 3000);
The actual site I'm putting together is here so you can see it in action:
schmelzerwedding.com
Any help to make it not jump back like that would be greatly appreciated. Thank you!

Like I mentioned in my comment I think the use of appendTo() may be the culprit. I also believe it's not the best thing to do performance wise.
Here's a version that simply keeps track of which slide we're on and increases the number.
(function () {
var slideshow = document.getElementById('slideshow');
var slides = slideshow.getElementsByTagName('img');
var currSlide = 0;
var numSlides = slides.length;
// Set first slide to active
slides[currSlide].classList.add('active');
setInterval(function () {
slides[currSlide].classList.remove('active');
currSlide = (currSlide + 1) >= numSlides ? 0 : currSlide + 1;
slides[currSlide].classList.add('active');
}, 2000);
})();
#slideshow {
position: relative;
width: 200px;
height: 200px;
}
#slideshow img {
opacity: 0;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: opacity .2s ease-out;
}
#slideshow img.active {
opacity: 1;
}
<div id="slideshow">
<img src="http://placehold.it/199x199">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/201x201">
<img src="http://placehold.it/202x202">
</div>
Edit: If you (for some reason) don't want to use pure JS, here's the same code in jQuery:
(function () {
var slideshow = $('#slideshow');
var slides = slideshow.find('> *');
var currSlide = 0;
var numSlides = slides.length;
slides.eq(currSlide).addClass('active');
setInterval(function () {
slides.eq(currSlide).removeClass('active');
currSlide = (currSlide + 1) >= numSlides ? 0 : currSlide + 1;
slides.eq(currSlide).addClass('active');
}, 200);
})();

Using jQuery:
//Just for demo - takes a few secs to load the images
setTimeout(function(){
$('#ld').hide();
},500);
var cnt = 0;
$("#slideshow > div:gt(0)").hide();
setTimeout(showSlide, 2000);
function showSlide() {
cnt++;
cnt = (cnt>3)?0:cnt;
$("#slideshow > div").fadeOut();
$("#slideshow > div:eq("+cnt+")").fadeIn();
setTimeout(showSlide, 2000);
}
#slideshow {clear:both;margin:50px auto;position:relative;max-width:960px;height:643px;padding:10px;box-shadow:0 0 20px rgba(0, 0, 0, 0.4);}
#slideshow > div {position:absolute;top:10px;left:10px;right:10px;bottom:10px;}
#slideshow img {max-width:100%;}
/* For Demo Only */
#ld{position:absolute;top:10%;left:20%;font-size:5rem;text-shadow:5px;z-index:2;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slideshow">
<div><img src="http://placekitten.com/550/200"></div>
<div><img src="http://placekitten.com/548/200"></div>
<div><img src="http://placekitten.com/550/202"></div>
<div><img src="http://placekitten.com/548/202"></div>
</div>
<div id="ld">Loading . . . </div>

Boostrap cannot pickup jQuery right away, try changing the order that they are called in the head.

how to set jquery slider on auto instead of click or hover on thumbs

i am new learner of jquery and javaScript.
i want to create a slider with a big image section and a section of thumbs.
slider should slide automatically i have coded so far is working on click or hover but i dont know how to set it on auto please help me how to modify my code. code and slider screen shoot is given below.
slider image
$("document").ready(function()
{
$("#thumbs a").mouseenter(function()
{
var smallimgpath = $(this).attr("href");
$("#bigimage img").fadeOut(function()
{
$("#bigimage img").attr("src",smallimgpath);
$("#bigimage img").fadeIn();
});
return false;
});
});
</script>
#imagereplacement{
border: 1px solid red;
width:98%;
height:400px;
margin:auto;
padding-top:8px;
padding-left:10px;
}
#imagereplacement p{
text-align:inline;
}
#bigimage{
/* border: 1px solid green; */
margin:auto;
text-align:center;
float: left;
}
#thumbs{
/*border: 1px solid yellow;*/
margin: 110px 10px;
text-align:center;
width:29%;
float: right;
}
#thumbs img{
height:100px;
width:100px;
}
//This is where all the JQuery code will go
</head>
<body>
<div id="imagereplacement">
<p id="bigimage">
<img src="images/slider1.jpg">
</p>
<p id="thumbs">
<img src="images/slider1.jpg">
<img src="images/slider2.jpg">
<img src="images/slider3.jpg">
</p>

try with this example, please let me know in case of any more question from you :
$("document").ready(function(){
var pages = $('#container li'),
current = 0;
var currentPage, nextPage;
var timeoutID;
var buttonClicked = 0;
var handler1 = function() {
buttonClicked = 1;
$('#container .button').unbind('click');
currentPage = pages.eq(current);
if ($(this).hasClass('prevButton')) {
if (current <= 0)
current = pages.length - 1;
else
current = current - 1;
nextPage = pages.eq(current);
nextPage.css("marginLeft", -604);
nextPage.show();
nextPage.animate({
marginLeft: 0
}, 800, function() {
currentPage.hide();
});
currentPage.animate({
marginLeft: 604
}, 800, function() {
$('#container .button').bind('click', handler1);
});
} else {
if (current >= pages.length - 1)
current = 0;
else
current = current + 1;
nextPage = pages.eq(current);
nextPage.css("marginLeft", 604);
nextPage.show();
nextPage.animate({
marginLeft: 0
}, 800, function() {});
currentPage.animate({
marginLeft: -604
}, 800, function() {
currentPage.hide();
$('#container .button').bind('click', handler1);
});
}
}
var handler2 = function() {
if (buttonClicked == 0) {
$('#container .button').unbind('click');
currentPage = pages.eq(current);
if (current >= pages.length - 1)
current = 0;
else
current = current + 1;
nextPage = pages.eq(current);
nextPage.css("marginLeft", 604);
nextPage.show();
nextPage.animate({
marginLeft: 0
}, 800, function() {});
currentPage.animate({
marginLeft: -604
}, 800, function() {
currentPage.hide();
$('#container .button').bind('click', handler1);
});
timeoutID = setTimeout(function() {
handler2();
}, 4000);
}
}
$('#container .button').click(function() {
clearTimeout(timeoutID);
handler1();
});
timeoutID = setTimeout(function() {
handler2();
}, 4000);
});
* {
margin: 0;
padding: 0;
}
#container {
width: 604px;
height: 453px;
position: relative;
}
#container .prevButton {
height: 72px;
width: 68px;
position: absolute;
background: url('http://vietlandsoft.com/images/buttons.png') no-repeat;
top: 50%;
margin-top: -36px;
cursor: pointer;
z-index: 2000;
background-position: left top;
left: 0
}
#container .prevButton:hover {
background-position: left bottom;
left: 0;
}
#container .nextButton {
height: 72px;
width: 68px;
position: absolute;
background: url('http://vietlandsoft.com/images/buttons.png') no-repeat;
top: 50%;
margin-top: -36px;
cursor: pointer;
z-index: 2000;
background-position: right top;
right: 0
}
#container .nextButton:hover {
background-position: right bottom;
right: 0;
}
#container ul {
width: 604px;
height: 453px;
list-style: none outside none;
position: relative;
overflow: hidden;
}
#container li:first-child {
display: list-item;
position: absolute;
}
#container li {
position: absolute;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<h1>HTML Slideshow AutoPlay (Slide Left/Slide Right)</h1>
<br />
<br />
<div id="container">
<ul>
<li><img src="http://vietlandsoft.com/images/picture1.jpg" width="604" height="453" /></li>
<li><img src="http://vietlandsoft.com/images/picture2.jpg" width="604" height="453" /></li>
<li><img src="http://vietlandsoft.com/images/picture3.jpg" width="604" height="453" /></li>
</ul>
<span class="button prevButton"></span>
<span class="button nextButton"></span>
</div>
</center>

Here an example i've created that create an auto slider CodePen Demo and JSFiddle Demo
I've used an object literal pattern to create slide variable just to avoid creating many global function and variable. Inside document.ready i've initialised my slider just by calling slide.init({....}) this way it makes it easy to reuse and work like plugin.
$.extend(slide.config,option)
this code in simple words override you're default configuration defined in config key
as i mentioned in my above comment make a function slider() and place seTimeout(slide,1000) at bottom of your function before closing
Here in this code its done in animate key of slide object it is passed with two parameter cnt and all image array, If cnt is greater then image array length then cnt is set to 0 i.e if at first when cnt keeps on increment i fadeout all image so when i make it 0 the next time the fadeToggle acts as switch
if On then Off
if Off the On
and calling function slider after a delay makes it a recursive call its just one way for continuously looping there are many other ways i guess for looping continuous you can try
well i haven't check if all images Loaded or not which is most important in slider well that you could try on your own.
var slide = {
'config': {
'container': $('#slideX'),
'delay': 3000,
'fade': 'fast',
'easing': 'linear'
},
init: function(option) {
$.extend(slide.config, option);
var imag = slide.getImages();
slide.animate(0, imag);
},
animate: function(cnt, imag) {
if (cnt >= imag.length) {
cnt = 0;
}
imag.eq(cnt).fadeToggle(slide.config.fade, slide.config.easing);
setTimeout(function() {
slide.animate(++cnt, imag);
}, slide.config.delay);
},
getImages: function() {
return slide.config.container.find('img');
}
};
$(document).ready(function() {
slide.init({
'contianer': $('#slideX'),
'delay': 3000,
'fade': 'fast',
'easing': 'swing'
});
})
body {
margin: 0;
padding: 0;
}
.contianer {
width: 100%;
height: 100%;
position: relative;
}
.container > div,
.container > div >img {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="slideX">
<div id="img1">
<img src="http://imgs.abduzeedo.com/files/articles/magical-animal-photography-gregory-colbert/5.jpg" />
</div>
<div id="img2">
<img src="http://cdn-5.webdesignmash.com/trial/wp-content/uploads/2010/10/great-dog-photography-016.jpg" />
</div>
<div id="img3">
<img src="http://onlybackground.com/wp-content/uploads/2014/01/marble-beautiful-photography-1920x1200.jpg" />
</div>
</div>

Loop Carousel horizontaly javascript/jquery

I was wondering if somebody could help me write a loop for this carousel? at the moment the carousel just scrolls to the right every 3 seconds then scrolls back to the left afterwards and resets itself, I would just like it to contiuously loop infinitly so it looks cleaner, could somebody point me in the right direction or help me? i know its simpler but i'm not much of a js developer! (this is for google sites html box otherwise i would have used a jquery plugin)
<style>
.carousel {
width: 1080px;
height: 220px;
position: relative;
overflow: hidden;
background-color:white;
margin-bottom: 20px;
margin-top: 20px;
margin-left: 70px;
}
.items {
width: 1080px;
position: absolute;
}
.items > div {
font-size: 20px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.items > div > img {
padding: 10px;
}
.nav {
position: absolute;
bottom: 5px;
right: 15px;
}
.button {
cursor: pointer;
font-weight: bold;
color: #fff;
}
</style>
<div class="carousel" style="display:none;">
<div class="items">
<div>
<img src="http://i59.tinypic.com/etisye.png" border="0" alt="Alkamai Logo">
</div>
<div>
<img src="http://i59.tinypic.com/ouukxu.png" border="0" alt="AWS Logo">
</div>
<div>
<img src="http://i61.tinypic.com/16k3t43.png" border="0" alt="cover-it-live">
</div>
<div>
<img src="http://i60.tinypic.com/23wljxh.png" border="0" alt="escenic">
</div>
<div>
<img src="http://i58.tinypic.com/sbiqu1.png" border="0" alt="Livefire">
</div>
<div>
<img src="http://i58.tinypic.com/do9wep.jpg" border="0" alt="ooyala">
</div>
<div>
<img src="http://i61.tinypic.com/24werue.png" border="0" alt="varnish">
</div>
<div>
<img src="http://i60.tinypic.com/2ij14rd.png" border="0" alt="wordpress">
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </script>
<script>
var current_slide = 0; // zero-based
var slide_count = 4;
var slide_size = 1080;
var Direction = {
LEFT: -1,
RIGHT: 1
};
/**
* Moves to the next slide using the direction (dx) parameter.
*/
var nextSlide = function(dx) {
current_slide = (current_slide + slide_count + dx) % slide_count;
// Calculate the new value for css 'left' property and animate.
var left_offset = '-' + (current_slide * slide_size) + 'px';
$('.items').animate({'left': left_offset}, 1080);
};
$('.carousel').show();
setInterval(function(){
nextSlide(Direction.RIGHT);
}, 3000);
</script>

A slight modification to your current script can make it move forward continuously.
The changes are:
current_slide is always 1 (so as to always move forward only)
When we move .items X pixels to the left, we move the corresponding number of items to the end (the number that fits inside X pixels in width)
Updated Demo: http://jsfiddle.net/techfoobar/dWy9R/4/
Code:
var parent = $('.items');
var nextSlide = function (dx) {
// NOTE: always move forward only
current_slide = 1; //(current_slide + slide_count + dx) % slide_count;
// Calculate the new value for css 'left' property and animate.
var ileft_offset = current_slide * slide_size,
left_offset = '-' + ileft_offset + 'px',
iWidth = 0;
parent.animate({
'left': left_offset
}, 'slow', function() { // called when animation is done
iWidth = parent.find('> div:first').width();
while(ileft_offset > iWidth) {
parent.find('> div:first').appendTo(parent);
ileft_offset -= iWidth;
parent.css('left', '-' + ileft_offset + 'px');
}
});
};
A modified version that doesn't pause in between. Just goes on.
Demo: http://jsfiddle.net/techfoobar/dWy9R/5/
var nextSlide = function () {
parent.animate({
'left': '-' + slide_size + 'px'
}, 4000, 'linear', function() { // called when animation is done
var ileft_offset = slide_size,
iWidth = parent.find('> div:first').width();
while(ileft_offset > iWidth) {
parent.find('> div:first').appendTo(parent);
ileft_offset -= iWidth;
parent.css('left', '-' + ileft_offset + 'px');
iWidth = parent.find('> div:first').width();
}
nextSlide();
});
};
nextSlide(); // start it off!

How to implement jQuery slider with images?

I am working on moving a site away from JOOMLA and replicating it using MVC 4.0. One part of the homepage includes a small slider that every three seconds 'slides' Sponsor logos. While researching, I found several excellent jQuery sliders, but none that offered the ability to have multiple images included in the slider (would have to manually create, say 5 sponsor logos, into one image). This would be viable, but in the future I want members to be able to upload their logos to a designated folder.
I came across the following JSFIDDLE which is VERY similar to what I am after: JSFIDDLE 643
Being new to jQuery however, I seem to be having issues using in place of the colored tags.
All the sponsors are stacked on top of each other instead of sliding as I desire. I believe this might be me failing to implement the jQuery correctly...?
Here is my code if anyone has any ideas? There in the end will be close to 40 sponsors. Each logo will be a width of 150px, and I'm trying to show 5 per visible area (the JSFIDDLE has 3 squares).
Index.cshtml
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#Scripts.Render("~/Scripts/jquery-1.9.1.min.js")
#Scripts.Render("~/Scripts/jquery.lbslider.js")
<script type="text/javascript">
$(document).ready(function () {
$('#slider').lbSlider({
leftBtn: '#arrow-left', // left control selector
rightBtn: '#arrow-right', // right control selector
visible: 3, // visible elements quantity
autoPlay: true, // autoscroll flag (default: false)
autoPlayDelay: 5 // delay of autoscroll in seconds (default: 10)
});
});
</script>
<h3>Our Valued Sponsors</h3>
<div class="slider-wrap">
<div class="slider">
<ul>
<li>
<span><img src="1" alt="" /></span>
</li>
<li>
<span><img src="2" alt="" /></span>
</li>
<li>
<span><img src="3" alt="" /></span>
</li>
<li>
<span><img src="4" alt="" /></span>
</li>
<li>
<span><img src="5" alt="" /></span>
</li>
<li>
<span><img src="6" alt="" /></span>
</li>
<li>
<span><img src="7" alt="" /></span>
</li>
<li>
<span><img src=8" alt="" /></span>
</li>
<li>
<span><img src="9" alt="" /></span>
</li>
<li>
<span><img src="10" alt="" /></span>
</li>
</ul>
</div>
<
>
</div>
Site.css
.slider-wrap
{
position: relative;
margin: 50px auto;
width: 950px;
}
.slider {
position: relative;
width: 890px;
margin: auto;
border: 5px solid black;
}
ul {
margin: 0;
padding:0;
}
ul li {
list-style: none;
text-align: center;
}
ul li span img {
display: inline-block;
vertical-align: middle;
width: 100px;
height: 100px;
background: black;
}
ul li img {
width: 150px;
height: auto;
}
.slider-arrow {
position: absolute;
top: 40px;
width: 20px;
height: 20px;
background: black;
color: #fff;
text-align: center;
text-decoration: none;
border-radius: 50%;
}
.sa-left {left: 10px;}
.sa-right {right: 10px;}
jquery.lbslider.js
(function ($) {
$.fn.lbSlider = function (options) {
var options = $.extend({
leftBtn: '.leftBtn',
rightBtn: '.rightBtn',
visible: 3,
autoPlay: false, // true or false
autoPlayDelay: 10 // delay in seconds
}, options);
var make = function () {
$(this).css('overflow', 'hidden');
var thisWidth = $(this).width();
var mod = thisWidth % options.visible;
if (mod) {
$(this).width(thisWidth - mod); // to prevent bugs while scrolling to the end of slider
}
var el = $(this).children('ul');
el.css({
position: 'relative',
left: '0'
});
var leftBtn = $(options.leftBtn), rightBtn = $(options.rightBtn);
var sliderFirst = el.children('li').slice(0, options.visible);
var tmp = '';
sliderFirst.each(function () {
tmp = tmp + '<li>' + $(this).html() + '</li>';
});
sliderFirst = tmp;
var sliderLast = el.children('li').slice(-options.visible);
tmp = '';
sliderLast.each(function () {
tmp = tmp + '<li>' + $(this).html() + '</li>';
});
sliderLast = tmp;
var elRealQuant = el.children('li').length;
el.append(sliderFirst);
el.prepend(sliderLast);
var elWidth = el.width() / options.visible;
el.children('li').css({
float: 'left',
width: elWidth
});
var elQuant = el.children('li').length;
el.width(elWidth * elQuant);
el.css('left', '-' + elWidth * options.visible + 'px');
function disableButtons() {
leftBtn.addClass('inactive');
rightBtn.addClass('inactive');
}
function enableButtons() {
leftBtn.removeClass('inactive');
rightBtn.removeClass('inactive');
}
leftBtn.click(function (event) {
event.preventDefault();
if (!$(this).hasClass('inactive')) {
disableButtons();
el.animate({ left: '+=' + elWidth + 'px' }, 300,
function () {
if ($(this).css('left') == '0px') { $(this).css('left', '-' + elWidth * elRealQuant + 'px'); }
enableButtons();
}
);
}
return false;
});
rightBtn.click(function (event) {
event.preventDefault();
if (!$(this).hasClass('inactive')) {
disableButtons();
el.animate({ left: '-=' + elWidth + 'px' }, 300,
function () {
if ($(this).css('left') == '-' + (elWidth * (options.visible + elRealQuant)) + 'px') { $(this).css('left', '-' + elWidth * options.visible + 'px'); }
enableButtons();
}
);
}
return false;
});
if (options.autoPlay) {
function aPlay() {
rightBtn.click();
delId = setTimeout(aPlay, options.autoPlayDelay * 1000);
}
var delId = setTimeout(aPlay, options.autoPlayDelay * 1000);
el.hover(
function () {
clearTimeout(delId);
},
function () {
delId = setTimeout(aPlay, options.autoPlayDelay * 1000);
}
);
}
};
return this.each(make);
};
})(jQuery);
EDIT: Thanks to everyone who commented. I ended up doing some slight modification and going with the Twitter Bootstrap - Carousel.js.

JS/jQuery code works in chrome but not IE/FF

I've only been coding a couple of months and I'm struggling to figure out why this JS/jQuery wont run on a simple website I've been trying to create. I'm using Adobe Brackets and the live preview uses Chrome. Everything runs smoothly in Chrome, but when I open the index file with IE/FF JS/jQuery doesn't run at all.
Code as follows:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"> </script>
<script src="modernizr.custom.55043.js"></script>
<script type="text/javascript">
function testimonialcontainer() {
$(".testimonialcontainer #1").show("fade", 500);
$(".testimonialcontainer #1").delay(5500).hide("slide", {direction: 'left'}, 500);
var sc=$(".testimonialcontainer img").size();
var
count=2;
setInterval(function() {
$(".testimonialcontainer #" + count).show("slide", {direction: 'right'}, 500);
$(".testimonialcontainer #" + count).delay(5500).hide("slide", {direction:'left'}, 500);
if(count == sc) {
count = 1;
} else {
count = count + 1;
}
}, 6500);
};
</script>
HTML
<div class="testimonialcontainer">
<img src="testimonials/test1.png" id="1" />
<img src="testimonials/test2.png" id="2" />
<img src="testimonials/test3.png" id="3" />
</div>
CSS
.testimonialcontainer {
width: 795px;
height:175px;
position: absolute;
margin-top: 1000px;
margin-left: 102px;
border-top: 4px solid black;
border-bottom: 2px dotted black;
}
.testimonialcontainer img {
width: 756px;
height: 155px;
display: none;
padding: 10px;
}
Thanks in advance!
N

Numbers alone do not work as names for div's in IE/FF.