Embla Carousel

The most fluid carousel library with unmatched swipe precision.

License: MIT
https://davidcetinkaya.github.io/embla-carousel/

Embla Basic

No autoplay

With autoplay

                
                  <!-- No autoplay: "autoPlay": 0 -->
                  <div class="embla" data-embla='{
                        "slidesToScroll":   1,
                        "loop":             false, 
                        "dragFree":         false,
                        "autoPlay":         3000
                  }'>
                    <div class="embla__viewport">
                      <div class="embla__container">
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/fachry-zella-devandra-WBDK76pCb9E-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/fachry-zella-devandra-bNSdIkCBJOs-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/pouria-oskuie-eWl-SZxpdP8-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/nikolai-chernichenko-wodKMXpXsMA-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/alexander-rotker-l8p1aWZqHvE-unsplash.jpg" alt="...">
                        </div>
                      </div>
                    </div>
                  </div>

                
                  <!-- Vendor : Embla Carousel -->
                  <link rel="stylesheet" href="../assets/vendors/vendor.embla.min.css">

                
                  <!-- Vendor : Embla Carousel -->
                  <script src="../assets/vendors/embla-carousel/embla-carousel.umd.js"></script>
                  <script src="../assets/vendors/vendor.embla.min.js"></script>

Embla Dots & Progress

Preview
HTML

Dot Navigation

Progress Bar

                
                  <!-- Dot Navigation -->
                  <div class="embla" data-embla='{
                        "slidesToScroll":   1,
                        "loop":             true, 
                        "dragFree":         false,
                        "autoPlay":         4000
                  }'>
                    <div class="embla__viewport">
                      <div class="embla__container">
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/fachry-zella-devandra-WBDK76pCb9E-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/fachry-zella-devandra-bNSdIkCBJOs-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/pouria-oskuie-eWl-SZxpdP8-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/nikolai-chernichenko-wodKMXpXsMA-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/alexander-rotker-l8p1aWZqHvE-unsplash.jpg" alt="...">
                        </div>
                      </div>
                    </div>

                    <!-- Dots -->
                    <div class="embla__dots"></div>
                    <script class="embla__dots_template" type="text/template">
                      <button class="embla__dot" type="button"></button>
                    </script>
                  </div>

                
                  <!-- Progress Bar -->
                  <div class="embla" data-embla='{
                        "slidesToScroll":   1,
                        "loop":             true, 
                        "dragFree":         false,
                        "autoPlay":         4000
                  }'>
                    <div class="embla__viewport">
                      <div class="embla__container">
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/fachry-zella-devandra-WBDK76pCb9E-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/fachry-zella-devandra-bNSdIkCBJOs-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/pouria-oskuie-eWl-SZxpdP8-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/nikolai-chernichenko-wodKMXpXsMA-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/alexander-rotker-l8p1aWZqHvE-unsplash.jpg" alt="...">
                        </div>
                      </div>
                    </div>

                    <!-- Progress -->
                    <div class="embla__progress">
                      <div class="embla__progress__bar"></div>
                    </div>
                  </div>

Embla Navigation

Preview
HTML

Always Visible

