Need assistance - Infinite looping gallery w/ no column spacing

[max16]

Hello. I hope I am reaching out to the right section of this forum. I am new to Shopify and web design in general.

I have had good luck customizing the "reformation" template using the basic supplied sections.

I am trying to create an infinitely scrolling/swiping carousel of images with button/links to particular products. I want there to be no spaces between the images so the background of each image blends into the next image in line. I have got the idea from the example below. Is this possible/relatively simple?

I have very capable photoshop and graphic design skills, and can create the imagery with the background gradients no problem, but do not know the first thing when it comes to custom code. I attached a screen grab at the bottom of what the closet I can get using the basic "collection list". This is also not ideal since I have to create a whole collection for just a single product link.

Thoughts and advice would be greatly appreciated!

[Rahul_dhiman]

hello @max16 
Please provide your website link and password.

[PaulMartin]

Does your current theme offer this feature (exact or just similar)?

If so, maybe there's a setting in the code to (1) make it scroll infinitely (2) have no spacing in between.

[rajweb]

Hey @max16 ,

you're trying to create a seamless, continuous carousel of images where the images blend together without any gaps, and each image links to a specific product.I can guide you through the process.

Follow these steps:

1. Prepare Your Images: As you mentioned, you're comfortable with design, so make sure the images are ready with consistent dimensions and backgrounds that blend into one another.

2. onlineStore > themes > Edit Code.

3.  In the  Sections directory, create a new section called carousel.liquid, or you can modify an existing section.

4. CSS-Only Carousel Code:  You can use pure CSS for the animation and structure. Here's an example:

<div class="carousel-container">
  <div class="carousel">
    <a href="link-to-product1">
      <img src="image-url1.jpg" alt="Product 1">
    </a>
    <a href="link-to-product2">
      <img src="image-url2.jpg" alt="Product 2">
    </a>
    <a href="link-to-product3">
      <img src="image-url3.jpg" alt="Product 3">
    </a>
    <!-- Repeat as needed for each product -->
  </div>
</div>

<style>
.carousel-container {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.carousel {
  display: flex;
  animation: scroll 15s linear infinite;
  width: max-content; /* Allows infinite scrolling */
}

.carousel a {
  display: block;
  flex: 0 0 auto;
}

.carousel img {
  display: block;
  width: 200px; /* Adjust to fit your design */
  height: auto;
  object-fit: cover;
  margin: 0;
  padding: 0;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>

Adjustments You Can make:

1. Image Width: Set a fixed width for your images (like 200px in the example) or adjust it to match your design.

2. Animation Speed: Modify the duration (e.g., 15s) in the @keyframes animation to control how fast the images scroll.

3. Spacing: You can remove the margins or adjust the padding for seamless blending between images.

[max16]

Thank you Rajweb for the in depth answer! I will give this a shot as soon as possible and report back 👍

[Moeed]

Hey @max16 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed