ID17 - Logo Carousel - Small 6x


  • Select the Carousels Group
  • Select Logo Carousel component
  • Create a data source within a page or globally based on your requirements.
  • Select the variant - 12 Col Small 6 Images
  • Update the images one by one - Click on Image
  • Delete extra images if not required.
  • If Lazy loading is not required, select a component class Defer Loading
​​​​

Developer notes

 

<div class="component logo-carousel ">
  <div class="component-content">
    <div class="container">
      <div class="row">
        <div class="disable_wrap"></div>
        <div class="logo-carousel_container initialized slick-initialized slick-slider" data-slider-type="sm" data-slider-loop="1" data-slide-count="6" role="region" aria-label="carousel">
          <a class="link-arrow-primary-1 arrow-back d-none slick-arrow" aria-label="Previous" href="javascript:void(0)" style="display: inline;"></a>
          <div class="slick-list">
            <div class="slick-track" style="opacity: 1; width: 6600px; transform: translate3d(-3080px, 0px, 0px);">
              <div class="slick-slide slick-cloned" data-slick-index="21" role="group" aria-label="slide 10" id="" aria-hidden="true" style="width: 220px;">
                <div>
                  <div class="image-wrapper" style="width: 100%; display: inline-block;">
                    <img src="/buildguide/-/media/feature/gpn/enterprise-components/logos/small/id83---jcbjcb.svg?rev=1f40f88f72b84292bda4ec955afcf826" alt="" loading="lazy">
                  </div>
                </div>
              </div>
              <div class="slick-slide slick-cloned" data-slick-index="22" role="group" aria-label="slide 11" id="" aria-hidden="true" style="width: 220px;">
                <div>
                  <div class="image-wrapper" style="width: 100%; display: inline-block;">
                    <img src="/buildguide/-/media/feature/gpn/enterprise-components/logos/small/id83---google-paygpay.svg?rev=8e550ad915c2460db957c529d39b5a8e" alt="" loading="lazy">
                  </div>
                </div>
              </div>
              <div class="slick-slide slick-cloned" data-slick-index="23" role="group" aria-label="slide 12" id="" aria-hidden="true" style="width: 220px;">
                <div>
                  <div class="image-wrapper" style="width: 100%; display: inline-block;">
                    <img src="/buildguide/-/media/feature/gpn/enterprise-components/logos/small/id83---apple-payapple-pay.svg?rev=0bab8eb482f345e9a7b9c8cdfab38702" alt="" loading="lazy">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <a class="link-arrow-primary-1 arrow-next d-none slick-arrow" aria-label="Next" href="javascript:void(0)" style="display: inline;"></a>
        </div>
      </div>
    </div>
  </div>
</div>