4 items - Voir le template
En ce moment chez Kia
<?php $blockId = random_int(0, 100); ?>
<div class="news-slider-block"
x-data="initNewsSliderBlock_<?= $blockId ?>()"
@resize.window="resize()"
>
<div class="container-cms py-12 md:py-[70px]">
<div class="flex gap-2.5 items-center justify-between mb-12">
<h2 class="font-bold text-3xl md:text-4.5xl tracking-tightened">En ce moment chez Kia</h2>
<div class="flex md:gap-3 shrink-0" x-show="nbSlides > 1" x-cloak>
<button class="link py-5 px-2.5 md:px-5 text-opacity-70 text-text-light hover:text-secondary" @click="prev()" title="Précédent"><?= icon('chevron-left', 'w-2'); ?></button>
<button class="link py-5 px-2.5 md:px-5 text-opacity-70 text-text-light hover:text-secondary" @click="next()" title="Suivant"><?= icon('chevron-left', 'w-2 -scale-x-100'); ?></button>
</div>
</div>
<div class="overflow-auto scroll-smooth hide-scrollbar" @scroll="scroll()" x-ref="slider">
<div class="flex gap-2 md:gap-12 snap-x" x-ref="wrapper">
<div class="slider-item gap-2 md:gap-12 flex shrink-0 md:grid md:grid-cols-2"
:class="{
'md:w-[calc(50%_-_24px)]' : nbSlides > 1,
'md:w-full' : nbSlides === 1
}"
>
<div class="slider-item-news shrink-0 w-[19.125rem] md:w-auto">
<?php include renderTemplate('cms/news-slider-block/news-slider-block-item'); ?>
</div>
<div class="slider-item-news shrink-0 w-[19.125rem] md:w-auto">
<?php include renderTemplate('cms/news-slider-block/news-slider-block-item'); ?>
</div>
</div>
<div class="slider-item gap-2 md:gap-12 flex shrink-0 md:grid md:grid-cols-2"
:class="{
'md:w-[calc(50%_-_24px)]' : nbSlides > 1,
'md:w-full' : nbSlides === 1
}"
>
<div class="slider-item-news shrink-0 w-[19.125rem] md:w-auto">
<?php include renderTemplate('cms/news-slider-block/news-slider-block-item'); ?>
</div>
<div class="slider-item-news shrink-0 w-[19.125rem] md:w-auto">
<?php include renderTemplate('cms/news-slider-block/news-slider-block-item'); ?>
</div>
</div>
</div>
</div>
<div x-ref="thumbnails" class="pt-12" x-show="nbSlides > 1" x-cloak>
<div class="hidden md:flex gap-2">
<button class="w-3.75 h-3.75 rounded-full"
@click="setActive(0)"
:class="{
'bg-primary-accent' : current === 0,
'bg-ui' : current !== 0
}"
></button>
<button class="w-3.75 h-3.75 rounded-full"
@click="setActive(1)"
:class="{
'bg-primary-accent' : current === 1,
'bg-ui' : current !== 1
}"
></button>
</div>
<div class="flex md:hidden gap-2">
<button class="w-3.75 h-3.75 rounded-full"
@click="setActive(0)"
:class="{
'bg-primary-accent' : current === 0,
'bg-ui' : current !== 0
}"
></button>
<button class="w-3.75 h-3.75 rounded-full"
@click="setActive(1)"
:class="{
'bg-primary-accent' : current === 1,
'bg-ui' : current !== 1
}"
></button>
<button class="w-3.75 h-3.75 rounded-full"
@click="setActive(2)"
:class="{
'bg-primary-accent' : current === 2,
'bg-ui' : current !== 2
}"
></button>
<button class="w-3.75 h-3.75 rounded-full"
@click="setActive(3)"
:class="{
'bg-primary-accent' : current === 3,
'bg-ui' : current !== 3
}"
></button>
</div>
</div>
</div>
<script>
function initNewsSliderBlock_<?= $blockId ?>() {
return {
current: 0,
isMobile: window.innerWidth < 768,
items: null,
itemsNewsWidth: 0,
nbSlides: 0,
init() {
if(this.isMobile) {
this.initMobile();
} else {
this.initDesktop();
}
},
resize() {
this.isMobile = window.innerWidth < 768;
this.init();
},
prev() {
if(this.current > 0) {
this.current = this.current - 1;
this.$refs.slider.scrollLeft = this.itemsNewsWidth * this.current;
}
},
next() {
if(this.current < this.nbSlides) {
this.current = this.current + 1;
this.$refs.slider.scrollLeft = this.itemsNewsWidth * this.current;
}
},
initMobile() {
this.items = this.$refs.wrapper.querySelectorAll('.slider-item-news');
this.nbSlides = this.items.length;
this.itemsNewsWidth = this.$refs.wrapper.querySelector('.slider-item-news').offsetWidth + 8;
},
initDesktop() {
this.items = this.$refs.wrapper.querySelectorAll('.slider-item');
this.nbSlides = this.items.length;
this.$refs.wrapper.style.width = 'calc(' + this.nbSlides * 100 + '% + ' + (48 * (this.nbSlides - 1)) + 'px)';
this.$nextTick(()=>{
this.itemsNewsWidth = this.items[0].offsetWidth + 48;
})
},
scroll() {
this.current = Math.round(this.$event.target.scrollLeft / this.itemsNewsWidth)
},
setActive(newCurrent) {
this.current = newCurrent;
this.$refs.slider.scrollLeft = this.itemsNewsWidth * this.current;
}
}
}
</script>
</div>
3 items - Voir le template
En ce moment chez Kia
<?php $blockId = random_int(0, 100); ?>
<div class="news-slider-block"
x-data="initNewsSliderBlock_<?= $blockId ?>()"
@resize.window="resize()"
>
<div class="container-cms py-12 md:py-[70px]">
<div class="flex gap-2.5 items-center justify-between mb-12">
<h2 class="font-bold text-3xl md:text-4.5xl tracking-tightened">En ce moment chez Kia</h2>
<div class="flex md:gap-3 shrink-0" x-show="nbSlides > 1" x-cloak>
<button class="link py-5 px-2.5 md:px-5 text-opacity-70 text-text-light hover:text-secondary" @click="prev()" title="Précédent"><?= icon('chevron-left', 'w-2'); ?></button>
<button class="link py-5 px-2.5 md:px-5 text-opacity-70 text-text-light hover:text-secondary" @click="next()" title="Suivant"><?= icon('chevron-left', 'w-2 -scale-x-100'); ?></button>
</div>
</div>
<div class="overflow-auto scroll-smooth hide-scrollbar" @scroll="scroll()" x-ref="slider">
<div class="flex gap-2 md:gap-12 snap-x" x-ref="wrapper">
<div class="slider-item gap-2 md:gap-12 flex shrink-0 md:grid md:grid-cols-2"
:class="{
'md:w-[calc(50%_-_24px)]' : nbSlides > 1,
'md:w-full' : nbSlides === 1
}"
>
<div class="slider-item-news shrink-0 w-[19.125rem] md:w-auto">
<?php include renderTemplate('cms/news-slider-block/news-slider-block-item'); ?>
</div>
<div class="slider-item-news shrink-0 w-[19.125rem] md:w-auto">
<?php include renderTemplate('cms/news-slider-block/news-slider-block-item'); ?>
</div>
</div>
<div class="slider-item gap-2 md:gap-12 flex shrink-0 md:grid md:grid-cols-1"
:class="{
'md:w-[calc(50%_-_24px)]' : nbSlides > 1,
'md:w-full' : nbSlides === 1
}"
>
<div class="slider-item-news shrink-0 w-[19.125rem] md:w-auto">
<?php include renderTemplate('cms/news-slider-block/news-slider-block-item'); ?>
</div>
</div>
</div>
</div>
<div x-ref="thumbnails" class="pt-12" x-show="nbSlides > 1" x-cloak>
<div class="hidden md:flex gap-2">
<button class="w-3.75 h-3.75 rounded-full"
@click="setActive(0)"
:class="{
'bg-primary-accent' : current === 0,
'bg-ui' : current !== 0
}"
></button>
<button class="w-3.75 h-3.75 rounded-full"
@click="setActive(1)"
:class="{
'bg-primary-accent' : current === 1,
'bg-ui' : current !== 1
}"
></button>
</div>
<div class="flex md:hidden gap-2">
<button class="w-3.75 h-3.75 rounded-full"
@click="setActive(0)"
:class="{
'bg-primary-accent' : current === 0,
'bg-ui' : current !== 0
}"
></button>
<button class="w-3.75 h-3.75 rounded-full"
@click="setActive(1)"
:class="{
'bg-primary-accent' : current === 1,
'bg-ui' : current !== 1
}"
></button>
<button class="w-3.75 h-3.75 rounded-full"
@click="setActive(2)"
:class="{
'bg-primary-accent' : current === 2,
'bg-ui' : current !== 2
}"
></button>
</div>
</div>
</div>
<script>
function initNewsSliderBlock_<?= $blockId ?>() {
return {
current: 0,
isMobile: window.innerWidth < 768,
items: null,
itemsNewsWidth: 0,
nbSlides: 0,
init() {
if(this.isMobile) {
this.initMobile();
} else {
this.initDesktop();
}
},
resize() {
this.isMobile = window.innerWidth < 768;
this.init();
},
prev() {
if(this.current > 0) {
this.current = this.current - 1;
this.$refs.slider.scrollLeft = this.itemsNewsWidth * this.current;
}
},
next() {
if(this.current < this.nbSlides) {
this.current = this.current + 1;
this.$refs.slider.scrollLeft = this.itemsNewsWidth * this.current;
}
},
initMobile() {
this.items = this.$refs.wrapper.querySelectorAll('.slider-item-news');
this.nbSlides = this.items.length;
this.itemsNewsWidth = this.$refs.wrapper.querySelector('.slider-item-news').offsetWidth + 8;
},
initDesktop() {
this.items = this.$refs.wrapper.querySelectorAll('.slider-item');
this.nbSlides = this.items.length;
this.$refs.wrapper.style.width = 'calc(' + this.nbSlides * 100 + '% + ' + (48 * (this.nbSlides - 1)) + 'px)';
this.$nextTick(()=>{
this.itemsNewsWidth = this.items[0].offsetWidth + 48;
})
},
scroll() {
this.current = Math.round(this.$event.target.scrollLeft / this.itemsNewsWidth)
},
setActive(newCurrent) {
this.current = newCurrent;
this.$refs.slider.scrollLeft = this.itemsNewsWidth * this.current;
}
}
}
</script>
</div>
2 items - Voir le template
En ce moment chez Kia
<?php $blockId = random_int(0, 100); ?>
<div class="news-slider-block"
x-data="initNewsSliderBlock_<?= $blockId ?>()"
@resize.window="resize()"
>
<div class="container-cms py-12 md:py-[70px]">
<div class="flex gap-2.5 items-center justify-between mb-12">
<h2 class="font-bold text-3xl md:text-4.5xl tracking-tightened">En ce moment chez Kia</h2>
<div class="flex md:gap-3 shrink-0" x-show="nbSlides > 1" x-cloak>
<button class="link py-5 px-2.5 md:px-5 text-opacity-70 text-text-light hover:text-secondary" @click="prev()" title="Précédent"><?= icon('chevron-left', 'w-2'); ?></button>
<button class="link py-5 px-2.5 md:px-5 text-opacity-70 text-text-light hover:text-secondary" @click="next()" title="Suivant"><?= icon('chevron-left', 'w-2 -scale-x-100'); ?></button>
</div>
</div>
<div class="overflow-auto scroll-smooth hide-scrollbar" @scroll="scroll()" x-ref="slider">
<div class="flex gap-2 md:gap-12 snap-x" x-ref="wrapper">
<div class="slider-item gap-2 md:gap-12 flex shrink-0 md:grid md:grid-cols-2 md:w-[calc(50%_-_24px)]"
:class="{
'md:w-[calc(50%_-_24px)]' : nbSlides > 1,
'md:w-full' : nbSlides === 1
}"
>
<div class="slider-item-news shrink-0 w-[19.125rem] md:w-auto">
<?php include renderTemplate('cms/news-slider-block/news-slider-block-item'); ?>
</div>
<div class="slider-item-news shrink-0 w-[19.125rem] md:w-auto">
<?php include renderTemplate('cms/news-slider-block/news-slider-block-item'); ?>
</div>
</div>
</div>
</div>
<div x-ref="thumbnails" class="pt-12" x-show="nbSlides > 1" x-cloak>
<div class="hidden md:flex gap-2">
<button class="w-3.75 h-3.75 rounded-full"
@click="setActive(0)"
:class="{
'bg-primary-accent' : current === 0,
'bg-ui' : current !== 0
}"
></button>
</div>
<div class="flex md:hidden gap-2">
<button class="w-3.75 h-3.75 rounded-full"
@click="setActive(0)"
:class="{
'bg-primary-accent' : current === 0,
'bg-ui' : current !== 0
}"
></button>
<button class="w-3.75 h-3.75 rounded-full"
@click="setActive(1)"
:class="{
'bg-primary-accent' : current === 1,
'bg-ui' : current !== 1
}"
></button>
</div>
</div>
</div>
<script>
function initNewsSliderBlock_<?= $blockId ?>() {
return {
current: 0,
isMobile: window.innerWidth < 768,
items: null,
itemsNewsWidth: 0,
nbSlides: 0,
init() {
if(this.isMobile) {
this.initMobile();
} else {
this.initDesktop();
}
},
resize() {
this.isMobile = window.innerWidth < 768;
this.init();
},
prev() {
if(this.current > 0) {
this.current = this.current - 1;
this.$refs.slider.scrollLeft = this.itemsNewsWidth * this.current;
}
},
next() {
if(this.current < this.nbSlides) {
this.current = this.current + 1;
this.$refs.slider.scrollLeft = this.itemsNewsWidth * this.current;
}
},
initMobile() {
this.items = this.$refs.wrapper.querySelectorAll('.slider-item-news');
this.nbSlides = this.items.length;
this.itemsNewsWidth = this.$refs.wrapper.querySelector('.slider-item-news').offsetWidth + 8;
},
initDesktop() {
this.items = this.$refs.wrapper.querySelectorAll('.slider-item');
this.nbSlides = this.items.length;
if(this.nbSlides > 1) {
this.$refs.wrapper.style.width = 'calc(' + this.nbSlides * 100 + '% + ' + (48 * (this.nbSlides - 1)) + 'px)';
}
this.$nextTick(()=>{
this.itemsNewsWidth = this.items[0].offsetWidth + 48;
})
},
scroll() {
this.current = Math.round(this.$event.target.scrollLeft / this.itemsNewsWidth)
},
setActive(newCurrent) {
this.current = newCurrent;
this.$refs.slider.scrollLeft = this.itemsNewsWidth * this.current;
}
}
}
</script>
</div>
1 item - Voir le template
En ce moment chez Kia
<?php $blockId = random_int(0, 100); ?>
<div class="news-slider-block"
x-data="initNewsSliderBlock_<?= $blockId ?>()"
@resize.window="resize()"
>
<div class="container-cms py-12 md:py-[70px]">
<div class="flex gap-2.5 items-center justify-between mb-12">
<h2 class="font-bold text-3xl md:text-4.5xl tracking-tightened">En ce moment chez Kia</h2>
<div class="flex md:gap-3 shrink-0" x-show="nbSlides > 1" x-cloak>
<button class="link py-5 px-2.5 md:px-5 text-opacity-70 text-text-light hover:text-secondary" @click="prev()" title="Précédent"><?= icon('chevron-left', 'w-2'); ?></button>
<button class="link py-5 px-2.5 md:px-5 text-opacity-70 text-text-light hover:text-secondary" @click="next()" title="Suivant"><?= icon('chevron-left', 'w-2 -scale-x-100'); ?></button>
</div>
</div>
<div class="overflow-auto scroll-smooth hide-scrollbar" @scroll="scroll()" x-ref="slider">
<div class="flex gap-2 md:gap-12 snap-x" x-ref="wrapper">
<div class="slider-item gap-2 md:gap-12 flex shrink-0 md:grid md:grid-cols-1"
:class="{
'md:w-[calc(50%_-_24px)]' : nbSlides > 1,
'md:w-full' : nbSlides === 1
}"
>
<div class="slider-item-news shrink-0 w-[19.125rem] md:w-auto">
<?php include renderTemplate('cms/news-slider-block/news-slider-block-item'); ?>
</div>
</div>
</div>
</div>
<div x-ref="thumbnails" class="pt-12" x-show="nbSlides > 1" x-cloak>
<div class="hidden md:flex gap-2">
<button class="w-3.75 h-3.75 rounded-full"
@click="setActive(0)"
:class="{
'bg-primary-accent' : current === 0,
'bg-ui' : current !== 0
}"
></button>
</div>
<div class="flex md:hidden gap-2">
<button class="w-3.75 h-3.75 rounded-full"
@click="setActive(0)"
:class="{
'bg-primary-accent' : current === 0,
'bg-ui' : current !== 0
}"
></button>
</div>
</div>
</div>
<script>
function initNewsSliderBlock_<?= $blockId ?>() {
return {
current: 0,
isMobile: window.innerWidth < 768,
items: null,
itemsNewsWidth: 0,
nbSlides: 0,
init() {
if(this.isMobile) {
this.initMobile();
} else {
this.initDesktop();
}
},
resize() {
this.isMobile = window.innerWidth < 768;
this.init();
},
prev() {
if(this.current > 0) {
this.current = this.current - 1;
this.$refs.slider.scrollLeft = this.itemsNewsWidth * this.current;
}
},
next() {
if(this.current < this.nbSlides) {
this.current = this.current + 1;
this.$refs.slider.scrollLeft = this.itemsNewsWidth * this.current;
}
},
initMobile() {
this.items = this.$refs.wrapper.querySelectorAll('.slider-item-news');
this.nbSlides = this.items.length;
this.itemsNewsWidth = this.$refs.wrapper.querySelector('.slider-item-news').offsetWidth + 8;
},
initDesktop() {
this.items = this.$refs.wrapper.querySelectorAll('.slider-item');
this.nbSlides = this.items.length;
if(this.nbSlides > 1) {
this.$refs.wrapper.style.width = 'calc(' + this.nbSlides * 100 + '% + ' + (48 * (this.nbSlides - 1)) + 'px)';
}
this.$nextTick(()=>{
this.itemsNewsWidth = this.items[0].offsetWidth + 48;
})
},
scroll() {
this.current = Math.round(this.$event.target.scrollLeft / this.itemsNewsWidth)
},
setActive(newCurrent) {
this.current = newCurrent;
this.$refs.slider.scrollLeft = this.itemsNewsWidth * this.current;
}
}
}
</script>
</div>