Autohide

                
                  <!-- Always Visible -->
                  <div class="embla" data-embla='{
                        "slidesToScroll":   1,
                        "loop":             true, 
                        "dragFree":         false,
                        "autoPlay":         4000
                  }'>
                    <div class="embla__viewport">
                      <div class="embla__container">
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/fachry-zella-devandra-WBDK76pCb9E-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/fachry-zella-devandra-bNSdIkCBJOs-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/pouria-oskuie-eWl-SZxpdP8-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/nikolai-chernichenko-wodKMXpXsMA-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/alexander-rotker-l8p1aWZqHvE-unsplash.jpg" alt="...">
                        </div>
                      </div>
                    </div>

                    <!-- Buttons -->
                    <button class="embla__button embla__button--prev embla__button--over" type="button" aria-label="Carousel Prev">
                      <svg class="text-white" stroke="#111111" fill="currentColor" width="30px" height="30px" viewBox="137.718 -1.001 366.563 643.999">
                        <path d="M428.36 12.5c16.67-16.67 43.76-16.67 60.42 0 16.67 16.67 16.67 43.76 0 60.42L241.7 320c148.25 148.24 230.61 230.6 247.08 247.08 16.67 16.66 16.67 43.75 0 60.42-16.67 16.66-43.76 16.67-60.42 0-27.72-27.71-249.45-249.37-277.16-277.08a42.308 42.308 0 0 1-12.48-30.34c0-11.1 4.1-22.05 12.48-30.42C206.63 234.23 400.64 40.21 428.36 12.5z"></path>
                      </svg>
                    </button>
                    <button class="embla__button embla__button--next embla__button--over" type="button" aria-label="Carousel Next">
                      <svg class="text-white" stroke="#111111" fill="currentColor" width="30px" height="30px" viewBox="0 0 238.003 238.003">
                        <path d="M181.776 107.719L78.705 4.648c-6.198-6.198-16.273-6.198-22.47 0s-6.198 16.273 0 22.47l91.883 91.883-91.883 91.883c-6.198 6.198-6.198 16.273 0 22.47s16.273 6.198 22.47 0l103.071-103.039a15.741 15.741 0 0 0 4.64-11.283c0-4.13-1.526-8.199-4.64-11.313z"></path>
                      </svg>
                    </button>
                  </div>

                
                  <!-- Autohide -->
                  <div class="embla" data-embla='{
                        "slidesToScroll":   1,
                        "loop":             true, 
                        "dragFree":         false,
                        "autoPlay":         4000
                  }'>
                    <div class="embla__viewport">
                      <div class="embla__container">
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/fachry-zella-devandra-WBDK76pCb9E-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/fachry-zella-devandra-bNSdIkCBJOs-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/pouria-oskuie-eWl-SZxpdP8-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/nikolai-chernichenko-wodKMXpXsMA-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/alexander-rotker-l8p1aWZqHvE-unsplash.jpg" alt="...">
                        </div>
                      </div>
                    </div>

                    <!-- Buttons -->
                    <button class="embla__button embla__button--prev embla__button--over embla__button--autohide" type="button" aria-label="Carousel Prev">
                      <svg class="text-white" stroke="#111111" fill="currentColor" width="30px" height="30px" viewBox="137.718 -1.001 366.563 643.999">
                        <path d="M428.36 12.5c16.67-16.67 43.76-16.67 60.42 0 16.67 16.67 16.67 43.76 0 60.42L241.7 320c148.25 148.24 230.61 230.6 247.08 247.08 16.67 16.66 16.67 43.75 0 60.42-16.67 16.66-43.76 16.67-60.42 0-27.72-27.71-249.45-249.37-277.16-277.08a42.308 42.308 0 0 1-12.48-30.34c0-11.1 4.1-22.05 12.48-30.42C206.63 234.23 400.64 40.21 428.36 12.5z"></path>
                      </svg>
                    </button>
                    <button class="embla__button embla__button--next embla__button--over embla__button--autohide" type="button" aria-label="Carousel Next">
                      <svg class="text-white" stroke="#111111" fill="currentColor" width="30px" height="30px" viewBox="0 0 238.003 238.003">
                        <path d="M181.776 107.719L78.705 4.648c-6.198-6.198-16.273-6.198-22.47 0s-6.198 16.273 0 22.47l91.883 91.883-91.883 91.883c-6.198 6.198-6.198 16.273 0 22.47s16.273 6.198 22.47 0l103.071-103.039a15.741 15.741 0 0 0 4.64-11.283c0-4.13-1.526-8.199-4.64-11.313z"></path>
                      </svg>
                    </button>
                  </div>

Embla Drag Free

