bullets slot or prop

[peppeg85]

hello i'm trying to add the bullets to my carousel, but nothing shows, i added :bullet="true" prop and inspecting the html there are the bullets, but nothing shows, any suggestions?

here is the html:

<vue-glide class=""
                 type="slider"
                 :rewind="true"
                 :rewind-duration="0"
                 :bound="false"
                 :autoplay="5000"
                 :animation-duration="3000"
                 :gap="10"
                 :per-view="1"
                 :bullet="true"
      >
        <vue-glide-slide v-for="(item,index) in items"
                         :key="index"
                         class="block relative py-16 w-full justify-center px-10"
        >
          <div class="w-full grid grid-cols-12">
            <div class="rounded-xl col-span-5">
              <div class="relative">
                <div class="pt-3">
                  <img
                      :src="item.image"
                      :alt="item.title"
                      class="object-cover h-77 rounded-xl z-10"
                  >
                </div>
              </div>
            </div>
            <div class="col-span-7 flex flex-col justify-between">
              <div class="text-left font-semibold text-3xl line-clamp-2">
                {{ item.title }}
              </div>
              <div class="text-left font-normal text-lg line-clamp-3">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
                printer took a
                galley of type
              </div>
            </div>
          </div>
        </vue-glide-slide>
      </vue-glide>

inside the html i have:

<div data-glide-el="controls[nav]" class="glide__bullets h-20">
<button data-glide-dir="=0" class="glide__bullet"></button>
<button data-glide-dir="=1" class="glide__bullet"></button>
<button data-glide-dir="=2" class="glide__bullet glide__bullet--active">
</button><button data-glide-dir="=3" class="glide__bullet"></button>
<button data-glide-dir="=4" class="glide__bullet"></button>
<button data-glide-dir="=5" class="glide__bullet"></button>
<button data-glide-dir="=6" class="glide__bullet"></button></div>

and the glide works, i can see the glidebullet glidebullet--active class switch between the bullets, i think is some css issue

the slide section is ok, just the bullets didn't show thanks for your help

[peppeg85]

i tried overwriting the glide classes, for example:

<style scoped>
.glide__bullets {
  background-color: #1d1d1d;
  height: 40px
}

.glide__bullet {
  background-color: red;
  height: 20px;
  width:20px;
  border-radius: 50%;
}

.glide__bullet--active {
  background-color: yellow;
}
</style>

but without success

[peppeg85]

i tried also with the slot control, as you say in the documentation:

   <template slot="control">
          <div class="flex inline-flex w-full justify-center bg-black">
            <button v-for="(el, index) in items" class="h-6 w-6 rounded-full bg-white" :data-glide-dir="'='+index">
            </button>
          </div>
        </template>

but i have this error in the console:

vue-glide.common.js:2209 Uncaught TypeError: Cannot read property 'slice' of null
    at Object.resolve (vue-glide.common.js:2209)
    at HTMLDivElement.click (vue-glide.common.js:3408)

[peppeg85]

sorry for all the posts, i solved in this way:

   <template slot="control">
          <button
              v-for="(el, index) in items"
              class="h-6 w-6 rounded-full"
              :class="active==index?'bg-red-600':'bg-gray-500'"
              :data-glide-dir="'='+index" :key="index"
          >
          </button>
        </template>

if it could help someone, but please, update the docs

[peppeg85]

hello, the items in the v-for are the same of the glide, so the index is the same, here is a sample code

<vue-glide class="" type="slider" :bound="false" :autoplay="2000" :

animation-duration="1000" :gap="10" :per-view="1" :bullet="false" v-model="active"> <vue-glide-slide v-for="(item,index) in items" :key="index" class="block relative py-16 w-full justify-center px-10">

</vue-glide-slide>
<template slot="control" class="py-2">
    <button v-for="(el, index) in items" class="h-1 w-6 rounded-full

mx-1" :class="active==index?'bg-red':'bg-green'" :data-glide-dir=" '='+index" :key="index">

data() { return { active: 0, items: [ { title: "Lorem ", description: "Lorem Ipsum ",

    },
    {
      title: "Lorem ",
      description: "Lorem Ipsum ",

    },
    {
      title: "Lorem ",
      description: "Lorem Ipsum ",

    },
    {
      title: "Lorem ",
      description: "Lorem Ipsum ",

    },
    {
      title: "Lorem ",
      description: "Lorem Ipsum ",

    },

  ],
}

},

Il giorno gio 11 ago 2022 alle ore 09:22 Edoardo Mazzon < @.***> ha scritto:

sorry for all the posts, i solved in this way:

if it could help someone, but please, update the docs

Hi, can I ask you how did you know which slide is active even in bullets? How did you pass the active variable from the slider to the dots?

— Reply to this email directly, view it on GitHub https://github.com/antonreshetov/vue-glide/issues/67#issuecomment-1211636247, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGCCEW6VTZ5HDNPBZHCZSODVYSS4DANCNFSM47BKTLIQ . You are receiving this because you authored the thread.Message ID: @.***>