Alokai•10mo ago

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•10mo ago

Hi @espoge 👋 , If you works, use it. 😄 I'll ask our experts on this what they think and get back to you.

jakfrs•10mo 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•10mo ago

ok thanks @jakfrs

Gaming

Programming

SfCarousel and bullet point