What is the best way to display these images correctly within a slider?

Question

What is the best way to display these images correctly within a slider?

My goal is to display 4 images/company logos per slide, but they all end up clustered on one slide. Despite my efforts to adjust the CSS, nothing seems to work.

This is what my code currently renders: https://i.sstatic.net/ThaOK.png

Here are the react component codes I am using:

To see the issue in action, check out this link to the codesandbox: https://codesandbox.io/p/sandbox/admiring-resonance-qptjfh?file=%2Fsrc%2Fcomponents%2FAdCarousel.tsx%3A10%2C1

Explanation of code logic: For each slide, a subset of 4 logos is selected using slice. Then, it maps over this subset to create an img element for each logo. Each img has a key attribute set to the logoIndex for efficient rendering. This method ensures dynamic rendering of logos based on the current slide and their position in the overall array.

Any advice or assistance on how to resolve this issue would be greatly appreciated. Thank you in advance!

javascript html css reactjs codesandbox

Answer 1

Answer №1

My recommendation would be to implement swiper for this specific task. You can find more information here:

Answer 2

My recommendation would be to implement swiper for this specific task. You can find more information here:

Answer 3

Answer №2

Unfortunately, I can't see your code at the moment. However, I can provide you with a helpful example of a React component that utilizes the widely used carousel library called react-slick to achieve the desired functionality. Before proceeding, ensure that you have react-slick and slick-carousel installed via npm or yarn

Installation steps:

npm install react-slick --save

Create a basic 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;

You can now incorporate this component into 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' },
    ],
    // ... additional arrays of logos for each slide
  ];

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

export default YourParentComponent;

Answer 4

Unfortunately, I can't see your code at the moment. However, I can provide you with a helpful example of a React component that utilizes the widely used carousel library called react-slick to achieve the desired functionality. Before proceeding, ensure that you have react-slick and slick-carousel installed via npm or yarn

Installation steps:

npm install react-slick --save

Create a basic 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;

You can now incorporate this component into 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' },
    ],
    // ... additional arrays of logos for each slide
  ];

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

export default YourParentComponent;

What is the best way to display these images correctly within a slider?

Answer №1

Answer №2

Similar questions

Changes in props do not automatically update children via Ref

Having issues with InstaFeed (search) feature and jQuery Mobile

Can a `react` app with `mysql` be uploaded to `github`?

Is it possible to develop an image that can be zoomed in and out using the mouse

Simulating a service call in an AngularJS controller

Why is access to fetch from the origin localhost blocked by CORS policy, while posting using ajax does not face this issue?

Struggling to eliminate the underlines from an HTML hyperlink

The process of implementing image validation in PHP, such as checking for size and weight restrictions,

What is the best way to use res.sendFile() to serve a file from a separate directory in an Express.js web application?

The horizontal scrollbar in Chrome is unexpectedly activated, despite elements being set to occupy the full screen width (100vw) using Tailwind and NextJS 13.4+

Deploying a website with a ReactJS user interface and ExpressJS server backend

Tips for restricting the line length in email XSLT

Capture an image of a webpage and print it out

Encountered a 'SyntaxError: await is only valid in async function' error while trying to utilize the top-level await feature in Node v14.14.0

Applying unique textures to individual sides in Three.js

Function not executing on button press in React.js

AngularJS - Viewless and Issue-Free

Keep deciphering in a loop until the URI string matches

Integrating DHTMLX Scheduler with Node JS for seamless scheduling solutions

How can I stop the li item from swiping right in JQuery mobile?