How Do I Add Big Arrows to my Slideshow Slides?

Store Design
, , ,

Topic summary

A user wants to add large navigation arrows to their slideshow while keeping the existing dot indicators, allowing customers to navigate slides using either method. They’ve provided a reference image showing the desired arrow placement.

Proposed Solution:

  • Use CSS to customize the slideshow’s appearance and add arrow functionality
  • Target the slideshow’s HTML structure (container, slides, navigation elements) using classes or IDs

Implementation approach:

  1. Identify the slideshow’s HTML structure
  2. Apply CSS positioning to both dots and arrows:
    • Dots: positioned absolutely at bottom center (50% left, translated -50%)
    • Arrows: positioned absolutely at vertical center (50% top, translated -50%)
    • Container: set to relative positioning
  3. Add custom styling to match design preferences

The response includes CSS code snippets demonstrating the positioning logic needed for both navigation elements.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I want my customers to be able to use the slideshow dots AND click some big arrows on the edge of my slides to scroll between them. I’ve attached a reference image of what I’m looking for. I can edit the CSS! My s

Screenshot 2023-05-21 at 11.10.40 AM.png
Screenshot 2023-05-21 at 11.10.40 AM.png1373×503 714 KB

Thanks

2

To enable both the slideshow dots and big arrows for scrolling between slides in your slideshow, you can make use of CSS to customize the appearance and functionality. Here’s an approach you can follow:

  1. Determine the HTML structure of your slideshow. Typically, it consists of a container element wrapping the slides and navigation elements (dots and arrows).

  2. Apply CSS to style the slideshow dots and arrows according to your design preferences. You can target the appropriate HTML elements using their classes or IDs.

    For example, you might have CSS rules like:

/* Slideshow container */
.slideshow-container {
  position: relative;
  /* Add other necessary styles */
}

/* Slideshow dots */
.slideshow-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  /* Add other necessary styles */
}

/* Slideshow arrows */
.slideshow-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* Add other necessary styles */
}