Feature request: display half of prev and next slides & accessibility improvement about vueper-slides HOT 10 CLOSED

Hi @Redani, thanks for your feedback.

What you want is rather easy to obtain via CSS only, you can set this rules to have the overflow:

.vueperslides {padding: 0 3em;} /* Increase this to have more overflowing slides. */ 
.vueperslides__parallax-wrapper, .vueperslides__track {overflow: visible;}

If you still need the overflow: hidden, you can move it to the .vueperslides container.
Don't forget to disable the shadow effect by using the class no-shadow on the vueperslides tag.

Alternatively you can keep the arrows to make it more obvious.

Hope it helps.

from vueper-slides.

Hi @antoniandre and thank you for your reply.
Cool, i'll try out the code snippet tou gave me :)

One last thing please if you dont mind, could it be possible to change the name of your css classes from vueperslides... to vs... that would help save some bits...

Thanks a lot and have a lovely weekend :)

from vueper-slides.

Thanks @Redani,
Regarding the CSS classes, I understand and agree this would be more convenient. But then how to differentiate vueperslides and vueperslide? it has to be 2 different classes with obvious names or abbreviations.

from vueper-slides.

hey @antoniandre , you're very welcome, your slide is really really amazing and let's try to make it the best :)
how about vs- for vueperslide and vss or vs-container for vueperslides ? :)

another thing i've noticed yesterday, when running a lighthouse audit, i get some Accessibility warnings regarding the ARIA and Names & labels, would you please have a look at that?

from vueper-slides.

hi @antoniandre , how are you?
I was just wondering if you had time to look at my last message :)

Cheers

from vueper-slides.

Hi @Redani,
No worries, I fixed the issues related to accessibility, available in version 1.17.2.

Regarding renaming the css classes, I am sorry but the class set that we both think of does not make enough sense: vs is good but does not allow distinction between vueperslides and vueperslide.
vss does not make sense, and vs-container would be against the BEM principles I followed in my CSS naming convention.
So I leave it like that, a bit longer to type but more meaningful and not confusing.

from vueper-slides.

Hi @antoniandre, good to hear back from you :)

Ok, thanks for the new update, and it's okay for the css renaming :)
It'll be really amazing if you could add the option of showing a part of next slide. Do you think it's something you can add any time soon?
Ideally, when loading the page, we see only part of the next slide, and once start sliding we can see part of the prev slide...

thanks a lot

from vueper-slides.

Hi @antoniandre, hope you're doing well.

I was just wondering if you have read my previous message. And at the same time I'd have 3 more questions:

1- is it possible to display webp images along with its workaround for older browsers ? (<picture> + <source> tags)

2- I have a slide which is 1320x450px, but vueperslides displays it at 1320x396px, do you know why and/ or how to fix this?

3- what is the best way to use vueperslides with vue-lazyload?

Thanks a lot a have a lovely week-end

from vueper-slides.

Hi @Redani, sorry but the initial issue is solved and yet there are 3 new questions when I give you an answer. Please consider opening different issues next time - if it's about vueperslides.

1. no it's not supported because vueperslides is not experimental, I am not adding this as long as it's not supported on all modern browsers (IE).
2. You have to change the slide-ratio: your slide ratio is 1320 / 450 = 2.9333
3. I don't know vue-lazyload, but lazy loading is not built in vueperslides. I will probably add this in a later version.
   I am sorry I am not able to spend more time on it at the moment. hope it helps a little anyway.

from vueper-slides.

Ok, thank you very much. Have a lovely week :)

from vueper-slides.