Как центрировать картинку по нужному индексу? - PullRequest
Новая
       42

Как центрировать картинку по нужному индексу?

0 голосов
/ 11 июля 2020

Как центрировать картинку с нужным индексом? 

const [visibleBanner, setVisibleBanner] = useState(2); // index
        
const arr = [
  { src: "https://i.imgur.com/GUJgVkF.jpg" },
  { src: "https://i.imgur.com/ftKa1GW.jpg" }, // active 1
  { src: "https://i.imgur.com/gCYMcX0.jpg" }
];
        
const onTest = () => {
  return arr.map((slide, idx) => {
    if(idx === visibleBanner) {
      return (
        <img key={idx} src={slide.src} alt="slide" />
      )
    }
    if(idx !== visibleBanner) {
      return (
        <div className="overlay">
          <img key={idx} src={slide.src} alt="slide" />
        </div>
      )
    }
  })
};

введите здесь описание изображения

То есть что-то вроде ползунка, может быть проблема в стилях пока не пойму как правильно их выставить, неактивная картинка должна быть чёрной

...