A lot
<div x-data="initSwipeFilter()"
class="border-b border-ui py-3.25 relative">
<div x-ref="content" class="flex gap-2.5 overflow-hidden scroll-smooth">
<button data-key="0" class="btn btn-secondary-blue btn-size-sm whitespace-nowrap first:ml-5">
<span>Peugeot</span>
<?= icon('close', 'w-2.5'); ?>
</button>
<button data-key="1" class="btn btn-secondary-blue btn-size-sm whitespace-nowrap first:ml-5">
<span>20 000€ - 45 000€</span>
<?= icon('close', 'w-2.5'); ?>
</button>
<button data-key="2" class="btn btn-secondary-blue btn-size-sm whitespace-nowrap first:ml-5">
<span>Automatique</span>
<?= icon('close', 'w-2.5'); ?>
</button>
<button data-key="3" class="btn btn-secondary-blue btn-size-sm whitespace-nowrap first:ml-5">
<span>Essence</span>
<?= icon('close', 'w-2.5'); ?>
</button>
<button data-key="4" class="btn btn-secondary-blue btn-size-sm whitespace-nowrap first:ml-5">
<span>Critair 1</span>
<?= icon('close', 'w-2.5'); ?>
</button>
</div>
<div class="absolute right-0 top-1/2 -translate-y-1/2"
:class="{
'hidden' : maxScroll || !hasSwipe
}">
<button @click="swipeRight()" class="btn btn-nav-swipe btn-nav-swipe--blue shadow-swipe-button">
<span><?= icon('chevron-right', 'w-2'); ?></span>
</button>
</div>
<div class="absolute left-0 top-1/2 -translate-y-1/2 hidden"
:class="{
'hidden' : index < 1
}">
<button @click="swipeLeft()" class="btn btn-nav-swipe btn-nav-swipe--blue btn-nav-swipe--left shadow-swipe-button-left">
<span class="inline-block -scale-x-100"><?= icon('chevron-right', 'w-2'); ?></span>
</button>
</div>
</div>
<script>
function initSwipeFilter() {
return {
index: 0,
container: null,
items: [],
nbItems: 0,
maxScroll: false,
hasSwipe: false,
init() {
this.container = this.$refs.content;
this.items = this.$refs.content.querySelectorAll('button');
this.nbItems = this.items.length;
if(this.container.scrollWidth - this.container.clientWidth > 0) {
this.hasSwipe = true;
}
},
swipeRight() {
if(this.index < (this.nbItems - 1)) {
this.index += 1;
this.container.scrollLeft = this.items[this.index].offsetLeft - 50;
if(this.container.scrollWidth - this.container.clientWidth === this.container.scrollLeft) {
this.maxScroll = true;
}
}
},
swipeLeft() {
if(this.index > 0) {
this.maxScroll = false;
this.index -= 1;
this.container.scrollLeft = this.items[this.index].offsetLeft - 50;
}
}
}
}
</script>Two filters
<div x-data="initSwipeFilter()"
class="border-b border-ui py-3.25 relative">
<div x-ref="content" class="flex gap-2.5 overflow-hidden scroll-smooth">
<button data-key="0" class="btn btn-secondary-blue btn-size-sm whitespace-nowrap first:ml-5">
<span>Peugeot</span>
<?= icon('close', 'w-2.5'); ?>
</button>
<button data-key="1" class="btn btn-secondary-blue btn-size-sm whitespace-nowrap first:ml-5">
<span>20 000€ - 45 000€</span>
<?= icon('close', 'w-2.5'); ?>
</button>
</div>
<div class="absolute right-0 top-1/2 -translate-y-1/2"
:class="{
'hidden' : maxScroll || !hasSwipe
}">
<button @click="swipeRight()" class="btn btn-nav-swipe btn-nav-swipe--blue shadow-swipe-button">
<span><?= icon('chevron-right', 'w-2'); ?></span>
</button>
</div>
<div class="absolute left-0 top-1/2 -translate-y-1/2 hidden"
:class="{
'hidden' : index < 1
}">
<button @click="swipeLeft()" class="btn btn-nav-swipe btn-nav-swipe--blue btn-nav-swipe--left shadow-swipe-button-left">
<span class="inline-block -scale-x-100"><?= icon('chevron-right', 'w-2'); ?></span>
</button>
</div>
</div>
<script>
function initSwipeFilter() {
return {
index: 0,
container: null,
items: [],
nbItems: 0,
maxScroll: false,
hasSwipe: false,
init() {
this.container = this.$refs.content;
this.items = this.$refs.content.querySelectorAll('button');
this.nbItems = this.items.length;
if(this.container.scrollWidth - this.container.clientWidth > 0) {
this.hasSwipe = true;
}
},
swipeRight() {
if(this.index < (this.nbItems - 1)) {
this.index += 1;
this.container.scrollLeft = this.items[this.index].offsetLeft - 50;
if(this.container.scrollWidth - this.container.clientWidth === this.container.scrollLeft) {
this.maxScroll = true;
}
}
},
swipeLeft() {
if(this.index > 0) {
this.maxScroll = false;
this.index -= 1;
this.container.scrollLeft = this.items[this.index].offsetLeft - 50;
}
}
}
}
</script>