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;
0 Replies