When javascript is disabled, this module tends to really mangle a page.

In ui.carousel.css, selector .ui-carousel-clip has a position: relative and z-index, so when all the LIs don't get moved to the right place via jQuery a lot of content gets obscured.

Some suggestions for improvement:

* Hide the arrows in HTML / CSS, make visible with jQuery
* Make every LI but the first one display:none, make visible with jQuery

Comments

kwinters’s picture

kwinters commented

Here's what I ultimately ended up doing:

/* for javascript disabled */
div.carousel-navigation a {
display: none;
}
div.carousel-navigation a.ui-icon {
display: block;
}
div.ui-carousel-clip li.not-first {
display: none;
}
div.ui-carousel-clip li.not-first.ui-carousel-item {
display: block;
}

and in the template:

$firstItem = current($items);
foreach ($items as $item) {
?>

  • if ($firstItem === $item) print 'first'; else print 'not-first';">

    I still definitely think this should be a default for the module.

    • neclimdul’s picture

    neclimdul
    He/Him
    commented
    Issue summary: View changes
    Status: Active » Closed (won't fix)