hi
I’m trying to make a swiper slider for my main ui overview page where, depending on the screen size, it will show options for some quick choices.
it’s the first time I make a widget and I’ve used some different examples from the forum.
I’m stuck right now as I can’t get the slidesPerView to work, it only shows one and then you have to swipe to see the next one, I’d like it to show more.
it is meant to be used in a block and full column width on a layout page.
Is there anyone who can guide me in the right direction
thanks in advance
uid: QuicAction_Swiper
tags: []
props:
parameters:
- description: title
label: title
name: title
required: false
type: TEXT
- context: item
description: An item to control
label: Item
name: item
required: false
type: TEXT
parameterGroups: []
timestamp: Jan 7, 2024, 3:30:57 PM
component: f7-card
config:
title: =props.title
class:
- padding
style:
backdrop-filter: ='blur(' + props.backgroundBlur + 'px)'
background-size: contain
background-repeat: no-repeat
background-position: 100% 100%
background-color: "=(props.backgroundColor === undefined ? 'var(--f7-color-white)' : (props.backgroundColor.substring(0,2) === '--' ? 'var(' + props.backgroundColor + ')' : props.backgroundColor))"
border-radius: 5px
overflow: hidden
-ms-user-select: none
-moz-user-select: none
-webkit-user-select: none
slots:
default:
- component: f7-swiper
config:
navigation: true
class:
- padding-top
params:
initalSlide: 0
runCallbacksOnInit: true
grabCursor: true
observer: true
observeSlideChildren: true
updateOnWindowResize: true
mousewheel: true
keyboard: true
watchOverflow: true
slidesOffsetBefore: 30
slidesOffsetAfter: 30
breakpoints:
"0":
slidesPerView: 1
spaceBetween: 0
"240":
slidesPerView: 2
spaceBetween: 0
"320":
slidesPerView: 3
spaceBetween: 0
"480":
slidesPerView: 4
spaceBetween: 5
"640":
slidesPerView: auto
spaceBetween: 5
style:
--swiper-navigation-size: 30px
--swiper-navigation-color: var(--normal-txt-color)
slots:
default:
- component: f7-swiper-slide
slots:
default:
- component: f7-card
config:
title: test 1
expandable: true
action: analyzer
actionAnalyzerItems: =[props.item1]
class:
- justify-content-center
- align-items-center
- text-align-center
style:
max-width: 50%
- component: f7-swiper-slide
slots:
default:
- component: f7-card
config:
title: test 2
expandable: true
action: analyzer
actionAnalyzerItems: =[props.item1]
class:
- justify-content-center
- align-items-center
- text-align-center
style:
max-width: 50%
- component: f7-swiper-slide
slots:
default:
- component: f7-card
config:
title: test 3
expandable: true
action: analyzer
actionAnalyzerItems: =[props.item1]
class:
- justify-content-center
- align-items-center
- text-align-center
style:
max-width: 50%
- component: f7-swiper-slide
slots:
default:
- component: f7-card
config:
title: test 4
expandable: true
action: analyzer
actionAnalyzerItems: =[props.item1]
class:
- justify-content-center
- align-items-center
- text-align-center
style:
max-width: 50%