How to avoid custom jquery slider from “jumping”

4 Views

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

Read More
$(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

Post Views: 4

Related posts

Leave a Reply

1 comment

  1. 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").

    function playslider() {

    $( ".banner" ).fadeIn( 800 ).delay( 3600 ).fadeOut( 800, function () {
        $( ".banner2" ).fadeIn( 800 ).delay( 3600 ).fadeOut( 800, playslider );
    } );

}