Adding text banners to your site

Created by Ezra Weinstein, Modified on Tue, 27 Sep 2022 at 03:37 PM by Hannah Harris

Set up your slider wrapper markup.

        
<div id="_text_slider"> </div>

Create a slider container within the slider wrapper.

    
<div id="_text_slider">     <div id="_text_slider_content"></div> </div>

Insert the text banners within the slider container.

        
<div id="_text_slider">     <div id="_text_slider_content">         <div style="style="background: #4CAF50; width: 100%">             <span class="promo-title" style="color: #fff;">                 <span class="fa fa-sun"></span>                 Summer Sale Up to 70% Off Sitewide!             </span>         </div>                  <div style="style="background: #00b355; width: 100%">             <span class="promo-title" style="color: #fff;">                 <span class="fa fa-truck"></span>                  Free Shipping on Orders over $50!             </span>         </div>                  <div style="style="background: #859a3b; width: 100%">             <span class="promo-title" style="color: #fff;">                 <span class="fa fa-tree"></span>                  Outerware on Sale 50%!             </span>         </div> 
    </div> </div>

Include the slider css within the head tag of your template before the %internalCSS% placeholder. This example uses the Slick Slider plugin

        
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css"/>

Include the slider js within the head tag of your template after the %internalCSS% placeholder. This example uses the Slick Slider plugin

        
         <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

Initialize the slider from the Javascript tab of the template.

        
 $(document).ready(function(){  $('#_text_slider_content').slick({         dots: false,         infinite: true,         autoplay: true,         autoplaySpeed: 5000,         fade: true,         cssEase: 'linear'  }); });