Custom Announcement Bar, Arrows or 7second Scroll Not working on mobile? HTML/Liquid
Solved
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
IMAGE2: Mobile version, arrows don't let me click them and the message is stuck and doesn't scroll
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>
Accepted Solution (1)
@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
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.
@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
Community Blog Articles
Celebrating Our Members of the Month | December '24
Hey Community! As we jump into 2025, we want to give a big shout-out to all of you wh...
By JasonH Jan 7, 2025
Holiday Cheers to Our Community | November '24
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024
Dropshipping Viral Products to Sell in 2025
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024