Preview
HTML

                
                  <!-- Drag Free -->
                  <div class="embla" data-embla='{
                        "slidesToScroll":   1,
                        "loop":             true, 
                        "dragFree":         true,
                        "autoPlay":         4000
                  }'>
                    <div class="embla__viewport">
                      <div class="embla__container">
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/fachry-zella-devandra-WBDK76pCb9E-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/fachry-zella-devandra-bNSdIkCBJOs-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/pouria-oskuie-eWl-SZxpdP8-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/nikolai-chernichenko-wodKMXpXsMA-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/alexander-rotker-l8p1aWZqHvE-unsplash.jpg" alt="...">
                        </div>
                      </div>
                    </div>
                  </div>

                
                  <!-- Drag Free -->
                  <div class="embla" data-embla='{
                        "slidesToScroll":   1,
                        "loop":             true, 
                        "dragFree":         false,
                        "autoPlay":         4000
                  }'>
                    <div class="embla__viewport">
                      <div class="embla__container">
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" data-src="../demo.files/images/unsplash/product_sneakers/fachry-zella-devandra-WBDK76pCb9E-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" data-src="../demo.files/images/unsplash/product_sneakers/fachry-zella-devandra-bNSdIkCBJOs-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" data-src="../demo.files/images/unsplash/product_sneakers/pouria-oskuie-eWl-SZxpdP8-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" data-src="../demo.files/images/unsplash/product_sneakers/nikolai-chernichenko-wodKMXpXsMA-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" data-src="../demo.files/images/unsplash/product_sneakers/alexander-rotker-l8p1aWZqHvE-unsplash.jpg" alt="...">
                        </div>
                      </div>
                    </div>
                  </div>

Embla Thumbs

Preview
HTML

                
                  <!-- Main Carousel -->
                  <div class="embla" data-embla='{
                        "slidesToScroll":   1,
                        "loop":             true, 
                        "dragFree":         false,
                        "autoPlay":         4000,
                        "thumbCarouselId":  "embla-thumb-bottom"
                  }'>
                    <div class="embla__viewport">
                      <div class="embla__container">
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/fachry-zella-devandra-WBDK76pCb9E-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/fachry-zella-devandra-bNSdIkCBJOs-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/pouria-oskuie-eWl-SZxpdP8-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/nikolai-chernichenko-wodKMXpXsMA-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/alexander-rotker-l8p1aWZqHvE-unsplash.jpg" alt="...">
                        </div>
                      </div>
                    </div>
                  </div>


                  <!-- Thumb Carousel -->
                  <div id="embla-thumb-bottom" class="embla embla--thumb mt-1">
                    <div class="embla__viewport">

                      <div class="embla__container embla__container--thumb">
                        <div class="embla__slide embla__slide--thumb">
                          <button class="embla__slide__inner--thumb" type="button">
                            <img class="embla__slide__thumbnail" src="../demo.files/images/unsplash/product_sneakers/thumb/fachry-zella-devandra-WBDK76pCb9E-unsplash.jpg" alt="...">
                          </button>
                        </div>
                        <div class="embla__slide embla__slide--thumb">
                          <button class="embla__slide__inner--thumb" type="button">
                            <img class="embla__slide__thumbnail" src="../demo.files/images/unsplash/product_sneakers/thumb/fachry-zella-devandra-bNSdIkCBJOs-unsplash.jpg" alt="...">
                          </button>
                        </div>
                        <div class="embla__slide embla__slide--thumb">
                          <button class="embla__slide__inner--thumb" type="button">
                            <img class="embla__slide__thumbnail" src="../demo.files/images/unsplash/product_sneakers/thumb/pouria-oskuie-eWl-SZxpdP8-unsplash.jpg" alt="...">
                          </button>
                        </div>
                        <div class="embla__slide embla__slide--thumb">
                          <button class="embla__slide__inner--thumb" type="button">
                            <img class="embla__slide__thumbnail" src="../demo.files/images/unsplash/product_sneakers/thumb/nikolai-chernichenko-wodKMXpXsMA-unsplash.jpg" alt="...">
                          </button>
                        </div>
                        <div class="embla__slide embla__slide--thumb">
                          <button class="embla__slide__inner--thumb" type="button">
                            <img class="embla__slide__thumbnail" src="../demo.files/images/unsplash/product_sneakers/thumb/alexander-rotker-l8p1aWZqHvE-unsplash.jpg" alt="...">
                          </button>
                        </div>
                      </div>

                    </div>
                  </div>

Embla Y-Axis

Preview
HTML

                
                  <!-- Y Axis -->
                  <div class="embla" data-embla='{
                        "slidesToScroll":   1,
                        "loop":             false, 
                        "axis":             "y",
                        "autoPlay":         4000
                  }'>
                    <div class="embla__viewport">
                      <div class="embla__container flex-column" style="height:500px">
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/fachry-zella-devandra-WBDK76pCb9E-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/fachry-zella-devandra-bNSdIkCBJOs-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/pouria-oskuie-eWl-SZxpdP8-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/nikolai-chernichenko-wodKMXpXsMA-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide d-flex justify-content-center">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/alexander-rotker-l8p1aWZqHvE-unsplash.jpg" alt="...">
                        </div>
                      </div>
                    </div>
                  </div>

