Question 420813 in CSS Question posted in
Some basic documentation can be found here.

Css – How to create a carousel wih images React Typescript

its not really a question but answer, Ive tried to find by myself for like 3 days or so and finally I did. While doing researches I realised there is no answer across a stackoverflow.

Lets start with a question, how to create a "carousel" like function with images. We have a MainPage.tsx and some images.

import { useState } from "react";
import Book1 from "./books/MyBook1";
import Book2 from "./books/MyBook2";
import Book3 from "./books/MyBook3";
import Book4 from "./books/MyBook4";
import Book5 from "./books/MyBook5";
import "./MainPage.css";

const MainPage = () => {
    const books = [
        <Book1 />,
        <Book2 />,
        <Book3 />,
        <Book4 />,
        <Book5 />
    ];

    const [currentIndex, setCurrentIndex] = useState<number>(0);

    return (
        <div className="carousel-container">
                {books.map((book, index) => (
                    <div
                        key={index}
                        className={`carousel-slide ${
                            index === currentIndex ? "active" : "inactive"
                        }`}
                    >
                        {book}
                    </div>
                ))}
        </div>
    );
};

export default MainPage;

It might have some errors but a right one will be in answers so CHECK ANSWERS FOR THE RIGHT CODE. Does it really matters what in the MyBook1,2,3,4,5 tsx files has, well not really but still

import "./css/bolashakBook.css"
import { useState } from "react"
import { Box, Modal } from "@mui/material";
import PDFFILE from "../../assets/images/mybook1.pdf"


const MyBook1 = () => {

    const [ isFrameOpen, setIsFrameOpen ] = useState(false);

    const handleOnClickFrame = () => {
        setIsFrameOpen(!isFrameOpen)
    }

    return (
        <div className="book1-container">
            <Modal open={isFrameOpen} onClose={() => setIsFrameOpen(false)}>
                <Box>
                    <iframe
                        id="inlineFramePDF"
                        title="PDF"
                        className="iframe-element"
                        width="300"
                        height="400"    
                        src={PDFFILE}
                    ></iframe>
                </Box>
            </Modal>
            <div className="book1-container">
                <img
                src={MyBookImage}
                className="book1-image"
                onClick={handleOnClickFrame}
                alt="My book one"
                ></img>
            </div>
        </div>
    ) 
}
export default MyBook1; ```

CHECK THE ANSWERS THAK YOU FOR THE CSS thank you!
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    OMG ITS ME AGAIN WOOW, alright alright lets just hop in for the code, again the question is, we have images and we want to make a carousel like function, I hope stackoverflow will NOT delete my question.

    MainPage.tsx

    import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";
import { useState } from "react";
import BolashakBook from "./books/bolashakBook";
import JournalBook from "./books/journalBook";
import MaslihatBook from "./books/maslihatBook";
import KogamDuirBook from "./books/kogamDauirBook";
import KazSpectre from "./books/kazSpectreBook";
import "./MainPage.css";

const MainPage = () => {
    const books = [
        <BolashakBook />,
        <JournalBook />,
        <KazSpectre />,
        <KogamDuirBook />,
        <MaslihatBook />
    ];

    const [currentIndex, setCurrentIndex] = useState<number>(0);

    const settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 3, 
        slidesToScroll: 1,
        centerMode: true,
        variableWidth: true,
        beforeChange: (_: number, next: number) => setCurrentIndex(next), // Сохраняем индекс центрального слайда
    };

    return (
        <div className="carousel-container">
            <Slider {...settings}>
                {books.map((book, index) => (
                    <div
                        key={index}
                        className={`carousel-slide ${
                            index === currentIndex ? "active" : "inactive"
                        }`}
                    >
                        {book}
                    </div>
                ))}
            </Slider>
        </div>
    );
};

export default MainPage;

    MainPage.css

    .carousel-container {
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.carousel-slide {
    display: flex;
    /* justify-content: center; */
    align-items: center;
    padding: 10px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.6;
    transform: scale(0.8);
}

.carousel-slide.active {
    opacity: 1;
    transform: scale(1) translateY(-20px);
    z-index: 10;
}

.carousel-slide.inactive {
    opacity: 2;
    transform: scale(0.8);
}

.slick-prev:before, .slick-next:before {
    color: black;
}

.slick-next {
    top: 200px;
}

.slick-prev {
    top: 200px;
}

.slick-dots{
    top: 500px;
}

    Let me explain this carousel-container (well its carousel container) carousel-slide (each slide means each book or each image) carousel-slide:active (the book in the middle which we consider as active, it will have less transparence) carousel-slide:inactive (those books or images that are not in the center, they will be smaller and have more transparance)
    slick-next (button next) slick-prev (button previous) slick-dots (dots under the images)

    What about MainPage.tsx well we use react-slick (librarie for react) which helps to make a carousel, we have settings you can check (https://react-slick.neostack.com/docs/get-started) its an official react-slick documentation. Is you have some advice you are welcome. If you think you can do better, please and welcome. In coding I love when someone tells me that im wrong, cause I learn more from critics. Thank you very much for the attention.


  2. 0

    Creating your own Carousel is relatively straightforward. You can pass an array of images/components to the Carousel component and manage the currently selected image with a state. To ensure the selected image stays centered, you can add a ref to the selected image and use the scrollIntoView method on that ref.

    You can also add handlers to navigate between images. These handlers can manipulate the current image index to show the previous or next image when the corresponding arrow buttons are clicked.

     selectedImageRef.current.scrollIntoView({
      behavior: "smooth",
      block: "center",
      inline: "center",
    });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search