how do i render this images properly in a slider

Question

this is what im trying to achieve []

this is what my code renders this are the react component codes

this is the link to the codesandbox: https://codesandbox.io/p/sandbox/admiring-resonance-qptjfh?file=%2Fsrc%2Fcomponents%2FAdCarousel.tsx%3A10%2C1

i am trying to render 4 images/company logos per slide, but everything ends up clustered on 1 slide. i have tried to adjust the css to the best of my knowledge, everything i have tried does not work.

For each slide, the code selects a subset of 4 logos using slice. It then maps over this subset, creating an img element for each logo. The key attribute is set to the logoIndex for efficient rendering. i used this method to achieve a dynamic rendering of logos based on the current slide and the position of each logo in the overall array.

thank you in advance

Answer 1

Without seeing your code, I will provide you with a simple example of a React component that uses the popular carousel library, react-slick, to achieve the desired behavior. Make sure you have installed react-slick and slick-carousel using npm or yarn

Install:

npm install react-slick --save

Create a simple React component

import React from 'react';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

const LogoSlider = ({ logos }) => {
  const settings = {
    infinite: true,
    slidesToShow: 4,
    slidesToScroll: 1,
    dots: true,
    arrows: true,
  };

  return (
    <Slider {...settings}>
      {logos.map((slideLogos, index) => (
        <div key={index}>
          {slideLogos.map((logo, logoIndex) => (
            <img
              key={logoIndex}
              src={logo.imageUrl}
              alt={`Logo ${logoIndex + 1}`}
              style={{ width: '100%', height: 'auto' }}
            />
          ))}
        </div>
      ))}
    </Slider>
  );
};

export default LogoSlider;

Now, you can use this component in your parent component:

import React from 'react';
import LogoSlider from './LogoSlider'; 

const YourParentComponent = () => {
  const logos = [
    [
      { imageUrl: 'logo1.jpg' },
      { imageUrl: 'logo2.jpg' },
      { imageUrl: 'logo3.jpg' },
      { imageUrl: 'logo4.jpg' },
    ],
    // ... more arrays of logos for each slide
  ];

  return (
    <div>
      <h1>Your Logo Slider</h1>
      <LogoSlider logos={logos} />
    </div>
  );
};

export default YourParentComponent;

Answer 2

I suggest you to use swiper for this purpose . here : https://swiperjs.com/react