Carousel in Quickly

Power your website with the new carousel CSS of Quickly: Dynamic and captivating presentation in just a few clicks.

Standard carousel

Discover our versatile Carousel CSS solution with JavaScript, meticulously designed to integrate without complications into any web design. It adapts fluently to its container, offering a standard and elegant form of dynamically highlighting the content of your website. One of its distinctive characteristics is the ability to activate automatically by adding the "auto-play" class, or enjoying it manually by eliminating this class.In addition, this carousel will stop automatically when you detect the mouse on it, resuming after removing it.

Update A carousel error was corrected in Safari, but do not worry: you will not have to do anything and everything will continue to function as before, since all the work was done under the hood. 😉

HTML 
                                    
    <div id="carousel-container" class="carousel-container auto-play">
        <div class="carousel" id="carouselId">
            <div class="carousel_item" id="item1">
                <img src="../img/16-9.webp" alt="Imagen uno" class="img-fluid hide-s"/>
                <img src="../img/1-1.webp" alt="Imagen uno" class="img-fluid hide show-s"/>
                <div class="caption-carousel text-al">
                    <h2 class="font-l">Title</h2>
                    <p class="mb-2">Fill paragraph text for the slide.</p>
                    <div class="mmb-5">
                        <button class="btn btn-secondary hide-s">Button secondary</button><button class="btn btn-primary pmb-5">Button primary</button>
                    </div>
                </div>
            </div>
            <div class="carousel_item" id="item2">
                <img src="../img/16-9.webp" alt="Imagen dos" class="img-fluid hide-s"/>
                <img src="../img/1-1.webp" alt="Imagen dos" class="img-fluid hide show-s"/>
                <div class="caption-carousel text-ac">
                    <h2 class="font-l">Title</h2>
                    <p class="mb-2">Fill paragraph text for the slide.</p>
                    <div class="mmb-5">
                        <button class="btn btn-secondary hide-s">Button secondary</button><button class="btn btn-primary">Button primary</button>
                    </div>
                </div>
            </div>
            <div class="carousel_item" id="item3">
                <img src="../img/16-9.webp" alt="Imagen tres" class="img-fluid hide-s"/>
                <img src="../img/1-1.webp" alt="Imagen tres" class="img-fluid hide show-s"/>
                <div class="caption-carousel text-ar">
                    <h2 class="font-l">Title</h2>
                    <p class="mb-2">Fill paragraph text for the slide.</p>
                    <div class="mmb-5">
                        <button class="btn btn-secondary hide-s">Button secondary</button><button class="btn btn-primary">Button primary</button>
                    </div>
                </div>
            </div>
            <div class="carousel_item" id="item4">
                <img src="../img/16-9.webp" alt="Imagen cuatro" class="img-fluid hide-s"/>
                <img src="../img/1-1.webp" alt="Imagen cuatro" class="img-fluid hide show-s"/>
                <div class="caption-carousel text-ar">
                    <h2 class="font-l">Title</h2>
                    <p class="mb-2">Fill paragraph text for the slide.</p>
                    <div class="mmb-5">
                        <button class="btn btn-secondary hide-s">Button secondary</button><button class="btn btn-primary">Button primary</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="carousel-buttons">
            <button id="button-left" class="button ml-2" aria-label="Button of left displacement">
                <svg class="ico-16 ico-white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
                    <path d="M20 .755l-14.374 11.245 14.374 11.219-.619.781-15.381-12 15.391-12 .609.755z"/>
                </svg>
            </button>
            <button id="button-right" class="button mr-2" aria-label="Button of right displacement">
                <svg class="ico-16 ico-white" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd">
                    <path d="M4 .755l14.374 11.245-14.374 11.219.619.781 15.381-12-15.391-12-.609.755z"/>
                </svg>
            </button>
        </div>                                    
    </div>