Simple Carousel

div class="carousel" data-flickity="{ "cellAlign": "left", "contain": true, "groupCells": true, "wrapAround": false }">

Wrapped Carousel Ho Autopalay infinite

<div class=”carousel” data-flickity='{ “cellAlign”: “left”, “contain”: true, “wrapAround”: true, “pageDots”: true, “autoPlay”: 3000 }

Wrapped Checking dots

<div class=”carousel” data-flickity='{ “cellAlign”: “left”, “contain”: true, “wrapAround”: true, “pageDots”: true, “autoPlay”: 3000 }

Wrapped Carousel Ho Autopalay infinite

<div class=”carousel” data-flickity='{ “cellAlign”: “left”, “contain”: true, “wrapAround”: true, “pageDots”: true, “autoPlay”: 3000 }

Without Navigation dots Carousel

CSS For all not only this okay

/* Pagination */
.flickity-page-dots {
    width: 100%;
    bottom: -1.5rem;
    padding: 0;
    margin: 0;    
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0.5rem;
}

.flickity-page-dots .dot {
    width: 0.5rem;
    height: 0.5rem;
    margin: 0;
    background: #000;
}

/* Navigation */
.flickity-button{
    height: 2.5rem;
    width: 2.5rem;
    background: none;
    color: #000;
}

.flickity-button:hover{
    background: none;
}

.flickity-prev-next-button.previous{
    left: 0;
    transform: translateX(-3.5rem) translateY(-50%);
}

.flickity-prev-next-button.next{
    right: 0;
    transform: translateX(3.5rem) translateY(-50%);
}
/* Infinite Carousel without Navigation Buttons */
data-flickity={ "cellAlign": "left", "prevNextButtons": false, "wrapAround": true }

With Navigation but no dots Carousel

/* Slider without Pagination */
data-flickity={ "cellAlign": "left", "contain": true, "groupCells": true, "wrapAround": false, "pageDots": false }

Simple Carousel dobule 

/* For 2 cells with 2rem gap */
.carousel-cell {
  width: calc(50% - 2rem * 1/2);
  margin-right: 2rem;
}

Three times Carousel dobule 

/* For 3 cells with 1rem gap */
.carousel-cell {
  width: calc(33.333% - 1rem * 2/3);
  margin-right: 1rem;
}

Hello how you doing

Testing Scroll Too

No idea checking dots

The YouTuber who has become one of Gen Z’s most beloved celebrities

26 last-minute holiday gifts that are still thoughtful and unique

Practicing gratitude regularly can make you less stressed and sleep better

8 things millennials wish you would just stop getting them for the holidays

/* Slider for PC*/
/* Shared styles for all screen sizes */
.gp-slider {
    grid-template-columns: none;
    grid-auto-flow: column;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;

    /* Hide scrollbar */
    scrollbar-width: none; /* For Firefox */
}

.gp-slider::-webkit-scrollbar {
    display: none; /* For Chrome, Safari, and Edge */
}

.gp-slider > div {
    scroll-snap-align: start;
}

/* Specific styles for PC, Tablet, and Mobile */
@media (min-width: 1081px) {
    .gp-slider {
        grid-auto-columns: 250px; /* For PC */
    }
}

@media (max-width: 1080px) and (min-width: 781px) {
    .gp-slider {
        grid-auto-columns: 200px; /* For tablets */
    }
}

@media (max-width: 780px) {
    .gp-slider {
        grid-auto-columns: 150px; /* For mobile */
    }
}