Reports

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.

79332150