ID17 - Logo Carousel - Xtra Small 8x
- Select the Carousels Group
- Select Logo Carousel
- Create a data source within a page or globally based on your requirements.
- Select the variant - Offset Outer 1x10x1 Xtra Small 10 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 offset-outer-10-xs">
<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="xs" data-slider-loop="1" data-slide-count="8" 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: 8140px;
transform: translate3d(-1980px, 0px, 0px);
transition: transform 1500ms;
">
<div class="slick-slide slick-cloned" data-slick-index="-10" role="group" aria-label="slide 23" id="" aria-hidden="true" style="width: 110px">
<div>
<div class="image-wrapper" style="width: 100%; display: inline-block">
<img src="/components/-/media/feature/gpn/enterprise-components/logos/x-small/payment-method-72x48girocard.svg?rev=cc4e1ac6cf224d1491bc506c4e68eea6" alt="" loading="lazy" />
</div>
</div>
</div>
<div class="slick-slide slick-cloned" data-slick-index="-9" role="group" aria-label="slide 24" id="" aria-hidden="true" style="width: 110px">
<div>
<div class="image-wrapper" style="width: 100%; display: inline-block">
<img src="/components/-/media/feature/gpn/enterprise-components/logos/x-small/payment-method-72x48gpay.svg?rev=88634f7a4b3244e588f004d418f86b21" alt="" loading="lazy" />
</div>
</div>
</div>
<div class="slick-slide slick-cloned" data-slick-index="-8" role="group" aria-label="slide 25" id="" aria-hidden="true" style="width: 110px">
<div>
<div class="image-wrapper" style="width: 100%; display: inline-block">
<img src="/components/-/media/feature/gpn/enterprise-components/logos/x-small/payment-method-72x48amazon.svg?rev=61f94b8327c644298b2e2eaad163eccc" alt="" loading="lazy" />
</div>
</div>
</div>
<div class="slick-slide slick-cloned" data-slick-index="-7" role="group" aria-label="slide 26" id="" aria-hidden="true" style="width: 110px">
<div>
<div class="image-wrapper" style="width: 100%; display: inline-block">
<img src="/components/-/media/feature/gpn/enterprise-components/logos/x-small/payment-method-72x48american-express.svg?rev=99dbe5010f0f46acaf449736ab7760e6" alt="" loading="lazy" />
</div>
</div>
</div>
<div class="slick-slide slick-cloned" data-slick-index="-6" role="group" aria-label="slide 27" id="" aria-hidden="true" style="width: 110px">
<div>
<div class="image-wrapper" style="width: 100%; display: inline-block">
<img src="/components/-/media/feature/gpn/enterprise-components/logos/x-small/payment-method-72x48applepay.svg?rev=579748dfe00942208519180914689435" alt="" loading="lazy" />
</div>
</div>
</div>
<div class="slick-slide slick-cloned" data-slick-index="-5" role="group" aria-label="slide 28" id="" aria-hidden="true" style="width: 110px">
<div>
<div class="image-wrapper" style="width: 100%; display: inline-block">
<img src="/components/-/media/feature/gpn/enterprise-components/logos/x-small/payment-method-72x48blue-circle.svg?rev=e1e8288e0bd840c7bf5fc45ae725cc20" alt="" loading="lazy" />
</div>
</div>
</div>
<div class="slick-slide slick-cloned" data-slick-index="-4" role="group" aria-label="slide 29" id="" aria-hidden="true" style="width: 110px">
<div>
<div class="image-wrapper" style="width: 100%; display: inline-block">
<img src="/components/-/media/feature/gpn/enterprise-components/logos/x-small/payment-method-72x48discover.svg?rev=4eb7a5762e0640e5a5730939eb5b7e70" alt="" loading="lazy" />
</div>
</div>
</div>
<div class="slick-slide slick-cloned" data-slick-index="-3" role="group" aria-label="slide 30" id="" aria-hidden="true" style="width: 110px">
<div>
<div class="image-wrapper" style="width: 100%; display: inline-block">
<img src="/components/-/media/feature/gpn/enterprise-components/logos/x-small/payment-method-72x48ec.svg?rev=b23d029d85e745beaeafe082abf9fcf8" alt="" loading="lazy" />
</div>
</div>
</div>
<div class="slick-slide slick-cloned" data-slick-index="-2" role="group" aria-label="slide 31" id="" aria-hidden="true" style="width: 110px">
<div>
<div class="image-wrapper" style="width: 100%; display: inline-block">
<img src="/components/-/media/feature/gpn/enterprise-components/logos/x-small/payment-method-72x48girocard.svg?rev=cc4e1ac6cf224d1491bc506c4e68eea6" alt="" loading="lazy" />
</div>
</div>
</div>
<div class="slick-slide slick-cloned" data-slick-index="-1" role="group" aria-label="slide 32" id="" aria-hidden="true" style="width: 110px">
<div>
<div class="image-wrapper" style="width: 100%; display: inline-block">
<img src="/components/-/media/feature/gpn/enterprise-components/logos/x-small/payment-method-72x48gpay.svg?rev=88634f7a4b3244e588f004d418f86b21" 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>