MMM-Carousel Pagination Icons

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

mumblebaj

@sdetweil Yes, that is correct. I added a classname page-${i}. But the standard code was always zero based and I do not want to update that. It is tied in with MMM-pages and seems like it works with others as well.

start() {
  this.curPage = 0;
  this.mmmPagesDetected = false;
},

mumblebaj

@sdetweil And just to note, MMM-pages is zero based. This will need to be updated as well. If I understand MMM-Carousel correct, it is also zero based.

sdetweil

@mumblebaj one small step!

com1cedric

@sdetweil Hello Sam, may I ask you one question about this topic? do you know how it would be possible to show an image stored on the Raspberry or linked from the web, instead of showing an icon from Fontawesome?

sdetweil

@com1cedric just point the url() to the file

url('/folder_in_mm_tree/xxx.jpg/png/gif as appropriate')

note the MM web server root is ~/MagicMirror

so the files have to be in THAT folder tree
you can LINK files/folders outside into the MM tree with the -->ln<-- command

so, assume you made a

MagicMirror/icons

folder and in it is

circle.png

then you could use

url('/icons/circle.png')

or

url('http://localhost:mm_port/icons/circle.png')  /* not this ONLY works IF the browser is on the SAME MACHINE as MM..*/

if not you need the relative(url(‘/…’), OR have to hard code the MM machine address
like this

url('http://MM_IP_address:mm_port/icons/circle.png')

if linked from the web use its complete url path

com1cedric

@sdetweil said in MMM-Carousel Pagination Icons:

url(‘/icons/circle.png’)

Thank you very much Sam.

currently, I have the following command (which works well and shows an icon from FontAwesom) in custom.css:

.MMM-page-indicator div.module-content div i:nth-child(7)::after {
content: “\f207”;
font-family: FontAwesome;
color: #FF4433;
}

After putting an image called “olympic.png” in the “MagicMirror/icons” folder, it still does not appear if I write:

.MMM-page-indicator div.module-content div i:nth-child(7)::after {
url(‘/icons/olympics.png’);
}

Do I habe to still use “content:” before or something else?

PS. sorry for asking, I am quite new in this CSS topic

sdetweil

@com1cedric i will test this out and get back

icons are very small images