I keep getting jumping in this banner. I know its sizing but I would like to keep this responsive. I created a custom slider in wordpress. Needs to be 100% width> Here is a link to the fiddle.https://jsfiddle.net/SCATORY/rntnht3j/2/
<section id="banners">
<div class="banner bone">
<a href="http://investors.gobio.com/news/" target="_blank">
<img style="width:100%;" src="https://www.gobio.com/research/wp-content/uploads/sites/2/2016/05/VirtualScopics_BTR_banner.jpg">
</a>
</div>
<div class="banner2 btwo">
<img style="width:100%;" src="http://www.gobio.com/research/wp-content/uploads/sites/2/2016/05/EvriBeat_WebHomeSliderGraphic_R1.jpg">
</div>
</section>
Heres the HTML
$(document).ready(function() {
function playslider() {
$(".banner").fadeIn(800).delay(3600).fadeOut(800);
$(".banner2").delay(5200).fadeIn(800).delay(3600).fadeOut(800, playslider);
}
playslider();
});
The Jquery
#banners {
width: 100%;
min-height: 215px;
overflow: hidden;
background-color: #340004;
display: block;
}
.banner {
width: 100%;
Height: 100%;
background-color: #340004;
}
.banner2 {
display: none;
width: 100%;
Height: 100%;
background-color: #520002;
}
and the css
Use a callback function to call the next slide instead of issuing a delay that is equal to the previous slides animations and delays.
Setting a delay equal to previous animations + delay(s) doesn’t guarantee that it will actually run right after the previous animation due to slight delays that may pile up in the event queue.
There’s a number of improvements that could be made to the code but this is the most simplistic solution to your problem. Provide a callback function that gets run at the end of
fadeOut()
for$(".banner")
just as you have done of$(".banner2")
.