Can anyone help resolve this header bug in my announcement bar code?

Technical Q&A
1

Hello to all. Would anyone be so kind as to help me with this bug, or code error?

I created a new announcement bar section, first without deleting the default one by putting <! – →
then backing up and deleting it completely, the section and the label in the Theme, and I keep getting this bug.

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

When I disable this section completely, the bug disappears.

here liquid,

{%- if  section.blocks.size > 0 and section.settings.show_announcement_bar -%}
<div class="custom-announcement-bar swiper-container">
  <div class="custom-messages swiper-wrapper">
    {%- for block in section.blocks -%}
    <div class="custom-message swiper-slide">{{block.settings.message}}</div>
    {%- endfor -%}
  </div>
  <div class="custom-swiper-button swiper-button-prev"></div>
  <div class="custom-swiper-button swiper-button-next"></div>
</div>
<script src="//unpkg.com/swiper/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="//unpkg.com/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>
  .custom-announcement-bar{
    background:{{section.settings.colorBackground}};
    position: relative;
    overflow: hidden;
  }
  .shopify-section-Announcement-slider {
    text-align: center;
  }
  .custom-announcement-bar .custom-message{
    text-align:center;
    color:{{section.settings.colorText}};
    font-size:{{section.settings.font_size}}px;
    text-transform:{{section.settings.mobile_thumbnails1}};
    
  }
  .custom-announcement-bar .swiper-button-next:after, .custom-announcement-bar .swiper-container-rtl .swiper-button-prev:after,
  .custom-announcement-bar .swiper-button-prev:after, .custom-announcement-bar .swiper-container-rtl .swiper-button-next:after{
    font-size: 15px;
    color:{{section.settings.colorText}};
  }
  {%- if  section.blocks.size < 2 %}
  .custom-announcement-bar .custom-swiper-button{display:block!important;}
  {%- endif -%}
</style>
{%- endif -%}

{% schema %}
  {
    "name": "Announcement slider 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"
      },
   {
      "type": "range",
      "id": "font_size",
      "min": 5,
      "max": 50,
      "step": 1,
      "unit": "px",
      "label": "Font size",
      "default": 14
    },
 {
      "type": "select",
      "id": "mobile_thumbnails1",
     "label": "Text transform",
      "options": [
        {
          "value": "uppercase",
          "label": "Upper case"
        },
        {
          "value": "lowercase",
          "label": "Lower case"
        },
       {
          "value": "Capitalize",
          "label": "Capitalize"
        }
      ]
    }
],
"blocks": [
      {
        "type": "header",
        "name": "Message",
        "settings": [
          {
              "id": "message",
              "type": "richtext",
             "label": "Enter your text"
            },
          {
          "type": "url",
          "id": "link",
          "label": "t:sections.announcement-bar.blocks.announcement.settings.link.label"
        }
        ]
      }
]
  }
{% endschema %}