How can I create an announcement-bar slider like Missoma?

[itsmuhammad]

Hi, I want an announcement-bar slider, the same as the one on the same https://www.missoma.com/ site, exactly the same movement when entering the site how can i do it PLS Help

[itsmuhammad]

Ok
hadimusic.myshopify.com

2376

[itsmuhammad]

I’ve accepted you

[LitExtension]

Hi @itsmuhammad ,

Please send me the code of announcement-bar.liquid file, I will check it.

[itsmuhammad]

{%- for block in section.blocks -%}
  {%- case block.type -%}
    {%- when 'announcement' -%}
      

        {%- if block.settings.text != blank -%}
          {%- if block.settings.link != blank -%}
            
          {%- endif -%}
              

                

                  {{ block.settings.text | escape }}
                  {%- if block.settings.link != blank -%}
                    {% render 'icon-arrow' %}
                  {%- endif -%}
                

              

          {%- if block.settings.link != blank -%}
            
          {%- endif -%}
        {%- endif -%}
      

  {%- endcase -%}
{%- endfor -%}

{% schema %}
{
  "name": "t:sections.announcement-bar.name",
  "max_blocks": 12,
  "blocks": [
    {
      "type": "announcement",
      "name": "t:sections.announcement-bar.blocks.announcement.name",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "default": "Welcome to our store",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.text.label"
        },
        {
          "type": "select",
          "id": "text_alignment",
          "options": [
            {

[LitExtension]

Hi @itsmuhammad ,

Please change code here:

Code:

  

    {%- for block in section.blocks -%}
      {%- case block.type -%}
        {%- when 'announcement' -%}
          

            {%- if block.settings.text != blank -%}
              {%- if block.settings.link != blank -%}
                
              {%- endif -%}
                

                  {{ block.settings.text | escape }}
                  {%- if block.settings.link != blank -%}
                    {% render 'icon-arrow' %}
                  {%- endif -%}
                

              {%- if block.settings.link != blank -%}
                
              {%- endif -%}
            {%- endif -%}
          

      {%- endcase -%}
    {%- endfor -%}
  

  
    {%- for block in section.blocks -%}
      {%- case block.type -%}
        {%- when 'announcement' -%}
          

            {%- if block.settings.text != blank -%}
              {%- if block.settings.link != blank -%}
                
              {%- endif -%}
                

                  {{ block.settings.text | escape }}
                  {%- if block.settings.link != blank -%}
                    {% render 'icon-arrow' %}
                  {%- endif -%}
                

              {%- if block.settings.link != blank -%}
                
              {%- endif -%}
            {%- endif -%}
          

      {%- endcase -%}
    {%- endfor -%}
  

Hope it helps!

[itsmuhammad]

its works but i have this problom (because I had two Announcement-Bars )

you can see ( https://skymoonusa.com/?_ab=0&_fd=0&_sc=1 )

[LitExtension]

Hi @itsmuhammad ,

Please send me the preview link, and I will check it for you. because the current link can only see the published theme.

[itsmuhammad]

this is the preview link, https://skymoonusa.com/?_ab=0&_fd=0&_sc=1

[LitExtension]

Hi @itsmuhammad ,

You can refer

Please send me the preview link, I will check it for you

[itsmuhammad]

oh sorry (this is the preview link - https://hg37o2jtcrkex5hi-60246589572.shopifypreview.com )

[itsmuhammad]

I deleted the second Announcement bar but still the problem there

[LitExtension]

Hi @itsmuhammad ,

Because the slider is added by CSS same as the demo you sent, so you need to enter more blocks, it will display fine, instead of just entering 1 you can duplicate it.

Hope it is clear to you.

[itsmuhammad]

yes it’s clear to me, thank you so so mach