Develop Reference

Javascript slider shows white screens

Hi i'm building a javascript slider for my portfolio with Javascript. The slides work properly but when i add a fading transition i keep getting a white flash between the 2 slides. Anyone knows how to create a smooth fade between them?
I added a JSfiddle down below.
Here's my javascript:
$(function () {
var theInterval; // Slide speed
var images = new Array();
var counter = 1;
var defaultSettings = {
"sliderContainer": "#slider" // SliderContainer
, "pauseWithMouse": true // Turn on/off pause with mouse
, "sliderSpeed": 3000 // Slide speed
, "transitionSpeed": 200 // transition speed
};
// intialize slider
// if myImages exists then
images = myImages;
if (images.length > 0) {
$(defaultSettings.sliderContainer).append('<img id="sliderImg" width="900" src="' + images[0] + '" />');
startSlide(images);
}
function cycleImages(images) {
if (counter >= images.length) {
counter = 0;
}
console.log(counter);
document.getElementById("sliderImg").src = images[counter];
counter++;
var images = $('#sliderImg')
var now = images.filter(':visible')
var next = now.next().length ? now.next() : images.first()
var speed = defaultSettings.transitionSpeed; //Transition speed
now.fadeOut(speed);
next.fadeIn(speed);
}
function startSlide() {
console.log('start');
theInterval = setInterval(function () {
cycleImages(images);
}, defaultSettings.sliderSpeed);
// Set interval time
};
var stopSlide = function () { // Stop slides on hover
console.log('stop');
if (defaultSettings.pauseWithMouse) {
clearInterval(theInterval);
}
};
$('#sliderImg').on('mouseover', function () { // Stop slides on mouseover
stopSlide();
});
$('#sliderImg').on('mouseout', function () { // Continue with slides on mouseout
startSlide();
});
});
The JS Fiddle Link

This is happening because there is no background while the fade in occurs. The easiest way to fix this is to add a z-index property to the image or the slide.
For example give the first image an z-index of 1 and the second one a z-index of 2
Here is the code that you should implement:
var subs = $(this).find('#sliderImg');
var index = subs.eq(0).css('z-index');
subs.gt(0).each(function() {
$(this).css('z-index', ++index);
});
The idea is to access each element of the array via the tag you provided #sliderImg and using the jQuery method each to increase the z-index css property with 1.
Here is a working fiddle: Working Fiddle

Featured slider with new jQuery

I'm trying to run slider with new jQuery because some functions like rotate are deprecated. Slider works fine when page is uploaded and I'm working to load image from clicked tab from right side. When I clicked on tab, current image and current active tab are removed and new image and new active tab are loaded correctly than I call my startSlider(); function again but i'm loosing variable value of i so my startSlider(); running without loading image and active tab background. Please help me to solve this problem. This is slide image:
and this is my jQuery code:
$(function() {
var count = $(".ui-tabs-nav li").length;
var slideSpeed = 5000;
var fadingSpeed = 300;
var i = 1;
var $slider = $('#featured');
var interval;
function startSlider() {
interval = setInterval(function() {
$("#fragment-"+i).fadeOut(fadingSpeed, function() {
$(this).removeClass("ui-tabs-activated");
$('#nav-fragment-'+i).removeClass("ui-tabs-active");
a = i+1;
if (i == count) {
a = 1;
i = 0;
}
$('#nav-fragment-'+a).addClass("ui-tabs-active");
$("#fragment-"+a).fadeIn(fadingSpeed, function() {
$(this).addClass("ui-tabs-activated");
});
i++;
});
}, slideSpeed); // End setInterval function
}
function stopSlider() {
clearInterval(interval);
}
$('.ui-tabs-nav-item > a').click(function(evt){
evt.preventDefault();
stopSlider();
i = $(this).attr('href'); // href's are values from 1, 2, 3, 4, or 5
var id = $(".ui-tabs-active > a").attr('href');
$(".ui-tabs-nav li").removeClass("ui-tabs-active"); // This remove current tab background
$("#fragment-"+id).remove(); // This remove div with current image
$("#fragment-"+i).fadeIn(fadingSpeed, function() {
$(this).addClass("ui-tabs-activated"); // Load new image
$('#nav-fragment-'+i).addClass("ui-tabs-active"); // Set active background
});
startSlider(); // Start slider again
});
startSlider();
}); // jQuery function

Well, startslider() is using variable i to fadeout and remove active class, and variable a for fadein and add active class.
After click you are using variable i for fadein and adding active class.
Variable i is global, so when your restart startslider() it will use that i to fadeout.
Also, after click you are removing an element, but in the code your show right now I do not see anything that adds a new element or loads an image.

