the pagination bullet goes to the top of the card, i tried every style with !important also, but it seems to be overwritten.
any suggestion ?
hmm itâs not doing it for me. Could you check please?
- type: custom:swipe-card
view_layout:
grid-area: "r4"
start_card: 1
parameters:
grabCursor: true
centeredSlides: false
slidesPerView: '2.5'
spaceBetween: 12
followFinger: true
pagination:
type: bullets
color: white
#margin: 20px
card_mod:
style: |
.swiper-pagination {
#display: none;
right: 10% !important;
top: 90% !important;
}
cards:
Sam for me 
( .i think its css is hardcoded so deep that its impossible to overwrite it
- type: custom:swipe-card
parameters:
speed: 550
spaceBetween: 43
threshold: 5
pagination:
type: bullets
card_mod:
style: |
.swiper-pagination {
right: 10% !important;
top: 90% !important;
}
I tried all the tricks in css to overwrite this,
version 4.0 does the same
i also tried:
|
.swiper-container-horizontal > .swiper-pagination-fraction,
.swiper-container-horizontal > .swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
position: relative !important;
bottom: unset !important;
left: 0px !important;
width: 100% !important;
}
no luck
try a custom mod card
type: custom:mod-card
card_mod:
style:
swipe-card$: |
.swiper-wrapper {
padding-bottom: 1vw !important;
}
card:
type: custom:swipe-card
parameters:
grabCursor: true
centeredSlides: false
spaceBetween: 12
followFinger: true
pagination:
type: bullets
color: white
cards:
@VietNgoc would you mine helping me out ? i tried but it did not work:
- type: grid
title: Kids/Family
view_layout:
grid-area: studio
columns: 1
cards:
- type: custom:mod-card
card_mod:
style:
swipe-card$: |
.swiper-wrapper {
padding-bottom: 1vw !important;
}
- type: custom:swipe-card
parameters:
speed: 550
spaceBetween: 43
threshold: 5
pagination:
type: bullets
cards:
- type: grid
columns: 2
cards:
- type: custom:button-card
entity: light.akshay_vaerelse_lys
name: Boy Lys
template:
- light
- icon_hue
- type: custom:button-card
entity: light.saathviya_vaerelse_lys
name: Girl Lys
template:
- light
- icon_hue
- type: custom:button-card
entity: binary_sensor.home_pc
name: Home PC
tap_action: !include popup/pc.yaml
template:
- pc_front
- home_pc
- type: custom:button-card
entity: binary_sensor.lumi_lumi_sensor_magnet_aq2_f392e406_on_off
name: Door
template:
- base
- icon_closet
- type: grid
columns: 2
cards:
- type: custom:button-card
entity: light.familie_rum
name: Familie Lys
template:
- light
- icon_hue
- type: custom:button-card
entity: cover.familie_room
name: Shade
double_tap_action:
action: more-info
template:
- base
- icon_shadeee
Thatâs because youâre using mod-card wrong. See his code again. Need to put it as a card inside mod-card
You just put it under mod-card as a separate card, which does nothing.
@ASNNetworks I am very new to this, i dont understand yaml that well, i tried putting it in various ways, without luck. could you help me with my code ? I have gone through the card-mod 3 documentation, i dont find what is mentioned here, if someone can help i would really appreciate it.
- type: grid
title: Kids/Family
view_layout:
grid-area: studio
cards:
- type: custom:mod-card
card_mod:
style:
swipe-card$: |
.swiper-wrapper {
padding-bottom: 1vw !important;
}
card:
type: custom:swipe-card
parameters:
speed: 550
spaceBetween: 43
threshold: 5
pagination:
type: bullets
cards:
getting closer:
Remove the hyphen (-) in front of type: custom:swiper-card. Since itâs now part of the card section of mod-card and only one entry is allowed there.
Basic YAML:
Whenever you see cards it means there can be more cards under there, so you need - on each entry. Whenever you see card (SO NOT PLURAL) it means there is ONE entry, so naturally the - is not used on the entry.
@ASNNetworks Thanks that did the trick 
thanks changed thed padding-bottom: 2vw !important; makes it fit perfect
I noticed it takes longer to load the dashboard with css that particular card can take up to 5 seconds, it does not really matter, but is it normal behaviour ?
Itâs possible, I still have my dashboard in an image element, example:
type: picture-elements
image: /local/Fondo/f3.png
card_mod:
style: |
ha-card:first-child {
background: rgba(42, 46, 48, 1);
width: 100%;
}
styles:
title:
background-color: null
elements:
- type: custom:swipe-card
parameters:
effect: coverflow
speed: 650
direction: vertical
style:
top: 50%
left: 10%
cards:
- type: custom:better-thermostat-ui-card
entity: climate.temp_cocina
name: Temperatura cocina
disable_window: false
disable_summer: false
disable_eco: false
disable_heat: false
disable_off: false
disable_menu: true
disable_battery_warning: true
set_current_as_main: false
style:
top: 50%
left: 10%
card_mod:
style: |
ha-card {
color: cyan;
font-family: helvetica;
zoom: 0.75;
border: none; # Elimina el borde predeterminado
box-shadow: none; # Elimina la sombra predeterminada
background-color: rgba(0, 0, 0, 0);
}
.name {
color: white;
font-family: helvetica;
display: block;
width: 100%;
text-align: center;
font-size: 25px !important;
padding-top: 1em;
}
how is it possible to use a bullet pagination in the âcurrent page big dot, other pages smaller dotâ style?
like this: https://i.imgur.com/jtInGtM.png
from Swiper API
did you manage to use swiperâs âCSS Custom Propertiesâ at all?
e.g.
Navigation CSS Custom Properties
{
--swiper-navigation-size: 44px;
--swiper-navigation-top-offset: 50%;
--swiper-navigation-sides-offset: 10px;
--swiper-navigation-color: var(--swiper-theme-color);
}
using type: custom:mod-card with my card really slows it down, so itâs not an optionâŚ
well, its used as I posted earlier.
Starting to phase out the swiper, as its no longer maintained and not really super functional in my config
well not exactly. not useful⌠but not maintained is importantâŚ
Hi allâŚ
Anyone knowns how to get rid of
That hughe shadow stuff In swipe-card
With cube effect?
I couldnât find that sofar
Thank YouâŚ
Did you somehow manage to find a fix for this issue ?
I have the same behavior on Fully Kiosk Browser and Firefox, and Iâm out of ideas on how to fix it.