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

[Jòóst]

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

[PageFly-Victor]

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.

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.

Step 3: Create a new Sliding Announcement Bar

Hope this can help you solve the issue 

Best regards,

Victor | PageFly

[AlexYZ]

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?

[waynetu]

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

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

<style> 

  * {

    box-sizing: border-box;

  }

</style>

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

[From_The_Stork]

hi reviving this topic 

- ive done these steph thank you very much - working perfectly 

a couple of advancements if possible? 

 - can the height be set at all? - the text is a little close to the header and content below 

 - can links be added to the text to take you to the sign up page for instance 

TIA