A
Alokaiβ€’15mo ago
espoge

SfCarousel and bullet point

Hi folks, in my view I really need bullet point for carousel but SfCarousel dosen't support it. My solution it was clone componet (from node_module of course) and paste bullet navigation (as glide js documentation). In this way I going to import ever my custom carousel based on the original one.
<div class="sf-carousel__wrapper">
<div ref="glide" class="glide">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides sf-carousel__slides">
<slot />
</ul>
</div>
<!-- from glide documentation -->
<div class="glide__bullets bg-black" data-glide-el="controls[nav]">
<button class="glide__bullet" data-glide-dir="=0"></button>
<button class="glide__bullet" data-glide-dir="=1"></button>
<button class="glide__bullet" data-glide-dir="=2"></button>
</div>
<!----->

</div>
</div>
<div class="sf-carousel__wrapper">
<div ref="glide" class="glide">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides sf-carousel__slides">
<slot />
</ul>
</div>
<!-- from glide documentation -->
<div class="glide__bullets bg-black" data-glide-el="controls[nav]">
<button class="glide__bullet" data-glide-dir="=0"></button>
<button class="glide__bullet" data-glide-dir="=1"></button>
<button class="glide__bullet" data-glide-dir="=2"></button>
</div>
<!----->

</div>
</div>
Is it the best solution to have bullet point?
Thanks
3 Replies
rohrig
rohrigβ€’15mo ago
Hi @espoge πŸ‘‹ , If you works, use it. πŸ˜„ I'll ask our experts on this what they think and get back to you.
FRS
FRSβ€’15mo ago
Hey @espoge yes, that would be the most straightforward solution. Though if you've using yarn or pnpm I'd try to check out yarn patch (https://yarnpkg.com/cli/patch) or pnpm patch (https://pnpm.io/cli/patch) features that allow to to create "patches" for the files from the package (that way you'll get possibility to still upgrade the carousel component if it gets updated in the package). Also, I'd like to say that because of the issues with customizability like the one you've described we've created new version of StorefrontUI - SFUI2. In SFUI2 all of the components are fully customizable (like Scrollable https://docs.storefrontui.io/v2/vue/components/scrollable.html), their logic is extracted as a composables (like useScrollable https://docs.storefrontui.io/v2/vue/hooks/useScrollable.html) and advanced use-cases are published within our docs as code examples (aka blocks). I believe your case is handled by "Product Gallery with bullets" example here - https://docs.storefrontui.io/v2/vue/blocks/Gallery.html#product-gallery-with-bullets
espoge
espogeβ€’15mo ago
ok thanks @jakfrs
Want results from more Discord servers?
Add your server