search

davidjerleke / embla-carousel

A lightweight carousel library with fluid motion and great swipe precision.
https://www.embla-carousel.com
MIT License
5.8k stars 175 forks source link

Changing options through CSS doesn't seem to work #302

Closed th-km closed 2 years ago

th-km commented 2 years ago

Bug is related to

embla-carousel-react

Embla Carousel version

v6.2.0

Describe the bug

Changing Embla options through CSS doesn't seem to work. Both VSCode and CodeSandbox flag the CSS as "non-valid", and the pseudo options part breaks the CSS layout.

CodeSandbox

https://codesandbox.io/s/embla-carousel-default-react-forked-4qptzn?file=/src/css/embla.css

Steps to reproduce

  1. Follow the CodeSandbox
  2. See how the CSS breaks and how the options are not picked

Expected behavior

Embla should be able to pick options defined in your CSS file as mentioned here

davidjerleke commented 2 years ago

Hi @th-km,

I think you need to make sure the JSON string is on a single line for the CSS parser to parse it correctly. Try this:

.embla__viewport:before {
  display: none;
  content: '{ "draggable": false, "loop": true }'; /* <--- put it on a single line */
}

Best, David

th-km commented 2 years ago

Hey @davidjerleke, thanks for the quick reply. Indeed it worked perfectly!

It might be worth it to specify this on the documentation, I tried all kinds of hacks, but haven't thought about doing it inline.

davidjerleke commented 2 years ago

@th-km I agree. Feel free to submit a pull request if you want to contribute.

Best, David