Embla Full Viewport

Preview
HTML

Embla Carousel

The most fluid carousel & unmatched swipe precision.

Embla Carousel

The most fluid carousel & unmatched swipe precision.

Embla Carousel

The most fluid carousel & unmatched swipe precision.

$45 Limited Offer

Full Link

The most fluid carousel & unmatched swipe precision.

                  
                    <!-- Full Viewport -->
                    <div class="embla" data-embla='{
                          "slidesToScroll":   1,
                          "loop":             true,
                          "dragFree":         false,
                          "autoPlay":         4000
                    }'>
                      <div class="embla__viewport">
                        <div class="embla__container vh-100"><!-- vh-100, vh-75, vh-50, vh-25 -->
                          
                          <div class="embla__slide d-flex flex-column align-items-center justify-content-start overlay-dark overlay-opacity-25 text-white w-100 h-100 px-5 py-7 bg-cover" style="background-image: url(../demo.files/images/unsplash/product_sneakers/fachry-zella-devandra-WBDK76pCb9E-unsplash.jpg)">
                            <h1 class="display-3 fw-bold">Embla Carousel</h1>
                            <p class="lead">The most fluid carousel & unmatched <span class="text-warning">swipe precision</span>.</p>
                          </div>

                          <div class="embla__slide d-flex flex-column align-items-center justify-content-end overlay-dark overlay-opacity-25 text-white w-100 h-100 px-5 py-7 bg-cover" style="background-image: url(../demo.files/images/unsplash/product_sneakers/fachry-zella-devandra-bNSdIkCBJOs-unsplash.jpg)">
                            <h2 class="display-3 fw-bold">Embla Carousel</h2>
                            <p class="lead">The most fluid carousel & unmatched <span class="text-warning">swipe precision</span>.</p>
                          </div>

                          <div class="embla__slide d-flex flex-column align-items-center justify-content-center overlay-dark overlay-opacity-25 text-white w-100 h-100 px-5 py-7 bg-cover" style="background-image: url(../demo.files/images/unsplash/product_sneakers/pouria-oskuie-eWl-SZxpdP8-unsplash.jpg)">
                            <h2 class="display-3 fw-bold">Embla Carousel</h2>
                            <p class="lead">The most fluid carousel & unmatched <span class="text-warning">swipe precision</span>.</p>
                            <a href="#!" class="btn btn-warning">$45 Limited Offer</a>
                          </div>

                          <a href="#!" class="embla__slide d-flex flex-column align-items-center justify-content-start overlay-dark overlay-opacity-25 text-white w-100 h-100 px-5 py-7 bg-cover" style="background-image: url(../demo.files/images/unsplash/product_sneakers/alexander-rotker-l8p1aWZqHvE-unsplash.jpg)">
                            <h2 class="display-3 fw-bold">Full Link</h2>
                            <p class="lead">The most fluid carousel & unmatched <span class="text-warning">swipe precision</span>.</p>
                          </a>

                        </div>
                      </div>

                      <!-- Buttons -->
                      <button class="embla__button embla__button--prev embla__button--over embla__button--autohide" type="button" aria-label="Carousel Prev">
                        <svg class="text-white" stroke="#111111" fill="currentColor" width="30px" height="30px" viewBox="137.718 -1.001 366.563 643.999">
                          <path d="M428.36 12.5c16.67-16.67 43.76-16.67 60.42 0 16.67 16.67 16.67 43.76 0 60.42L241.7 320c148.25 148.24 230.61 230.6 247.08 247.08 16.67 16.66 16.67 43.75 0 60.42-16.67 16.66-43.76 16.67-60.42 0-27.72-27.71-249.45-249.37-277.16-277.08a42.308 42.308 0 0 1-12.48-30.34c0-11.1 4.1-22.05 12.48-30.42C206.63 234.23 400.64 40.21 428.36 12.5z"></path>
                        </svg>
                      </button>
                      <button class="embla__button embla__button--next embla__button--over embla__button--autohide" type="button" aria-label="Carousel Next">
                        <svg class="text-white" stroke="#111111" fill="currentColor" width="30px" height="30px" viewBox="0 0 238.003 238.003">
                          <path d="M181.776 107.719L78.705 4.648c-6.198-6.198-16.273-6.198-22.47 0s-6.198 16.273 0 22.47l91.883 91.883-91.883 91.883c-6.198 6.198-6.198 16.273 0 22.47s16.273 6.198 22.47 0l103.071-103.039a15.741 15.741 0 0 0 4.64-11.283c0-4.13-1.526-8.199-4.64-11.313z"></path>
                        </svg>
                      </button>
                    </div>

