Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Need assistance - Infinite looping gallery w/ no column spacing

Need assistance - Infinite looping gallery w/ no column spacing

max16
Visitor
2 0 0

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!

2-2024-10-09 23.jpg2024-10-09 23.jpg3-2024-10-09 23.jpg

max16_1-1728539158778.png

 

Replies 5 (5)

Rahul_dhiman
Shopify Partner
656 127 132

hello @max16 
Please provide your website link and password.

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167

PaulMartin
Shopify Partner
599 59 144

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.

contact@paulmartinlopez.com
Feel free to email me! 😄
I'm open to conversations or work ʕ •ᴥ•ʔ

rajweb
Shopify Partner
366 35 50

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.

-Need a Shopify developer?
https://rajatweb.dev/
Email: rajat.shopify@gmail.com
max16
Visitor
2 0 0

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

Moeed
Shopify Partner
6304 1712 2059

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

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications