<div data-content-type="html" data-appearance="default" data-element="main">&lt;div class="custom-slider"&gt;
    &lt;input type="radio" name="slider" id="slide1" checked&gt;
    &lt;input type="radio" name="slider" id="slide2"&gt;
    &lt;input type="radio" name="slider" id="slide3"&gt;

    &lt;div class="slides"&gt;
        &lt;div class="slide"&gt;
            &lt;img src="https://hyva-staging.banyo.co.uk/media/.renditions/wysiwyg/Banner-01_2.jpg" alt="" /&gt;
        &lt;/div&gt;
        &lt;div class="slide"&gt;
            &lt;img src="https://hyva-staging.banyo.co.uk/media/.renditions/wysiwyg/Banner-02_1.jpg" alt="" /&gt;
        &lt;/div&gt;
        &lt;div class="slide"&gt;
            &lt;img src="https://hyva-staging.banyo.co.uk/media/.renditions/wysiwyg/banner3.jpg" alt="" /&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="dots"&gt;
        &lt;label for="slide1"&gt;&lt;/label&gt;
        &lt;label for="slide2"&gt;&lt;/label&gt;
        &lt;label for="slide3"&gt;&lt;/label&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;style&gt;
.custom-slider {
    position: relative;
    width: 100%;
    max-width: 1440px; /* Fixed width */
    height: 450px; /* Fixed height */
    overflow: hidden;
    margin: auto;
    border-radius: 10px; /* Optional: Rounded corners */
}

.slides {
    display: flex;
    width: 300%;
    transition: transform 0.5s ease-in-out;
}

.slide {
    width: 100%;
    flex: 0 0 100%;
}

.slide img {
    width: 1440px;
    height: 450px;
    object-fit: cover; /* Ensures images fit properly */
}

/* Hide Radio Buttons */
input[type="radio"] {
    display: none;
}

/* Dots (Pagination) */
.dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.dots label {
    width: 12px;
    height: 12px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
}

/* Active Slide */
#slide1:checked ~ .slides {
    transform: translateX(0);
}

#slide2:checked ~ .slides {
    transform: translateX(-100%);
}

#slide3:checked ~ .slides {
    transform: translateX(-200%);
}

/* Active Dot */
#slide1:checked ~ .dots label:nth-child(1),
#slide2:checked ~ .dots label:nth-child(2),
#slide3:checked ~ .dots label:nth-child(3) {
    background: #002F6C;
}

/* Responsive Design */
@media (max-width: 768px) {
    .custom-slider {
        max-width: 100%;
        height: 250px; /* Adjust for mobile */
    }
    
    .slide img {
        width: 100%;
        height: 250px;
    }
}
&lt;/style&gt;
</div>