Showing results for 
Search instead for 
Did you mean: 
Community Member

Accessible Image Carousel

Jump to solution

I've been trying to implement some image carousels in preparation for a course. After trying about a dozen, I finally found one that seems like it could work in all browsers and with the jQuery edition. Except it doesn't. I've created a JS fiddle using the same jquery version as is in Canvas (​ )but while the fiddle works, the implementation in Canvas doesn't. Any ideas?

1 Solution

Accepted Solutions

Figured it out!!

Took your advice,  @James ​ and did some old fashioned debugging. $(document).ready was not firing at all. So though the code was loading, it wasn't being executed. I worked around it with a window.onload.

Thanks so much!

View solution in original post

9 Replies

 @kristin_anthony ​,

I'm assuming this is related to Javascript works intermittently

When I go to your jsfiddle thing, there is no source code.

Hi James,

Yes it is related. Since that question hadn't been getting any play (till just now) I decided to start fresh with a different plugin. Here's the JSFiddle

I know Canvas uses jQuery 1.7.2 and this fiddle loads exactly that version.

Figured it out!!

Took your advice,  @James ​ and did some old fashioned debugging. $(document).ready was not firing at all. So though the code was loading, it wasn't being executed. I worked around it with a window.onload.

Thanks so much!

View solution in original post

Glad you got it figured out.

Wanted to follow up. Actually changed to using

window.addEventListener("load", function(){}

So as to prevent issues with fighting other javascript

Thanks, I had read something about events triggering when others don't, but don't recall exactly where.

It sounds like the problem was the code was trying to execute before everything was in place. The document appears ready before scripts are guaranteed to be loaded. That is, document.ready() occurs before scripts and images have loaded and the DOM can be accessed, while document.load() waits until they're images and scripts have loaded.

I just read that, too, when I looked up the difference between window load and document ready, and that makes sense, except, document ready wasn't firing at all. I put in a console log statement as a test and it never showed.

Community Member

Hi Kristin, I am trying to do a similar thing (have a carousel in the announcement), and I am not sure how to start.

Were you ever able to get it working properly? Can you help me here?



Hi Ewerton,

Sorry, I haven't been paying attention. Yes, I used this accessible carousel:  ARIA carousel example in conjunction with the code from this thread: Targeting the iFrame using Javascript in the new UI I reworked the carousel so that we could call two or more on a single page.

Below is an incomplete code snippet (note that you would not need to include jQuery):

<div class="carousel-accessible-wrapper">

<div class="carousel-accessible" aria-live="polite">

<ul id="syntax-carousel" class="carousel-accessible-content">

<li id="item-1" class="carousel-accessible-item" aria-hidden="false"><img class="carousel-accessible-image" src="/static/SyntaxErrorMissingSemiColon.png" alt="A semicolon is missing at the end of a command statement" />

<h5 class="carousel-heading">Syntax Error #1</h5>


<p>In Java (and many other languages) certain types of lines or statements in a program have to end with certain punctuation. In this case, the command line must end with a semicolon. Note that the error message in this case lets you know what is missing and points to the line where it belongs.</p>



<li id="item-2" class="carousel-accessible-item hidden" aria-hidden="true"><img class="carousel-accessible-image" src="/static/SyntaxErrorMissingBracket.png" alt="The closing bracket is missing for the interior pair of brackets." />

<h5 class="carousel-heading">Syntax Error #2</h5>


<p>A common thing to leave off is the closing mate to an opening bracket or parenthesis. In this case, the closing bracket for the interior pair of brackets is missing. Note how the error message in this case ("reached end of file while parsing") is not obvious.</p>





<div id="syn" class="carousel-accessible-buttons" aria-controls="carousel" aria-label="carousel buttons"><a id="prev" class="carousel-accessible-button carousel-accessible-link Button" aria-label="previous" href="#">prev</a> <a id="next" class="carousel-accessible-button carousel-accessible-link Button" aria-label="next" href="#">next</a></div>




//Accessible jQuery Carousel


function accessibleCarousel ( ulId, divId ){

  var  transition_time = 1000, // 1 second

  currentslide = 1,

  numSlides = $(ulId + " li.carousel-accessible-item").length; //calculates number of slides.

  function showCurrent(){

  $(ulId + " li.carousel-accessible-item").attr("aria-hidden","true");

  $(ulId+ " li.carousel-accessible-item").addClass("hidden");

  if (currentslide > numSlides) {


  if (currentslide === 0) {

  currentslide = numSlides;}

  var slide= currentslide-1;

  $(ulId + " li.carousel-accessible-item:eq("+slide+")").attr("aria-hidden","false");

  $(ulId + " li.carousel-accessible-item:eq("+slide+")").removeClass("hidden");

  $(ulId + " .carousel-image").fadeIn(2000);


  $(divId + " a#next").on('click', function(ev){

  currentslide = currentslide + 1;





    $( divId + " a#prev").on('click', function(ev){

  currentslide = currentslide - 1;





  // add keyboard accessibility for all buttons, enter makes it click...

  $(".carousel-accessible-link").keypress(function(ev) {

  if (ev.which ===37)  {

  $(divId + " a#prev").click();



  if (ev.which ===39)  {

  $(divId + " a#next").click();





accessibleCarousel("#lexical-carousel", "#lex");

accessibleCarousel("#syntax-carousel", "#syn");