Custom jQuery carousel transition bug

Question

I am working on a custom image carousel, with jQuery and CSS. I am trying to avoid using a multiple-features carousel plugin download from Github, for performance reasons.

My aim is to obtain a vertical transition, like the one on www.pcgarage.ro , but without using the plugin they (might) have used. For this purpose, I have written:

 var $elm = $('.slider'), $slidesContainer = $elm.find('.slider-container'), slides = $slidesContainer.children('a'), slidesCount = slides.length, slideHeight = $(slides[0]).find('img').outerHeight(false); //Set slide height $(slides).css('height', slideHeight); // Append bullets for (var i = 0; i < slidesCount; i++) { var bullets = '<a href="#">' + i + '</a>'; if (i == 0) { // active bullet var bullets = '<a href="#" class="activeSlide">' + i + '</a>'; // active slide $(slides[0]).addClass('active'); } $('.slider-nav').append(bullets); } // Set (initial) z-index for each slide var setZindex = function() { for (var i = 0; i < slidesCount; i++) { $(slides[i]).css('z-index', slidesCount - i); } } setZindex(); $('.slider-nav a').on('click', function() { activeIdx = $(this).text(); $('.slider-nav a').removeClass('activeSlide'); $(this).addClass('activeSlide'); setActiveSlide(); slideUpDown(); }); var setActiveSlide = function() { $(slides).removeClass('active'); $(slides[activeIdx]).addClass('active'); } var slideUpDown = function() { // set top property for all the slides $(slides).css('top', slideHeight); // then animate to the next slide $(slides[activeIdx]).animate({ 'top': 0 }); } 

 body { margin: 0; padding: 0; } body * { box-sizing: border-box; } .container { max-width: 1200px; margin: 0 auto; } .slider { width: 100%; height: 300px; position: relative; overflow: hidden; } .slider .slider-nav { position: absolute; left: 10px; bottom: 10px; z-index: 30; } .slider .slider-nav a { display: block; float: left; width: 10px; height: 10px; border-radius: 50%; margin-right: 3px; text-indent: -9999px; background: #fff; } .slider .slider-nav a.activeSlide { background: transparent; border: 2px solid #fff; } .slider .slider-container { width: 100%; text-align: center; } .slider .slider-container a { display: block; position: absolute; top: 0; left: 0; right: 0; } .slider .slider-container img { transform: translateX(-50%); margin-left: 50%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="container"> <div class="slider slider-homepage"> <div class="slider-nav"></div> <div class="slider-container"> <a href="#"> <img src="https://picsum.photos/1200/300/?gravity=east" alt=""> </a> <a href="#"> <img src="https://picsum.photos/1200/300/?gravity=south" alt=""> </a> <a href="#"> <img src="https://picsum.photos/1200/300/?gravity=north" alt=""> </a> </div> </div> </div> 

The problem with my code is the (obvious) white screen that accompanies every transition, whose cause I do not understand.

Where is my mistake?

Answer 1

I have added some variable and function to fix this issue kindly check the script.

 var $elm = $('.slider'), $slidesContainer = $elm.find('.slider-container'), slides = $slidesContainer.children('a'), slidesCount = slides.length, slideHeight = $(slides[0]).find('img').outerHeight(false); //Set slide height $(slides).css('height', slideHeight); // Append bullets for (var i = 0; i < slidesCount; i++) { var bullets = '<a href="#">' + i + '</a>'; if (i == 0) { // active bullet var bullets = '<a href="#" class="activeSlide">' + i + '</a>'; // active slide $(slides[0]).addClass('active'); } $('.slider-nav').append(bullets); } // Set (initial) z-index for each slide var setZindex = function () { for (var i = 0; i < slidesCount; i++) { $(slides[i]).css('z-index', slidesCount - i); } } setZindex(); var displayImageBeforeClick = null; $('.slider-nav a').on('click', function () { displayImageBeforeClick = $(".slider-container .active"); activeIdx = $(this).text(); if($(slides[activeIdx]).hasClass("active")){ return false; } $('.slider-nav a').removeClass('activeSlide'); $(this).addClass('activeSlide'); setActiveSlide(); slideUpDown(); }); var setActiveSlide = function () { $(slides).removeClass('active'); $(slides[activeIdx]).addClass('active'); } var slideUpDown = function () { // set top property for all the slides $(slides).not(displayImageBeforeClick).css('top', slideHeight); // then animate to the next slide $(slides[activeIdx]).animate({ 'top': 0 }); $(displayImageBeforeClick).animate({ 'top': "-100%" }); } 

 body { margin: 0; padding: 0; } body * { box-sizing: border-box; } .container { max-width: 1200px; margin: 0 auto; } .slider { width: 100%; height: 300px; position: relative; overflow: hidden; } .slider .slider-nav { position: absolute; left: 10px; bottom: 10px; z-index: 30; } .slider .slider-nav a { display: block; float: left; width: 10px; height: 10px; border-radius: 50%; margin-right: 3px; text-indent: -9999px; background: #fff; } .slider .slider-nav a.activeSlide { background: transparent; border: 2px solid #fff; } .slider .slider-container { width: 100%; text-align: center; } .slider .slider-container a { display: block; position: absolute; top: 0; left: 0; right: 0; } .slider .slider-container img { transform: translateX(-50%); margin-left: 50%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="container"> <div class="slider slider-homepage"> <div class="slider-nav"></div> <div class="slider-container"> <a href="#"> <img src="https://picsum.photos/1200/300/?gravity=east" alt=""> </a> <a href="#"> <img src="https://picsum.photos/1200/300/?gravity=south" alt=""> </a> <a href="#"> <img src="https://picsum.photos/1200/300/?gravity=north" alt=""> </a> </div> </div> </div> 

Answer 2

通过过渡持续时间和过渡计时功能，将过渡添加到您的“ .slider .slider-container a”中。作为参考，您可以参阅https://www.w3schools.com/css/css3_transitions.asp