trying to make carousel animation slider

i am trying to creat a carousel animation that take 3 pics and slide the to the left and bring new 3 images, i don't think i'm in the right direction need help
here is the fiddle link: http://jsfiddle.net/G5cKK/11/
setInterval(function () {
$('img:first').animate({
'left': -$('.box').width() + 'px'
},1000, function () {
$(this).remove().appendTo('.all')
});
}, 5000);

You can animate width instead of position:
JavaScript
setInterval(function() {
var $img = $('img:first');
var $imgClone = $img.clone().width(0).appendTo('.all');
$img.animate({'width': 0},1000, function(){$img.remove()});
$imgClone.animate({'width': 65},1000);
}, 5000)
Demo: http://jsfiddle.net/G5cKK/12/

Guidance on how to properly update carousel slide increment values for previous and next slides?

I have a single item carousel has a total of 3 slides which are navigated by clicking the previous and next buttons, each click moves the carousel and adds in slide content from an array.
Basically when you click next the carousel slides right a value is incremented and the array items read to create the next slide but my increments don't seem to be correct at all. Can someone please advise on where I may be going wrong. Basically i use the math items[currentPage+1] and items[currentPage-1] to get the next and previous slides but this seems to be incorrect so some of my slides appear as undefined
JS
var items = [
'http://dummyimage.com/1000x400/00ad8a/ffffff&text=Slide+1',
'http://dummyimage.com/1000x400/ab6100/ffffff&text=Slide+2',
'http://dummyimage.com/1000x400/8900ab/ffffff&text=Slide+3',
'http://dummyimage.com/1000x400/005eab/ffffff&text=Slide+4',
'http://dummyimage.com/1000x400/ab003c/ffffff&text=Slide+5'],
currentPage = 0,
noOfPages = items.length,
lastPage = noOfPages - 1;
btnNext.on('click', function (e) {
e.preventDefault();
if (currentPage === lastPage) {
currentPage = 0;
} else {
currentPage++;
}
console.log('Current Page', items[currentPage]);
//move carousel to right 100%
carousel.css('transform', 'translateX(-100%)');
$('.slide:first').insertAfter('.slide:last');
var nextSlide = currentPage+1;
//populate .slide:last with item[currentPage+1]
$('.slide:last').html('<img src="' + items[nextSlide] + '" alt="" class="slide-img fluid">');
setTimeout(function () {
resetSlides();
resetCarousel();
setTimeout(function () {
carousel.removeAttr('style').removeClass('expose-left expose-right');
}, 100);
}, 500);
});
Js Fiddle: http://jsfiddle.net/GKv4p/38/

In Responsive Web Design, how can I use Javascript or jQuery to stop a function and reset when the users downsizes their window?

I have a responsive layout and I've created a fading panels animated element with jQuery. I set the jQuery function to only activate if the user is above a certain screen size. However, if I scale the window down, the function still runs.
Here's what I'd like to achieve:
When the user scrolls bellow a browser width of 1440px, stop that fading panels animation.
Once the animation is stopped, I want to reset the area to display the 1st panel.
If the user scrolls back up above that screen size, start the animation again.
Here is my code, thanks in advance for your time:
// Get the viewport size!
var viewport = $(document).width();
if (viewport >= 1140) {
var InfiniteRotator =
{
init: function()
{
// hard set height of container
$('#circles').height('286.717px');
// initial fade-in time
var initialInterval = 3000;
// interval between items
var itemInterval = 5000;
// cross-fade time
var fadeTime = 2000;
// count number of items
var numberOfItem = $('.rotating-item').length;
// set current item
var currentItem = 0;
// create loop
var infiniteLoop = setInterval(function() {
// initial fade out
$('.rotating-item').eq(currentItem).fadeOut(fadeTime);
// set counter
if (currentItem == numberOfItem -1) {
currentItem = 0;
} else {
currentItem++;
}
// next item fade in
$('.rotating-item').eq(currentItem).fadeIn(fadeTime);
}, itemInterval);
}
}
// go Go GO!
InfiniteRotator.init();
}
Please note: I used this great tutorial to create the fading panels: http://trendmedia.com/news/infinite-rotating-images-using-jquery-javascript/

window.onresize = function() {
clearInterval(infiniteLoop)
}
Note that you must still be in your init function in order to get the infiniteLoop variable.

You can use
window.onresize = function(){ ... }

$(window).resize(function() {
//stop and reset animation in here.
});