JavaScript image slider not fading between images

Question

I have made an image slider using JavaScript with some help from YouTube and when the images change, they do not fade into one another but instead appear to 'jump', this can be shown here:

http://www.jdlloyd.co.uk/demo.html

Could someone explain/update the code so that they fade into one another?

Thanks

CODE:

// This simple function returns object reference for elements by ID
function _(x){
	"use strict";
	return document.getElementById(x);}
// Variables for bubble array, bubble index, and the setInterval() variable
var ba, bi=0, intrvl;
// bca - Bubble Content Array. Put your content here.
var bca = [
    '',
	'',
	''
];
// This function is triggered by the bubbleSlide() function below
function bubbles(bi){
	// Fade-out the content
	"use strict";
	_("bubblecontent").style.opacity = 0;
	// Loop over the bubbles and change all of their background color
	for(var i=0; i < ba.length; i++){
		ba[i].style.background = "rgba(0,0,0,.1)";
	}
	// Change the target bubble background to be darker than the rest
	ba[bi].style.background = "#999";
	// Stall the bubble and content changing for just 300ms
	setTimeout(function(){
		// Change the content
		_("bubblecontent").innerHTML = bca[bi];
		// Fade-in the content
		_("bubblecontent").style.opacity = 1;
	}, 0);
}
// This function is set to run every 5 seconds(5000ms)
function bubbleSlide(){
	"use strict";
	bi++; // Increment the bubble index number
	// If bubble index number is equal to the amount of total bubbles
	if(bi === ba.length){
		bi = 0; // Reset the bubble index to 0 so it loops back at the beginning
	}
	// Make the bubbles() function above run
	bubbles(bi);
}
// Start the application up when document is ready
window.addEventListener("load", function(){
	// Get the bubbles array
	"use strict";
	ba = _("bubbles").children;
	// Set the interval timing for the slideshow speed
	intrvl = setInterval(bubbleSlide, 5000);
});

/* BUBBLE FILTER */

#bubblebox{ width:100%; position:relative; height:250px; margin:0px; border:1px solid #000000; transition:opacity 0.3s linear 0s; border:0px; background-color:#000000;}
#bubbles{ width:100%; position: absolute; bottom: 0px; margin-left: 0px auto; margin-right: 0px auto; text-align:center; border:0px;}
#bubbles > div{ display:inline-block; width:10px; height:10px; margin:10px 10px 10px 10px; background:rgba(0,0,0,.1); text-align:center; border:2px solid #999; border-radius:100%; font-size:17px; text-decoration:none; transition: background 0.3s linear 0s; cursor:pointer; }





Demo

Rachel Gallen · Accepted Answer

It's not bootstrap bullets but it works on click and slide. Maybe a solution?

Here's a fiddle

$(document).ready(function(){
            $('#rotator > a.arrow.left').click(function(e){
                e.preventDefault;
                var rotator = $('#rotator .images');
                rotator.children('.imageHolder').first().animate({marginLeft:"-=310px"}, function(){
                    $(this).appendTo(rotator).removeAttr("style");
                });
            });
            $('#rotator > a.arrow.right').click(function(e){
                e.preventDefault;
                var rotator = $('#rotator .images');
                rotator.children('.imageHolder').last().prependTo(rotator).removeAttr("style").css("margin-left", "-310px").animate({marginLeft:"0"});
            });
        });

#rotator{width:310px; height:220px; position:relative; overflow:hidden;  position:relative;}
        #rotator .images{width:1000%; position:relative; z-index:1;}
        #rotator a.arrow{width:18px; height:41px; display:block; z-index:2; text-indent:-50000em; position:absolute; top:89px;}
        #rotator a.arrow.left{left:0;background-image:url("http://www.rachelgallen.com/images/leftarrow.png"); background-repeat:no-repeat; background-size:contain;}
        #rotator a.arrow.right{right:0; background-image:url("http://www.rachelgallen.com/images/rightarrow.png"); background-repeat:no-repeat; background-size:contain;}
        #rotator .images .imageHolder{width:310px; float:left; height:220px; position:relative;}
        #rotator  .images .imageHolder span {width:290px; margin: 10px; color:#FFF;  font-size:18px; position:absolute; top:0; left:0; z-index:4;}
        #rotator .images .imageHolder img{width:310px;  height:220px; position:absolute; display:block; top:0; left:0; z-index:3;}



    
        
        
            
                Daisies
                
            
            
                Snowdrops
                
            
            
                Mountains
                
            
            
                Yellow Flowers

EDIT

BOOTSTRAP CAROUSEL

// invoke the carousel
$('#myCarousel').carousel({
  interval: 3000
});

/* SLIDE ON CLICK */

$('.carousel-linked-nav > li > a').click(function() {

  // grab href, remove pound sign, convert to number
  var item = Number($(this).attr('href').substring(1));

  // slide to number -1 (account for zero indexing)
  $('#myCarousel').carousel(item - 1);

  // remove current active class
  $('.carousel-linked-nav .active').removeClass('active');

  // add active class to just clicked on item
  $(this).parent().addClass('active');

  // don't follow the link
  return false;
});

/* AUTOPLAY NAV HIGHLIGHT */

// bind 'slid' function
$('#myCarousel').bind('slide', function() {

  // remove active class
  $('.carousel-linked-nav .active').removeClass('active');

  // get index of currently active item
  var idx = $('#myCarousel .item.active').index();

  // select currently active item and add active class
  $('.carousel-linked-nav li:eq(' + idx + ')').addClass('active');

});

@import url('//netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css');
 #myCarousel {
  margin-top: 40px;
}
.carousel-linked-nav,
.item img {
  display: block;
  margin: 0 auto;
}
.carousel-linked-nav {
  width: 120px;
  margin-bottom: 20px;
}
.carousel-control {
  top: 50%;
}
.item img{width:600px;
    height:auto;}

JavaScript image slider not fading between images

Answers (1)

Related Questions