Title: Multiple Banners?
Last modified: April 13, 2021

---

# Multiple Banners?

 *  Resolved [ttoaster](https://wordpress.org/support/users/ttoaster/)
 * (@ttoaster)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/multiple-banners/)
 * Hi,
 * Very nice plugin, but are there any plans to add support for multiple banners(
   banner rotation every x seconds/minutes)? That would be great.
 * You mention a pro version but I can’t find it on your site, or indeed, anywhere…
    -  This topic was modified 5 years, 2 months ago by [ttoaster](https://wordpress.org/support/users/ttoaster/).

Viewing 1 replies (of 1 total)

 *  Plugin Author [rpetersen29](https://wordpress.org/support/users/rpetersen29/)
 * (@rpetersen29)
 * [5 years, 2 months ago](https://wordpress.org/support/topic/multiple-banners/#post-14312144)
 * Hi [@ttoaster](https://wordpress.org/support/users/ttoaster/)
    Pro version is
   in the plugin, you can see the pro features at the bottom of the settings page.
 * As for multiple banners, there is no explicit support for multiple banners but
   this type of behavior is achievable through keyframes, more info here [https://css-tricks.com/snippets/css/keyframe-animation-syntax/](https://css-tricks.com/snippets/css/keyframe-animation-syntax/).
   For example, you could put the following in Simple Banner Text:
 *     ```
       <span id="rotating-banner-container">
       	<span id="banner-1">banner 1</span>
       	<span id="banner-2">banner 2</span>
       	<span id="banner-3">banner 3</span>
       </span>
       ```
   
 * And then the keyframe css in Website Custom CSS:
 *     ```
       @-webkit-keyframes FIRST-BANNER {
         0%   { opacity: 1;height: auto; }
         33% { opacity: 0;height: 0; }
       }
       @-moz-keyframes FIRST-BANNER {
         0%   { opacity: 1;height: auto; }
         33% { opacity: 0;height: 0; }
       }
       @-o-keyframes FIRST-BANNER {
         0%   { opacity: 1;height: auto; }
         33% { opacity: 0;height: 0; }
       }
       @keyframes FIRST-BANNER {
         0%   { opacity: 1;height: auto; }
         33% { opacity: 0;height: 0; }
       }
   
       @-webkit-keyframes SECOND-BANNER {
         0%   { opacity: 0;height: 0; }
         33% { opacity: 1;height: auto; }
         66% { opacity: 0;height: 0; }
       }
       @-moz-keyframes SECOND-BANNER {
         0%   { opacity: 0;height: 0; }
         33% { opacity: 1;height: auto; }
         66% { opacity: 0;height: 0; }
       }
       @-o-keyframes SECOND-BANNER {
         0%  { opacity: 0;height: 0; }
         33% { opacity: 1;height: auto; }
         66% { opacity: 0;height: 0; }
       }
       @keyframes SECOND-BANNER {
         0%   { opacity: 0;height: 0; }
         33% { opacity: 1;height: auto; }
         66% { opacity: 0;height: 0; }
       }
   
       @-webkit-keyframes THIRD-BANNER {
         0%   { opacity: 0;height: 0; }
         66% { opacity: 1;height: auto; }
       }
       @-moz-keyframes THIRD-BANNER {
         0%   { opacity: 0;height: 0; }
         66% { opacity: 1;height: auto; }
       }
       @-o-keyframes THIRD-BANNER {
         0%   { opacity: 0;height: 0; }
         66% { opacity: 1;height: auto; }
       }
       @keyframes THIRD-BANNER {
         0%   { opacity: 0;height: 0; }
         66% { opacity: 1;height: auto; }
       }
   
       #rotating-banner-container {
       	display: flex;
         flex-direction: column;
       }
   
       #banner-1 {
         -webkit-animation: FIRST-BANNER 5s infinite; /* Safari 4+ */
         -moz-animation:    FIRST-BANNER 5s infinite; /* Fx 5+ */
         -o-animation:      FIRST-BANNER 5s infinite; /* Opera 12+ */
         animation:         FIRST-BANNER 5s infinite; /* IE 10+, Fx 29+ */
         animation-timing-function: step-end;
       }
       #banner-2 {
         -webkit-animation: SECOND-BANNER 5s infinite; /* Safari 4+ */
         -moz-animation:    SECOND-BANNER 5s infinite; /* Fx 5+ */
         -o-animation:      SECOND-BANNER 5s infinite; /* Opera 12+ */
         animation:         SECOND-BANNER 5s infinite; /* IE 10+, Fx 29+ */
         animation-timing-function: step-end;
       }
       #banner-3 {
         -webkit-animation: THIRD-BANNER 5s infinite; /* Safari 4+ */
         -moz-animation:    THIRD-BANNER 5s infinite; /* Fx 5+ */
         -o-animation:      THIRD-BANNER 5s infinite; /* Opera 12+ */
         animation:         THIRD-BANNER 5s infinite; /* IE 10+, Fx 29+ */
         animation-timing-function: step-end;
       }
       ```
   

Viewing 1 replies (of 1 total)

The topic ‘Multiple Banners?’ is closed to new replies.

 * ![](https://ps.w.org/simple-banner/assets/icon-256x256.png?rev=1198700)
 * [Simple Banner - Easily add multiple Banners/Bars/Notifications/Announcements to the top or bottom of your website](https://wordpress.org/plugins/simple-banner/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/simple-banner/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/simple-banner/)
 * [Active Topics](https://wordpress.org/support/plugin/simple-banner/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/simple-banner/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/simple-banner/reviews/)

 * 1 reply
 * 2 participants
 * Last reply from: [rpetersen29](https://wordpress.org/support/users/rpetersen29/)
 * Last activity: [5 years, 2 months ago](https://wordpress.org/support/topic/multiple-banners/#post-14312144)
 * Status: resolved