MMM-Carousel Pagination Icons

com1cedric

@sdetweil hello, and thank you for your time. It helped me a lot, as it is finally working now…

I had to change “before” with “after” after the ::

.MMM-page-indicator div.module-content div i:nth-child(2)::AFTER {
content: “\f453”;
font-family: FontAwesome;
}

So, thank you very much for your help and have a great week-end.

mumblebaj

@com1cedric I have submitted a PR for MMM-page-indicator which should give more flexibility per page. See example below:

.MMM-page-indicator .fa.indicator.page-2::before {
    content:"\f005";
    color: orange !important;
}

.MMM-page-indicator .indicator.active-page {
   animation: pulse 1.2s ease-in-out infinite;
}

If PR is accepted you should be able to target specific page indicators as shown in example above from custom.css.

You could use this fork in the meanwhile:
MMM-page-indicator

sdetweil

@mumblebaj you know there has to be one of the icon entries for every page the user defined, right?

mumblebaj

@sdetweil Not sure if I understand you properly but the other pages would default to the standard circle. The changes I made allows you to target specific pages if you want to change the icon, add animations etc. A little easier to target individuals.

sdetweil

@mumblebaj ah, what you meant to say is

.fa.indicator.page-n

where n is a number for each page found, starting at 0

page-0 for first page
page-1 for second page
etc

mumblebaj

@sdetweil Correct. Although, MMM-page-indicator is 0 based, same as MMM-pages, so page-0 would be page 1 etc.

sdetweil

@mumblebaj i updated my post

sdetweil

@mumblebaj i will say, i think for humans. 0 based is unfriendly

mumblebaj

@sdetweil Yeah, i would agree. Changing that logic now may have some repercussions for users already using the module.

sdetweil

@mumblebaj page- was never there