logos-json

[
    {
        "key": "group_608ad931e6204",
        "title": "Liste logos",
        "fields": [
            {
                "key": "field_608ad9633d5fa",
                "label": "Logos",
                "name": "logo_repeater",
                "aria-label": "",
                "type": "repeater",
                "instructions": "",
                "required": 0,
                "conditional_logic": 0,
                "wrapper": {
                    "width": "",
                    "class": "",
                    "id": ""
                },
                "layout": "block",
                "pagination": 0,
                "min": 0,
                "max": 0,
                "collapsed": "field_608ad9743d5fb",
                "button_label": "Ajouter un élément",
                "rows_per_page": 20,
                "sub_fields": [
                    {
                        "key": "field_608ad9743d5fb",
                        "label": "Nom",
                        "name": "logo__name",
                        "aria-label": "",
                        "type": "text",
                        "instructions": "",
                        "required": 0,
                        "conditional_logic": 0,
                        "wrapper": {
                            "width": "33.33",
                            "class": "",
                            "id": ""
                        },
                        "default_value": "",
                        "maxlength": "",
                        "placeholder": "",
                        "prepend": "",
                        "append": "",
                        "parent_repeater": "field_608ad9633d5fa"
                    },
                    {
                        "key": "field_608ada6e3d5fd",
                        "label": "Lien externe",
                        "name": "logo__url",
                        "aria-label": "",
                        "type": "url",
                        "instructions": "",
                        "required": 0,
                        "conditional_logic": 0,
                        "wrapper": {
                            "width": "33.33",
                            "class": "",
                            "id": ""
                        },
                        "default_value": "",
                        "placeholder": "",
                        "parent_repeater": "field_608ad9633d5fa"
                    },
                    {
                        "key": "field_608ad9823d5fc",
                        "label": "Logo",
                        "name": "logo__img",
                        "aria-label": "",
                        "type": "image_aspect_ratio_crop",
                        "instructions": "La hauteur des logos est de 40pixels, exporter des images en 80px de hauteur\r\nDécouper les images sans espace autour du logo",
                        "required": 0,
                        "conditional_logic": 0,
                        "wrapper": {
                            "width": "33.33",
                            "class": "",
                            "id": ""
                        },
                        "crop_type": "free_crop",
                        "return_format": "array",
                        "preview_size": "thumbnail",
                        "library": "all",
                        "min_width": "",
                        "min_height": "",
                        "min_size": "",
                        "max_width": "",
                        "max_height": "",
                        "max_size": "",
                        "mime_types": "",
                        "parent_repeater": "field_608ad9633d5fa"
                    }
                ]
            }
        ],
        "location": [
            [
                {
                    "param": "page_template",
                    "operator": "==",
                    "value": "default"
                }
            ]
        ],
        "menu_order": 0,
        "position": "normal",
        "style": "default",
        "label_placement": "top",
        "instruction_placement": "label",
        "hide_on_screen": "",
        "active": false,
        "description": "",
        "show_in_rest": 0
    }
]

slider-logo

{% if repeater %}
	<div class="swiper-logo">
		<div class="swiper-wrapper">
			{% for slide in repeater %}
				{% for item in slide %}
					<div class="swiper-slide">
						<div class="card">
							{# logo_repeater #}
							{% set image = Image(item.logo__img) %}
							<a href="{{ item.logo__url }}"
								target="_blank"
								title="{{ item.logo__name }}">
								<img src="{{ image.src('logo') }}"
									alt="{{ item.logo__name }}"
									loading="lazy"
									class="swiper-lazy"
									width="{{ image.sizes.logo.width }}"
									height="{{ image.sizes.logo.height }}"
									srcset="{{ image.srcset }}"
									sizes="{{ image.img_sizes }}" />
							</a>
						</div>
					</div>
				{% endfor %}
			{% endfor %}
		</div>
	</div>
{% endif %}

slider-logo-css

.swiper-logo {
    position: relative;

    .swiper-wrapper{
        transition-timing-function : linear;
        align-items: center;
    } 

   &.justify-content-center{
        .swiper-wrapper{
            justify-content: center;
        }
    }

    .swiper-slide {
        width: auto;
        padding-left: rfs-value(20px);
        padding-right: rfs-value(20px);

        @include media-breakpoint-up(md) {
            // min-width: rfs-value(180px); 
            text-align: center;
            padding-left: rfs-value(50px);
            padding-right: rfs-value(50px);
        }

        img {
            max-width: 100%;
        }
    }
}

slider-logo-js

import Swiper, { Autoplay, FreeMode, Lazy, Keyboard, EffectFade, controller } from 'swiper';

Swiper.use([Autoplay, FreeMode, Lazy, Keyboard, EffectFade, controller]);


//---------------------------//
// slider logo
//---------------------------//


const sliderLogo = () => {
    const sliderLogo = document.querySelectorAll('.swiper-logo');

    if (sliderLogo) {

        sliderLogo.forEach(sliderLogo => {
            let sumSlideWidth = 0;
            const widthTotal = window.innerWidth;
            const slides = sliderLogo.querySelectorAll('.swiper-slide');
           
            slides.forEach(slide => {
                sumSlideWidth += slide.offsetWidth;
            })

            let loop = false;
            let autoplay = false;

            if( sumSlideWidth > widthTotal){
                loop = true;
                autoplay = {
                    delay: 0,
                    pauseOnMouseEnter: true,
                    disableOnInteraction: false,
                }
            }else{
                loop = false;
                sliderLogo.classList.add('justify-content-center')
            }

         
            new Swiper(sliderLogo, {
                // Optional parameters
                loop: loop,
                freeMode: {
                    enabled: true,
                    momentumBounce: false
                },
                grabCursor: true,
                slidesPerView: 'auto',
                centeredSlides: false,
                speed: 4000,
                autoplay: autoplay,
           })
        });
    }

}

export default sliderLogo;