how to show arrows for images

[Ecomowner]

 Does anyone know how to add arrows on the side of the 4 small image below the large one so people know there are more images to see.

[PageFly-Richard]

Hi,

This is Richard at PageFly - Shopify Advanced Page Builder app.

Yes, you can absolutely add arrows to the side of the 4 small images below the main image to indicate that there are more images to view. Here's how you can achieve this using HTML, CSS, and potentially a bit of JavaScript for better functionality:

1. HTML Structure:

You'll need to wrap the small images in a container that allows for horizontal scrolling and add arrow elements.

HTML

<div class="image-gallery">
  <div class="image-scroll-container">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    <img src="image4.jpg" alt="Image 4">
    </div>
  <div class="arrow left-arrow">&lt;</div>
  <div class="arrow right-arrow">&gt;</div>
</div>

2. CSS Styling:

Style the container to enable horizontal scrolling and position the arrows.

CSS

.image-gallery {
  position: relative; /* Needed for absolute positioning of arrows */
  width: 100%; /* Adjust width as needed */
  overflow: hidden; /* Hide overflow */
}

.image-scroll-container {
  display: flex; /* Arrange images in a row */
  overflow-x: auto; /* Enable horizontal scrolling */
  scroll-snap-type: x mandatory; /* Snap to each image on scroll */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.image-scroll-container img {
  flex: 0 0 auto; /* Don't shrink or grow, auto width */
  width: 25%; /* Adjust width as needed based on number of images */
  scroll-snap-align: start; /* Snap to the start of each image */
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 1; /* Ensure arrows are on top */
}

.left-arrow {
  left: 0;
}

.right-arrow {
  right: 0;
}

3. JavaScript (Optional - For Improved Functionality):

You can add JavaScript to manually scroll the images when the arrows are clicked for a smoother experience.

JavaScript

const scrollContainer = document.querySelector('.image-scroll-container');
const leftArrow = document.querySelector('.left-arrow');const rightArrow = document.querySelector('.right-arrow');

leftArrow.addEventListener('click', () => {
  scrollContainer.scrollLeft -= scrollContainer.offsetWidth / 4; // Adjust scroll amount as needed
});

rightArrow.addEventListener('click', () => {
  scrollContainer.scrollLeft += scrollContainer.offsetWidth / 4; // Adjust scroll amount as needed
});

Explanation:

• HTML:
  • The image-gallery div acts as the main container.
  • The image-scroll-container div holds the images and enables scrolling.
  • The arrow divs are used for the left and right arrows.
• CSS:
  • overflow-x: auto allows horizontal scrolling.
  • scroll-snap-type: x mandatory ensures images snap to the view.
  • position: absolute on the arrows allows them to be positioned relative to the image-gallery.
  • z-index ensures the arrows are visible above the images.
• Javascript:
  • The JavaScript code listens for clicks on the arrows.
  • scrollContainer.scrollLeft is used to adjust the horizontal scroll position.

Additional Considerations:

• Image Size: Make sure the images are appropriately sized to fit within the container.
• Responsiveness: Adjust the CSS for different screen sizes to ensure the layout works well on mobile devices.
• Accessibility: Consider adding ARIA attributes for accessibility, such as aria-label for the arrows.
• Visual Styling: Customize the appearance of the arrows to match the overall design.

Hoping my solution helps you solve your problem.

Best regards,

Richard | PageFly

[WebDeskSolution · Accepted solution]

Hello @Ecomowner 

Please follow the steps below after logging into the Shopify admin:

• Go to your Shopify Admin panel.
• Click on Online Store > Themes.

• Find the live theme and then click Actions > Edit code.

• Search base.css
• Insert the provided CSS code at the end of the file and save the changes.

.product .thumbnail-slider .slider:not(.slider--everywhere):not(.slider--desktop)+.slider-buttons {
    display: block !important;
    position: unset;
}
.product .slider:not(.slider--everywhere):not(.slider--desktop)+.slider-buttons .slider-dots {
    display: none;
}
.product  button.slider-button.slider-button--prev {
    left: 10px;
}
.product button.slider-button.slider-button--next {
    right: 10px;
}
.product button.slider-button {
    background: #fff;
    position: absolute;
    top: 40%;
    visibility: visible;
    z-index:5
}

Please hit Like and Mark it as a Solution if you find our reply helpful.