0

I have a horizontal media scroller with a few images that are generated from my Django Model. However I would like them to be looped over infinitely and I have no idea on how to approach this.

Html:

<div class="top-display snaps-inline">
  {% for top in clothes %}
    <div class="top-wrapper">
      <img class="top-image" src="{{ top.image.url }}">
    </div>
  {% endfor %}
</div>

styles.css

.top-display {
  position: relative;
  display: grid;
  gap: 5rem;
  grid-auto-flow: column;
  grid-auto-columns: 17%;

  padding: 0 var(--_spacer) var(--_spacer);

  overflow-x: hidden;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  white-space: nowrap;
}

.top-image {
  width: 100%;
  object-fit: cover;
}
M--
  • 25,431
  • 8
  • 61
  • 93
maria
  • 42
  • 5
  • Define *"looped over / scroller"* there's more than one effect you can apply to *loop over*. Please [edit] to add a [mcve] to add the JS you're having issues with. Otherwise I can only suspect it's a duplicate of: [Carousel slideshow with infinite loop](https://stackoverflow.com/questions/72690608/carousel-slideshow-with-infinite-loop) – Roko C. Buljan Aug 12 '23 at 19:21
  • If you are sure that your images as a whole are wider than any screen they will be shown on then just create two sets and translate the whole lot by -50% in the x axis using a CSS keyframes animation which you set to run infinitely. – A Haworth Aug 12 '23 at 21:14
  • read this: https://verpex.com/blog/website-tips/how-to-create-an-infinite-image-slider-using-css – Temani Afif Aug 12 '23 at 21:27

1 Answers1

0

To create an infinite looping horizontal media scroller in your Django project using the HTML and CSS you provided, you can achieve this effect by duplicating the images in your loop and arranging them in a seamless loop. Here's how you can do it:

Modify your HTML template: In your Django template, you need to duplicate the images and wrap them within your scroller. You can do this by repeating the same images twice or as many times as you want the loop to appear seamless.

<div class="top-display snaps-inline">
    {% for top in clothes %}
        <div class="top-wrapper">
            <img class="top-image" src="{{ top.image.url }}">
        </div>
    {% endfor %}
    <!-- Repeat the images again -->
    {% for top in clothes %}
        <div class="top-wrapper">
            <img class="top-image" src="{{ top.image.url }}">
        </div>
    {% endfor %}
</div>

Adjust CSS for looping: You'll need to modify your CSS to ensure that the duplicate images appear immediately after the original images, creating the looping effect.

.top-display {
    position: relative;
    display: grid;
    gap: 5rem;
    grid-auto-flow: column;
    grid-auto-columns: 17%;
    padding: 0 var(--_spacer) var(--_spacer);

    /* Adjust the width to accommodate duplicated images */
    width: calc(100% * 2);

    overflow: hidden;
    white-space: nowrap;
}

By doubling the width of the .top-display container and arranging the duplicate images immediately after the original images, you'll create the illusion of a seamless infinite loop. The CSS property overflow: hidden; will hide the overflowing content, and white-space: nowrap; will prevent line breaks between images.

Keep in mind that the number of duplicate images you use will affect how long the loop takes to repeat. You can adjust the width and the number of duplicated images to fine-tune the looping speed and visual effect.

Make sure to test this approach in different browsers and devices to ensure it works smoothly across various platforms.

r.aminda_
  • 1
  • 1