Can anyone share a code for a looping slider in the announcement bar?

Jòóst
Excursionist
23 1 6

Does anyone have a code for a looping slider in the announcement bar?

Replies 3 (3)

PageFly-Victor
Shopify Partner
7865 1785 3066

Hi @Jòóst 

This is Victor from PageFly - Shopify Page Builder App

 

You will need to add a custom code for the announcement bar to your theme. Please follow my steps below

Step 1: Create a new section

  1. From your Shopify admin, go to Online Store > Themes.
  2. Click Actions, and then click Edit Code.
  3. Under the Sections folder, click on Add a new section link to create a new section.

PageFlyVictor_0-1671006952964.png

 

  1. Fill the section name – hura-announcement-bar into the field on the dialog and click Create section button.
  2. In the online code editor, please replace the existing code with the below code

 

 

 

{%- if  section.blocks.size > 0 and section.settings.show_announcement_bar -%}
<div class="hura-announcement-bar swiper-container">
  <div class="hura-messages swiper-wrapper">
    {%- for block in section.blocks -%}
    <div class="hura-message swiper-slide">{{block.settings.message}}</div>
    {%- endfor -%}
  </div>
  <div class="hura-swiper-button swiper-button-prev"></div>
  <div class="hura-swiper-button swiper-button-next"></div>
</div>
<p style="display:none!important;">Powered by <a href="//www.huratips.com" target="_blank">HuraTips.Com</a></p>
<script src="//cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" />
<script>
  const swiper = new Swiper('.swiper-container', {
    {%- if section.settings.autoplay %}
    autoplay: {delay: {{section.settings.delay}} },
    {%- endif -%}
    loop: true,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
</script>
<style>
  .hura-announcement-bar{
    background:{{section.settings.colorBackground}};
    position: relative;
    overflow: hidden;
  }
  .hura-announcement-bar .hura-message{
    text-align:center;
    color:{{section.settings.colorText}};
    padding:0 7%;
  }
  .hura-announcement-bar .swiper-button-next:after, .hura-announcement-bar .swiper-container-rtl .swiper-button-prev:after,
  .hura-announcement-bar .swiper-button-prev:after, .hura-announcement-bar .swiper-container-rtl .swiper-button-next:after{
    font-size: 15px;
    color:{{section.settings.colorText}};
  }
  {%- if  section.blocks.size < 2 %}
  .hura-announcement-bar .hura-swiper-button{display:none!important;}
  {%- endif -%}
</style>
{%- endif -%}

{% schema %}
  {
    "name": "Announcement Bar",
    "settings": [
      {
        "type": "checkbox",
        "id": "show_announcement_bar",
        "label": "Show"
      },
      {
        "type": "checkbox",
        "id": "autoplay",
        "label": "Autoplay"
      },
      {
        "type": "text",
        "id": "delay",
        "label": "Delay between transitions (in ms)",
        "default": "5000"
      },
      {
        "type": "color",
        "id": "colorBackground",
        "label": "Background color",
        "default": "#ffffff"
      },
      {
        "type": "color",
        "id": "colorText",
        "label": "Text color",
        "default": "#000"
      }
],
"blocks": [
      {
        "type": "header",
        "name": "Message",
        "settings": [
{
              "id": "message",
              "type": "textarea",
             "label": "Message"
            }
        ]
      }
]
  }
{% endschema %}

 

 



Click Save.

Step 2: Add the section to the header

  1. Under the Layout folder, click onto theme.liquid to open file editor.
  2. In the online code editor, find the script{% section 'header' %} and insert the below code before this script.

PageFlyVictor_1-1671006952984.png

 

Step 3: Create a new Sliding Announcement Bar

PageFlyVictor_2-1671006953011.png

 

 

 

Hope this can help you solve the issue 

 

Best regards,

Victor | PageFly

AlexYZ
Shopify Partner
136 1 38

Hi, @PageFly-Victor I use your code but it does not align well in the middle more on the right side on desktop and mobile. Can you check if you can make a announcement bar like kawaiibonjour.com?

 

Screenshot 2023-03-05 001040.jpgScreenshot 2023-03-05 003652.jpg

 

waynetu
Shopify Partner
10 1 7

Add the code below in the beginning of your announcement bar liquid.

 

****************************

<style> 
  * {
    box-sizingborder-box;
  }
</style>
****************************
 
waynetu_0-1703847775167.png