Embla Grid

Preview
HTML

                
                  <!-- Embla : Grid -->
                  <div class="embla" data-embla='{
                        "loop":             true,
                        "dragFree":         true,
                        "autoPlay":         4000,
                        "align":            "start"
                  }'>

                    <div class="embla__viewport">
                      <div class="embla__container">
                        <div class="embla__slide py-2 d-flex justify-content-center col col-4 col-sm-3 col-lg-2">
                          <img class="img-fluid max-w-50" src="../demo.files/svg/brands/amazon.svg" alt="...">
                        </div>
                        <div class="embla__slide py-2 d-flex justify-content-center col col-4 col-sm-3 col-lg-2">
                          <img class="img-fluid max-w-50" src="../demo.files/svg/brands/fitbit.svg" alt="...">
                        </div>
                        <div class="embla__slide py-2 d-flex justify-content-center col col-4 col-sm-3 col-lg-2">
                          <img class="img-fluid max-w-50" src="../demo.files/svg/brands/hubspot.svg" alt="...">
                        </div>
                        <div class="embla__slide py-2 d-flex justify-content-center col col-4 col-sm-3 col-lg-2">
                          <img class="img-fluid max-w-50" src="../demo.files/svg/brands/layar.svg" alt="...">
                        </div>
                        <div class="embla__slide py-2 d-flex justify-content-center col col-4 col-sm-3 col-lg-2">
                          <img class="img-fluid max-w-50" src="../demo.files/svg/brands/slack.svg" alt="...">
                        </div>
                        <div class="embla__slide py-2 d-flex justify-content-center col col-4 col-sm-3 col-lg-2">
                          <img class="img-fluid max-w-50" src="../demo.files/svg/brands/weebly.svg" alt="...">
                        </div>
                        <div class="embla__slide py-2 d-flex justify-content-center col col-4 col-sm-3 col-lg-2">
                          <img class="img-fluid max-w-50" src="../demo.files/svg/brands/kaplan.svg" alt="...">
                        </div>
                        <div class="embla__slide py-2 d-flex justify-content-center col col-4 col-sm-3 col-lg-2">
                          <img class="img-fluid max-w-50" src="../demo.files/svg/brands/airbnb.svg" alt="...">
                        </div>
                      </div>
                    </div>
                  
                  </div>

Embla Grid

Preview
HTML

                
                  <!-- Embla : Grid -->
                  <div class="embla" data-embla='{
                        "slidesToScroll":   1,
                        "loop":             true,
                        "dragFree":         true,
                        "autoPlay":         0,
                        "containScroll":    "keepSnaps",
                        "align":            "start"
                  }'>

                    <div class="embla__viewport">
                      <div class="embla__container row g-2">
                        <div class="embla__slide py-2 col col-12 col-sm-4 col-lg-4">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/fachry-zella-devandra-WBDK76pCb9E-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide py-2 col col-12 col-sm-4 col-lg-4">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/fachry-zella-devandra-bNSdIkCBJOs-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide py-2 col col-12 col-sm-4 col-lg-4">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/nikolai-chernichenko-wodKMXpXsMA-unsplash.jpg" alt="...">
                        </div>
                        <div class="embla__slide py-2 col col-12 col-sm-4 col-lg-4">
                          <img class="img-fluid" src="../demo.files/images/unsplash/product_sneakers/alexander-rotker-l8p1aWZqHvE-unsplash.jpg" alt="...">
                        </div>
                      </div>
                    </div>

                  </div>