Control Slot Styling

[mpukit]

Is there a way to add a class to the controls slot (or even a div inside around the buttons) to help with styling and positioning the Slider Controls?

Default control slot:

<template slot="control">
   <button data-glide-dir="<">prev</button>
   <button data-glide-dir=">">next</button>
</template>

Rendered in the browser:

<div data-glide-el="controls">
   <button data-v-4483513f="" data-glide-dir="<">prev</button>
   <button data-v-4483513f="" data-glide-dir=">">next</button>
</div>

How can I do this?

<div class="slider__nav" data-glide-el="controls">
   <div class="slider__buttons">
      <button data-v-4483513f="" data-glide-dir="<">prev</button>
      <button data-v-4483513f="" data-glide-dir=">">next</button>
   </div>
</div>

[mpukit]

@antonreshetov if I manually add the <div class="slider__buttons"> inside the slider control - the controls no longer work...

<div data-glide-el="controls">
   <div class="slider__buttons">
      <button data-v-4483513f="" data-glide-dir="<">prev</button>
      <button data-v-4483513f="" data-glide-dir=">">next</button>
   </div>
</div>

Is there a better way to add classes to help with customizing the slider controls?

[matejtaborsky]

you can use attribute selector in css

div[data-glide-el="controls"] {
  ...
}

[tyler-morales]

I've tried the solution @matejtaborsky has suggested to no avail. Has @mpukit, @matejtaborsky or @antonreshetov been able to style the controls as a whole yet?

As you can see in the following screenshots, the styling is not rendered in the browser.

I write the styles:

div[data-glide-el='controls'] {
  border: 2px solid blue !important;
}

I see the correct data attribute in the dev tools

But then there is no styling is applied to the button container

[blowski]

I ran into this, and realised that it's easier to ignore the controls slot entirely, and do it manually instead. e.g.

<vue-glide v-model="active">
  <vue-glide-slide></vue-glide-slide>
  ...
</vue-glide>
<div><!-- this will fail if you do it in the slot -->
  <h1>Control the slider</h1>
  <div class="container">
    <button @click="active--">Previous</button>
    <button @click="active++">Next</button>
  </div>
</div>

[antonreshetov]

Since VueGlide is only a wrapper, it respects the behavior of the library itself. Control via arrows should be consistent with the documentation https://glidejs.com/docs/data-attributes.

But I will think about how to simplify the styling through the slot