Custom Announcement Bar, Arrows or 7second Scroll Not working on mobile? HTML/Liquid

Store Design
, , , ,
1

Trying to code a custom liquid section on shopify where it displays messages that scroll every 7 seconds and the user can click < > to go left and right on the messages. The desktop version works nicely. The mobile version doesn’t

IMAGE1: Desktop version, scrolls every 7 seconds and arrows work

1111Capture.PNG

IMAGE2: Mobile version, arrows don’t let me click them and the message is stuck and doesn’t scroll

2222Capture.PNG

The mobile version doesnt scroll at all and the < > buttons don’t work.

Anyone know why from this code?

Mobile Code Version:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Announcement Bar</title>
  <style>
    /* Basic Styles for Announcement Bar */
    .announcement-bar-container {
      width: 50%; /* Adjust the width to make the box smaller */
      background-color: #000000;
      color: white;
      text-align: center;
      padding: 10px 0;
      position: relative;
      overflow: hidden;
      margin: 0 auto; /* Center the container */
    }

    .announcement-bar-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px; /* Default font size */
    }

    .announcement-text {
      display: flex;
      white-space: nowrap;
      transition: transform 0.5s ease-in-out;
      flex-direction: column; /* Allow the text to stack vertically */
    }

    .announcement-text-item {
      display: none; /* Hide all items by default */
      padding: 0 15px;
      min-width: 100%;
      text-align: center;
    }

    .announcement-arrows {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 0; /* Remove extra padding */
      left: 0; /* Ensure arrows touch the ends */
    }

    .prev-arrow, .next-arrow {
      font-size: 20px;
      cursor: pointer;
    }

    /* Show the first item */
    .announcement-text-item:first-child {
      display: block;
    }

    /* Mobile Styles */
    @media (max-width: 768px) {
      .mobile-announcement-bar-container {
        width: 90% !important; /* Adjust width to 90% on mobile */
      }

      .mobile-announcement-bar-wrapper {
        font-size: 12px !important; /* Set font size to be larger on mobile */
      }

      .mobile-announcement-text {
        flex-direction: column; /* Ensure text is stacked vertically */
      }

      .mobile-announcement-text-item {
        padding: 5px 0; /* Reduce padding to fit better on mobile */
        font-size: 14px; /* Increase the font size of text items on mobile */
        display: block; /* Ensure the items are block-level for stacking */
      }
    }
  </style>
</head>
<body>

  <div class="announcement-bar-container mobile-announcement-bar-container">
    <div class="announcement-bar-wrapper mobile-announcement-bar-wrapper">
      <div class="announcement-text mobile-announcement-text">
        <span class="announcement-text-item mobile-announcement-text-item">
          <strong>Shop Deals <span style="color: red;">50% OFF</span> Today! - 
            <a href="https://extremekool.com/collections/deals">Shop Now</a>
          </strong>
        </span>
        <span class="announcement-text-item mobile-announcement-text-item">
          <strong>Shop Gift Cards today! ?❤️? - 
            <a href="https://extremekool.com/collections/gift-cards">Shop Now</a>
          </strong>
        </span>
        <span class="announcement-text-item mobile-announcement-text-item">
          <strong>Sports & Outdoors! ?⛳?️ - 
            <a href="https://extremekool.com/collections/sports-outdoors">Shop Now</a>
          </strong>
        </span>
        <span class="announcement-text-item mobile-announcement-text-item">
          <strong>Find Your Inner Cool. ? - 
            <a href="https://extremekool.com/collections/cool">Shop Now</a>
          </strong>
        </span>
      </div>
    </div>
    <div class="announcement-arrows">
      <span class="prev-arrow"><</span>
      <span class="next-arrow">></span>
    </div>
  </div>

  <script>
    let currentIndex = 0;
    const items = document.querySelectorAll('.announcement-text-item');
    const totalItems = items.length;

    function showNextItem() {
      items[currentIndex].style.display = 'none'; // Hide the current item
      currentIndex = (currentIndex + 1) % totalItems; // Move to next item
      items[currentIndex].style.display = 'block'; // Show the new item
    }

    function showPrevItem() {
      items[currentIndex].style.display = 'none'; // Hide the current item
      currentIndex = (currentIndex - 1 + totalItems) % totalItems; // Move to previous item
      items[currentIndex].style.display = 'block'; // Show the new item
    }

    // Automatically scroll every 7 seconds
    setInterval(showNextItem, 7000);

    // Handle manual scrolling with arrows
    document.querySelector('.next-arrow').addEventListener('click', showNextItem);
    document.querySelector('.prev-arrow').addEventListener('click', showPrevItem);
  </script>

</body>
</html>

