"Repetitive" elements arranged horizontally

Question

"Repetitive" elements arranged horizontally

My goal is to create a looped row of elements, similar to this design:

https://i.sstatic.net/7cC2z.png

This row should function like a carousel where clicking the "Next" button changes the current element and positions it in the center of the row. I envision this row as being looped, with the beginning and end connected seamlessly. I'm unsure if CSS has a way to curve divs or if JavaScript would be needed for this.

I have an array of elements in JS:

const elements = ["One","Two","Three","Four","Five","Six","Seven","Eight","Nine","Ten"];

The row is initialized with this array in HTML:

<div id="loopedRow">
  <span>One</span>
  <span>Two</span>
  <span>Three</span>
  <span>Four</span>
  <span>Five</span>
  <span>Six</span>
  <span>Seven</span>
  <span>Eight</span>
  <span>Nine</span>
  <span>Ten</span>
</div>

If anyone could provide guidance on how to achieve this effect, I would greatly appreciate it.

javascript css

Answer 1

Answer №1

Unsure if this information will be of use to you. In the callXTimes function, insert your actual display logic.

const items = ["Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig", "Grape", "Honeydew", "Infused Water", "Jackfruit"];


function iterate() {
    var length = items.length;
    
    length = length/2;
    var result = "";
    for(var index = length ; index< items.length; index++){
       result += " "+items[index];
    }
    
    for(var index = 0 ; index< length ; index++){
             result += " "+ items[index];
    }
    
   document.getElementById('iteratedList').innerHTML = result;

}


iterate();

<div id="iteratedList"></div>

Answer 2

Unsure if this information will be of use to you. In the callXTimes function, insert your actual display logic.

const items = ["Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig", "Grape", "Honeydew", "Infused Water", "Jackfruit"];


function iterate() {
    var length = items.length;
    
    length = length/2;
    var result = "";
    for(var index = length ; index< items.length; index++){
       result += " "+items[index];
    }
    
    for(var index = 0 ; index< length ; index++){
             result += " "+ items[index];
    }
    
   document.getElementById('iteratedList').innerHTML = result;

}


iterate();

<div id="iteratedList"></div>

"Repetitive" elements arranged horizontally

Answer №1

Similar questions

Loop through the data string in Ajax using a For Loop to populate it

Re-establishing the socket channel connection in a React application after a disconnection

Exploring the elements within array structures

Ways to update a component's state by clicking a button located on a different component

Error encountered while invoking web server method in C# through ajax resulting in a 500 Internal Server Error

Surprising Outcomes of Negative Margin in jQuery Animation

Guide on transforming a collection of files from formdata into a JavaScript object

What is the reason for this MongoDB document consistently having the identical nanoid?

jQuery - Modify Turn.js to exclusively implement the page Peel effect

Do I have to divide the small functions in my Node.js controller into smaller ones?

"Incorporate multiple data entries into a table with the help of Jquery

When a key is pressed, apply a background color and fade out effect using JavaScript

HTML and CSS are distinct entities with their own individual purposes and

Incorporate a smooth infinite scroll feature in a CSS carousel that seamlessly loops without

Has the binary search operation not been executed?

I am looking to have my page refresh just one time

Passport.socket.io cannot resolve the issue of a missing session

Managing various encoding methods when retrieving the XML data feed

To properly display text strings in your application, ensure they are enclosed within a <Text> component in React Native. This is crucial

Tips for defining the width of columns that adapt to different screen sizes in Bootstrap version 4