I can't see my images

I am trying to make a slider carousel, but for some random reason that I don't know, I can't see my images on the screen.... I just can see the dots from the sliderSettings In the SlideImage style component only has a width for the img
import React, { useEffect, useRef, useState } from "react";
import { ProvaSocialContainer, TextContainer, SlideImage } from "../styles/ProvaSocial.style";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

import imagem1 from "../assets/antes-e-depois/1.png";
import imagem2 from "../assets/antes-e-depois/2.png";
import imagem3 from "../assets/antes-e-depois/3.png";
import imagem4 from "../assets/antes-e-depois/4.png";


const images = [
{
id: 1,
src: imagem1,
},
{
id: 2,
src: imagem2,
},
{
id: 3,
src: imagem3,
},
{
id: 4,
src: imagem4,
},
];

const ProvaSocial = () => {
const sliderSettings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
};

return (
<ProvaSocialContainer>
<TextContainer>
<h3>Sem corte e sem cirurgia</h3>
<p>Confira alguns resultados da clínica Anastásia Estética Avançada</p>
</TextContainer>
<Slider {...sliderSettings}>
{images.map((image) => (
<SlideImage key={image.id} src={image.src} alt={`Slide ${image.id}`} />
))}
</Slider>
</ProvaSocialContainer>
);
};

export default ProvaSocial;
import React, { useEffect, useRef, useState } from "react";
import { ProvaSocialContainer, TextContainer, SlideImage } from "../styles/ProvaSocial.style";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

import imagem1 from "../assets/antes-e-depois/1.png";
import imagem2 from "../assets/antes-e-depois/2.png";
import imagem3 from "../assets/antes-e-depois/3.png";
import imagem4 from "../assets/antes-e-depois/4.png";


const images = [
{
id: 1,
src: imagem1,
},
{
id: 2,
src: imagem2,
},
{
id: 3,
src: imagem3,
},
{
id: 4,
src: imagem4,
},
];

const ProvaSocial = () => {
const sliderSettings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
};

return (
<ProvaSocialContainer>
<TextContainer>
<h3>Sem corte e sem cirurgia</h3>
<p>Confira alguns resultados da clínica Anastásia Estética Avançada</p>
</TextContainer>
<Slider {...sliderSettings}>
{images.map((image) => (
<SlideImage key={image.id} src={image.src} alt={`Slide ${image.id}`} />
))}
</Slider>
</ProvaSocialContainer>
);
};

export default ProvaSocial;
No description
0 Replies
No replies yetBe the first to reply to this messageJoin
Want results from more Discord servers?
Add your server