moodlebox.net icon indicating copy to clipboard operation
moodlebox.net copied to clipboard

Fix carousel.js to support multiple list items

Open fvdpol opened this issue 1 month ago • 0 comments

The carousel code fails when the 1st slide contains more than one list elements. This can be reproduced by updating the slogan.yaml:

weight: 1
title: "Moodle + Raspberry = MoodleBox"
description: >
  <ul class="list-style-none">
     <li>A small box on the table that brings Moodle to the entire classroom has a touch of magic!</li>
     <li>2nd line on 1st slide</li>
   </ul>
image: "/img/carousel/raspberry-pi-case.png"

This will raise a javascript runtime error:

carousel.js:16  Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Element': 'ol li:nth-last-child(-n + -29)' is not a valid selector.
    at carousel.js:16:30
    at NodeList.forEach (<anonymous>)
    at HTMLDocument.<anonymous> (carousel.js:7:13)
	

The fix in this PR will correct the selection appropriate element, allowing the use of multiple list items on the 1st slide.

fvdpol avatar Jan 08 '25 16:01 fvdpol