Desktop Code: (works - scrolls every 7 seconds and arrows go left and right)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Announcement Bar</title>
  <style>
    /* Basic Styles for Announcement Bar */
    .announcement-bar-container {
      width: 50%; /* Adjust the width to make the box smaller */
      background-color: #000000;
      color: white;
      text-align: center;
      padding: 10px 0;
      position: relative;
      overflow: hidden;
      margin: 0 auto; /* Center the container */
    }

    .announcement-bar-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px; /* Default font size */
    }

    .announcement-text {
      display: flex;
      white-space: nowrap;
      transition: transform 0.5s ease-in-out;
      flex-direction: column; /* Allow the text to stack vertically */
    }

    .announcement-text-item {
      display: inline-block;
      padding: 0 15px;
      min-width: 100%;
      text-align: center;
    }

    .announcement-arrows {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 0; /* Remove extra padding */
      left: 0; /* Ensure arrows touch the ends */
    }

    .prev-arrow, .next-arrow {
      font-size: 20px;
      cursor: pointer;
    }

    /* Hide all items except the first one */
    .announcement-text-item:not(:first-child) {
      display: none;
    }

    /* Custom Section Padding */
    .section-sections--23794238390554__custom_liquid_ngFqp9-padding {
        padding-top: 0px;
        padding-bottom: 0px;
        background-color: black;
    }

    /* Make all Shop Now links white and underlined, and ensure they are clickable */
    .announcement-text-item a {
      color: white !important;
      text-decoration: underline !important;
      cursor: pointer; /* Make sure the cursor is a pointer */
      z-index: 1; /* Ensure link is on top of any overlapping elements */
      position: relative; /* Allow z-index to work properly */
    }

    /* Mobile Styles */
    @media (max-width: 768px) {
      .announcement-bar-container {
        width: 90% !important; /* Adjust width to 90% on mobile */
      }

      .announcement-bar-wrapper {
        font-size: 12px !important; /* Set font size to be larger on mobile */
      }

      .announcement-text {
        flex-direction: column; /* Ensure text is stacked vertically */
      }

      .announcement-text-item {
        padding: 5px 0; /* Reduce padding to fit better on mobile */
        font-size: 14px; /* Increase the font size of text items on mobile */
      }
    }

  </style>
</head>
<body>

  <div class="announcement-bar-container">
    <div class="announcement-bar-wrapper">
      <div class="announcement-text">
        <span class="announcement-text-item">
          <strong>Discover unbeatable deals and exclusive offers, 
            <span style="color: red;">Up to 50% OFF!</span> - 
            <a href="https://extremekool.com/collections/deals">Shop Now</a>
          </strong>
        </span>
        <span class="announcement-text-item">
          <strong>Give the gift of choice — Shop Gift Cards today! ?❤️? - 
            <a href="https://extremekool.com/collections/gift-cards">Shop Now</a>
          </strong>
        </span>
        <span class="announcement-text-item">
          <strong>Explore Sports & Outdoors! ?⛳?️ Fishing, Golf, Snowboarding & More! - 
            <a href="https://extremekool.com/collections/sports-outdoors">Shop Now</a>
          </strong>
        </span>
        <span class="announcement-text-item">
          <strong>Find Your Inner Cool. ? - 
            <a href="https://extremekool.com/collections/cool">Shop Now</a>
          </strong>
        </span>
      </div>
    </div>
    <div class="announcement-arrows">
      <span class="prev-arrow"><</span>
      <span class="next-arrow">></span>
    </div>
  </div>

  <script>
    let currentIndex = 0;
    const items = document.querySelectorAll('.announcement-text-item');
    const totalItems = items.length;

    function showNextItem() {
      items[currentIndex].style.display = 'none'; // Hide the current item
      currentIndex = (currentIndex + 1) % totalItems; // Move to next item
      items[currentIndex].style.display = 'inline-block'; // Show the new item
    }

    function showPrevItem() {
      items[currentIndex].style.display = 'none'; // Hide the current item
      currentIndex = (currentIndex - 1 + totalItems) % totalItems; // Move to previous item
      items[currentIndex].style.display = 'inline-block'; // Show the new item
    }

    // Automatically scroll every 7 seconds
    setInterval(showNextItem, 7000);

    // Handle manual scrolling with arrows
    document.querySelector('.next-arrow').addEventListener('click', showNextItem);
    document.querySelector('.prev-arrow').addEventListener('click', showPrevItem);
  </script>

</body>
</html>
2

@Brian-A - can you share this page link where you have this bar?

3

thanks for reply.

if you want to look i can give you Collab code.

Theres two different liquids.

One for mobile & one on desktop view.

1112Capture.PNG
1112Capture.PNG264×233 7.27 KB

4

@Brian-A need to check if it is a javascript issue, need browser link for it

5

www.extremekool.com

Password01

6

@Brian-A - check this error selected, (3rd from last), it says currentIndex already declared, that can be an issue.. I recommend chagne this variable name in mobile version to some other unique name , say currentIndex_mobile , clear cache and check

suyash1_0-1736046411035.png
suyash1_0-1736046411035.png1366×768 357 KB

7

beautiful works!