Allow to add colors or classes to dots

[hmaesta]

First of all, thank you for contributing to Svelte environment. That's the third component I use from Beyonk 😊

.

Small improvements:

• Added dots class to <ul>
• Added CSS transitions to .dots using already defined duration and easing

.

Features:

Change default dots colors

That's for plug-and-play users that just want to override default white color.

Added variables:

• dotsColor
  • Change default dot color
  • Default: rgba(255,255,255,0.5)
• dotsHoverColor
  • Change default dot color on :hover
  • Default: rgba(255,255,255,0.85)
• dotsActiveColor
  • Change default dot color when .active
  • Default: rgba(255,255,255,1)

How to use:

<Carousel dotsColor="#FFAAAA"
          dotsHoverColor="#FC8888"
          dotsActiveColor="#FF0000">

That will keep default CSS and change just dots background colors.

.

Change dots classes

That's mostly for Tailwind CSS users or CSS-hackers.

Added variables:

• dotsWrapperClass
  • Classes added to <ul>
  • Default: undefined
• dotsClass
  • Classses added to <li>
  • Default: undefined
• dotsActiveClass
  • Classses added to <li> when it's active
  • Default: undefined

How to use:

<Carousel dotsWrapperClass="flex items-center justify-center list-none"
          dotsClass="m-1 w-2 h-2 rounded-full bg-red-600 bg-opacity-50 hover:bg-opacity-75 cursor-pointer transition duration-150 ease-in-out"
          dotsActiveClass="bg-opacity-100">

When using dotsClass or dotsActiveClass default CSS wont be loaded – otherwise it would always overrule.

[antony]

Seems like a good idea, but I'm not sure about echoing out a style block with the css tag, especially since it breaks scoping.

I would suggest that a single property where you pass in a json object of style parameters, which are in turn, converted to css variables and applied to the element, would be a better solution.