How to avoid custom jquery slider from "jumping"

0

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

Link: How to avoid custom jquery slider from "jumping"
Source: Stack Jquery

Share.

About Author

Leave A Reply