rotating banner

I found a way to rotate banners..
just create a shortcode (or php function) containing more than 1 banner and use a wrapper with an ID:

<div id="rotator">
[wp_bannerize_pro orderby="random" categories="header" numbers="3"]
</div>

then add this code somewhere (maybe inside footer):

<script>
var slideIndex = 0;
showSlides();
function showSlides() {
    var i;
    var slides = document.getElementById('rotator').getElementsByClassName('wp_bannerize_banner_box');
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}    
    slides[slideIndex-1].style.display = "block";  
    setTimeout(showSlides, 15000); // Change image every 15 seconds
}
</script>

and CSS (maybe header):

<style>
#rotator .wp_bannerize_banner_box {display:none}
</style>

thanks to https://www.w3schools.com/howto/howto_js_slideshow.asp
————

Maybe add two parameters that allow you to add custom IDS or custom classes to the shortcodes could be useful to manage multiple instances of WP_Bannerize

• This reply was modified 8 years, 6 months ago by mnzhc.