Carousel with Radio Buttons

flowers (carousel)

Code

<p>
  <button>Focusable element before</button>
</p>
<div class="carousel">
  <h1 class="visually-hidden">
    flowers (carousel)
  </h1>
  <p class="visually-hidden">
    Carousel help: use the carousel controls to toggle the visibility of their respective panels (below the controls).
  </p>
  <fieldset class="controls">
    <legend class="visually-hidden">Carousel controls</legend>
    <div class="control">
      <button aria-pressed="true" data-carousel-autoplay="" data-carousel-id="carousel_flowers">Autoplay</button>
    </div>
    <div class="control">
      <button data-carousel-direction="previous" data-carousel-id="carousel_flowers">Previous</button>
    </div>
    <div class="control">
      <input checked="" class="visually-hidden" id="carousel_flowers_panel_rose" name="carousel_flowers" type="radio" value="carousel_flowers_panel_rose" /><label for="carousel_flowers_panel_rose"><span class="visually-hidden">Show panel rose</span></label>
    </div>
    <div class="control">
      <input class="visually-hidden" id="carousel_flowers_panel_tulip" name="carousel_flowers" type="radio" value="carousel_flowers_panel_tulip" /><label for="carousel_flowers_panel_tulip"><span class="visually-hidden">Show panel tulip</span></label>
    </div>
    <div class="control">
      <input class="visually-hidden" id="carousel_flowers_panel_sunflower" name="carousel_flowers" type="radio" value="carousel_flowers_panel_sunflower" /><label for="carousel_flowers_panel_sunflower"><span class="visually-hidden">Show panel sunflower</span></label>
    </div>
    <div class="control">
      <button data-carousel-direction="next" data-carousel-id="carousel_flowers">Next</button>
    </div>
  </fieldset>
  <div class="panel" id="carousel_flowers_panel_rose_panel" style="display: block">
    <h2 class="visually-hidden">
      rose (panel)
    </h2>
    <h3>
      Some info about rose
    </h3>
    <p>
      Bla bla bla... all about rose...
    </p>
    <p>
      <img alt="A beautiful rose" src="..." />
    </p>
    <p>
      A link to a page with <a href="#">more infos about rose</a>!
    </p>
    <h3>
      More elements can come here related to rose
    </h3>
    <p>
      Maybe even some form element where you can enter a name for your rose: <input type="text" />
    </p>
  </div>
  <div class="panel" id="carousel_flowers_panel_tulip_panel" style="display: none">
    <h2 class="visually-hidden">
      tulip (panel)
    </h2>
    <h3>
      Some info about tulip
    </h3>
    <p>
      Bla bla bla... all about tulip...
    </p>
    <p>
      <img alt="A beautiful tulip" src="..." />
    </p>
    <p>
      A link to a page with <a href="#">more infos about tulip</a>!
    </p>
    <h3>
      More elements can come here related to tulip
    </h3>
    <p>
      Maybe even some form element where you can enter a name for your tulip: <input type="text" />
    </p>
  </div>
  <div class="panel" id="carousel_flowers_panel_sunflower_panel" style="display: none">
    <h2 class="visually-hidden">
      sunflower (panel)
    </h2>
    <h3>
      Some info about sunflower
    </h3>
    <p>
      Bla bla bla... all about sunflower...
    </p>
    <p>
      <img alt="A beautiful sunflower" src="..." />
    </p>
    <p>
      A link to a page with <a href="#">more infos about sunflower</a>!
    </p>
    <h3>
      More elements can come here related to sunflower
    </h3>
    <p>
      Maybe even some form element where you can enter a name for your sunflower: <input type="text" />
    </p>
  </div>
</div>
<div class="visually-hidden" id="alerts"></div>
<p>
  <button>Focusable element after</button>
</p>
  
.visually-hidden {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

body {
  padding: 20px;
}

.carousel {
  padding-bottom: 50px;
  margin-bottom: 20px;
  position: relative;
}

.controls {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 8px 0 10px 0;
}

.control {
  display: inline-block;
}
.control label,
.control button {
  height: 25px;
  border: 1px solid black;
  background-color: lightgray;
  vertical-align: middle;
}
.control label {
  width: 25px;
  margin: 0 5px;
}

input[type=radio]:checked + label {
  background-color: black;
}

button:focus,
a:focus,
input:focus,
input[type=radio]:focus + label {
  outline: 2px dotted red;
  outline-offset: 2px;
}

input[type=radio] + label:hover {
  cursor: pointer;
}

.panel {
  border: 1px solid;
  background-color: lightyellow;
  padding: 0 0 0 10px;
}


(function() {
  $(document).ready(function() {
    var interval;
    $('button[data-carousel-direction]').click(function() {
      var $all_panels, $button, $upcoming_panel, carousel_id, current_index, direction, max_index, upcoming_index;
      $button = $(this);
      carousel_id = $button.attr('data-carousel-id');
      direction = $button.attr('data-carousel-direction');
      $all_panels = $(`input[name='${carousel_id}']`);
      max_index = $all_panels.length - 1;
      current_index = $all_panels.index($($all_panels.parent()).find(':checked'));
      upcoming_index = direction === 'previous' ? current_index === 0 ? max_index : current_index - 1 : current_index === max_index ? 0 : current_index + 1;
      $upcoming_panel = $($all_panels[upcoming_index]);
      $upcoming_panel.prop('checked', true).trigger('change');
      $('#alerts').append(`<div role='alert'>Showing panel ${upcoming_index + 1} of ${max_index + 1}</div>`);
      return setTimeout((function() {
        return $('#alerts').empty();
      }), 2000);
    });
    $("input[type='radio']").change(function() {
      var $current_radiobutton, current_panel_id, current_radiobutton_name;
      $current_radiobutton = $(this);
      current_radiobutton_name = $current_radiobutton.attr('name');
      current_panel_id = `#${$current_radiobutton.attr('value')}_panel`;
      return $(`[name='${current_radiobutton_name}']`).each((i, element) => {
        var $panel, $radiobutton, panel_id;
        $radiobutton = $(element);
        panel_id = `#${$radiobutton.attr('id')}_panel`;
        $panel = $(panel_id);
        if (panel_id === current_panel_id) {
          return $panel.show();
        } else {
          return $panel.hide();
        }
      });
    });
    interval = setInterval((function() {
      if ($('button[data-carousel-autoplay]').attr('aria-pressed') === "true") {
        // Bug: this leads currently to an alert when pausing and then re-enabling auto play.
        return $("button[data-carousel-direction='next']").click();
      }
    }), 2000);
    return $('button[data-carousel-autoplay]').click(function() {
      var $button, status;
      $button = $(this);
      console.log($button.attr('aria-pressed'));
      status = $button.attr('aria-pressed') === "true" ? "false" : "true";
      return $button.attr('aria-pressed', status);
    });
  });

}).call(this);

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiPGFub255bW91cz4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFBQSxDQUFBLENBQUUsUUFBRixDQUFXLENBQUMsS0FBWixDQUFrQixRQUFBLENBQUEsQ0FBQTtBQUNsQixRQUFBO0lBQUUsQ0FBQSxDQUFFLGlDQUFGLENBQW9DLENBQUMsS0FBckMsQ0FBMkMsUUFBQSxDQUFBLENBQUE7QUFDN0MsVUFBQSxXQUFBLEVBQUEsT0FBQSxFQUFBLGVBQUEsRUFBQSxXQUFBLEVBQUEsYUFBQSxFQUFBLFNBQUEsRUFBQSxTQUFBLEVBQUE7TUFBSSxPQUFBLEdBQVUsQ0FBQSxDQUFFLElBQUY7TUFDVixXQUFBLEdBQWMsT0FBTyxDQUFDLElBQVIsQ0FBYSxrQkFBYjtNQUNkLFNBQUEsR0FBWSxPQUFPLENBQUMsSUFBUixDQUFhLHlCQUFiO01BQ1osV0FBQSxHQUFjLENBQUEsQ0FBRSxDQUFBLFlBQUEsQ0FBQSxDQUFlLFdBQWYsQ0FBQSxFQUFBLENBQUY7TUFFZCxTQUFBLEdBQVksV0FBVyxDQUFDLE1BQVosR0FBcUI7TUFDakMsYUFBQSxHQUFnQixXQUFXLENBQUMsS0FBWixDQUFrQixDQUFBLENBQUUsV0FBVyxDQUFDLE1BQVosQ0FBQSxDQUFGLENBQXVCLENBQUMsSUFBeEIsQ0FBNkIsVUFBN0IsQ0FBbEI7TUFFaEIsY0FBQSxHQUFvQixTQUFBLEtBQWEsVUFBaEIsR0FDSyxhQUFBLEtBQWlCLENBQXBCLEdBQ0UsU0FERixHQUdFLGFBQUEsR0FBZ0IsQ0FKcEIsR0FNSyxhQUFBLEtBQWlCLFNBQXBCLEdBQ0UsQ0FERixHQUdFLGFBQUEsR0FBZ0I7TUFFckMsZUFBQSxHQUFrQixDQUFBLENBQUUsV0FBVyxDQUFDLGNBQUQsQ0FBYjtNQUVsQixlQUFlLENBQUMsSUFBaEIsQ0FBcUIsU0FBckIsRUFBZ0MsSUFBaEMsQ0FBcUMsQ0FBQyxPQUF0QyxDQUE4QyxRQUE5QztNQUNBLENBQUEsQ0FBRSxTQUFGLENBQVksQ0FBQyxNQUFiLENBQW9CLENBQUEsZ0NBQUEsQ0FBQSxDQUFtQyxjQUFBLEdBQWlCLENBQXBELENBQUEsSUFBQSxDQUFBLENBQTRELFNBQUEsR0FBWSxDQUF4RSxDQUFBLE1BQUEsQ0FBcEI7YUFFQSxVQUFBLENBQVcsQ0FBQyxRQUFBLENBQUEsQ0FBQTtlQUNWLENBQUEsQ0FBRSxTQUFGLENBQVksQ0FBQyxLQUFiLENBQUE7TUFEVSxDQUFELENBQVgsRUFFRyxJQUZIO0lBekJ5QyxDQUEzQztJQTZCQSxDQUFBLENBQUUscUJBQUYsQ0FBd0IsQ0FBQyxNQUF6QixDQUFnQyxRQUFBLENBQUEsQ0FBQTtBQUNsQyxVQUFBLG9CQUFBLEVBQUEsZ0JBQUEsRUFBQTtNQUFJLG9CQUFBLEdBQTJCLENBQUEsQ0FBRSxJQUFGO01BQzNCLHdCQUFBLEdBQTJCLG9CQUFvQixDQUFDLElBQXJCLENBQTBCLE1BQTFCO01BQzNCLGdCQUFBLEdBQTJCLENBQUEsQ0FBQSxDQUFBLENBQUksb0JBQW9CLENBQUMsSUFBckIsQ0FBMEIsT0FBMUIsQ0FBSixDQUFBLE1BQUE7YUFFM0IsQ0FBQSxDQUFFLENBQUEsT0FBQSxDQUFBLENBQVUsd0JBQVYsQ0FBQSxFQUFBLENBQUYsQ0FBeUMsQ0FBQyxJQUExQyxDQUErQyxDQUFDLENBQUQsRUFBSSxPQUFKLENBQUEsR0FBQTtBQUNuRCxZQUFBLE1BQUEsRUFBQSxZQUFBLEVBQUE7UUFBTSxZQUFBLEdBQWUsQ0FBQSxDQUFFLE9BQUY7UUFDZixRQUFBLEdBQWUsQ0FBQSxDQUFBLENBQUEsQ0FBSSxZQUFZLENBQUMsSUFBYixDQUFrQixJQUFsQixDQUFKLENBQUEsTUFBQTtRQUNmLE1BQUEsR0FBZSxDQUFBLENBQUUsUUFBRjtRQUVmLElBQUcsUUFBQSxLQUFZLGdCQUFmO2lCQUNFLE1BQU0sQ0FBQyxJQUFQLENBQUEsRUFERjtTQUFBLE1BQUE7aUJBR0UsTUFBTSxDQUFDLElBQVAsQ0FBQSxFQUhGOztNQUw2QyxDQUEvQztJQUw4QixDQUFoQztJQWVBLFFBQUEsR0FBVyxXQUFBLENBQVksQ0FBQyxRQUFBLENBQUEsQ0FBQTtNQUN0QixJQUFHLENBQUEsQ0FBRSxnQ0FBRixDQUFtQyxDQUFDLElBQXBDLENBQXlDLGNBQXpDLENBQUEsS0FBNEQsTUFBL0Q7O2VBRUUsQ0FBQSxDQUFFLHdDQUFGLENBQTJDLENBQUMsS0FBNUMsQ0FBQSxFQUZGOztJQURzQixDQUFELENBQVosRUFJUixJQUpRO1dBTVgsQ0FBQSxDQUFFLGdDQUFGLENBQW1DLENBQUMsS0FBcEMsQ0FBMEMsUUFBQSxDQUFBLENBQUE7QUFDNUMsVUFBQSxPQUFBLEVBQUE7TUFBSSxPQUFBLEdBQVUsQ0FBQSxDQUFFLElBQUY7TUFDVixPQUFPLENBQUMsR0FBUixDQUFZLE9BQU8sQ0FBQyxJQUFSLENBQWEsY0FBYixDQUFaO01BQ0EsTUFBQSxHQUFZLE9BQU8sQ0FBQyxJQUFSLENBQWEsY0FBYixDQUFBLEtBQWdDLE1BQW5DLEdBQ0UsT0FERixHQUdFO2FBQ1gsT0FBTyxDQUFDLElBQVIsQ0FBYSxjQUFiLEVBQTZCLE1BQTdCO0lBUHdDLENBQTFDO0VBbkRnQixDQUFsQjtBQUFBIiwic291cmNlc0NvbnRlbnQiOlsiJChkb2N1bWVudCkucmVhZHkgLT5cbiAgJCgnYnV0dG9uW2RhdGEtY2Fyb3VzZWwtZGlyZWN0aW9uXScpLmNsaWNrIC0+XG4gICAgJGJ1dHRvbiA9ICQoQClcbiAgICBjYXJvdXNlbF9pZCA9ICRidXR0b24uYXR0cignZGF0YS1jYXJvdXNlbC1pZCcpXG4gICAgZGlyZWN0aW9uID0gJGJ1dHRvbi5hdHRyKCdkYXRhLWNhcm91c2VsLWRpcmVjdGlvbicpXG4gICAgJGFsbF9wYW5lbHMgPSAkKFwiaW5wdXRbbmFtZT0nI3tjYXJvdXNlbF9pZH0nXVwiKVxuICAgIFxuICAgIG1heF9pbmRleCA9ICRhbGxfcGFuZWxzLmxlbmd0aCAtIDFcbiAgICBjdXJyZW50X2luZGV4ID0gJGFsbF9wYW5lbHMuaW5kZXgoJCgkYWxsX3BhbmVscy5wYXJlbnQoKSkuZmluZCgnOmNoZWNrZWQnKSlcbiAgICBcbiAgICB1cGNvbWluZ19pbmRleCA9IGlmIGRpcmVjdGlvbiA9PSAncHJldmlvdXMnXG4gICAgICAgICAgICAgICAgICAgICAgIGlmIGN1cnJlbnRfaW5kZXggPT0gMFxuICAgICAgICAgICAgICAgICAgICAgICAgIG1heF9pbmRleFxuICAgICAgICAgICAgICAgICAgICAgICBlbHNlXG4gICAgICAgICAgICAgICAgICAgICAgICAgY3VycmVudF9pbmRleCAtIDFcbiAgICAgICAgICAgICAgICAgICAgIGVsc2VcbiAgICAgICAgICAgICAgICAgICAgICAgaWYgY3VycmVudF9pbmRleCA9PSBtYXhfaW5kZXhcbiAgICAgICAgICAgICAgICAgICAgICAgICAwXG4gICAgICAgICAgICAgICAgICAgICAgIGVsc2VcbiAgICAgICAgICAgICAgICAgICAgICAgICBjdXJyZW50X2luZGV4ICsgMVxuICAgICAgICAgICAgICAgICAgIFxuICAgICR1cGNvbWluZ19wYW5lbCA9ICQoJGFsbF9wYW5lbHNbdXBjb21pbmdfaW5kZXhdKVxuICAgIFxuICAgICR1cGNvbWluZ19wYW5lbC5wcm9wKCdjaGVja2VkJywgdHJ1ZSkudHJpZ2dlcignY2hhbmdlJylcbiAgICAkKCcjYWxlcnRzJykuYXBwZW5kKFwiPGRpdiByb2xlPSdhbGVydCc+U2hvd2luZyBwYW5lbCAje3VwY29taW5nX2luZGV4ICsgMX0gb2YgI3ttYXhfaW5kZXggKyAxfTwvZGl2PlwiKVxuICAgIFxuICAgIHNldFRpbWVvdXQgKC0+XG4gICAgICAkKCcjYWxlcnRzJykuZW1wdHkoKVxuICAgICksIDIwMDBcbiAgXG4gICQoXCJpbnB1dFt0eXBlPSdyYWRpbyddXCIpLmNoYW5nZSAtPlxuICAgICRjdXJyZW50X3JhZGlvYnV0dG9uICAgICA9ICQoQClcbiAgICBjdXJyZW50X3JhZGlvYnV0dG9uX25hbWUgPSAkY3VycmVudF9yYWRpb2J1dHRvbi5hdHRyICduYW1lJ1xuICAgIGN1cnJlbnRfcGFuZWxfaWQgICAgICAgICA9IFwiIyN7JGN1cnJlbnRfcmFkaW9idXR0b24uYXR0cigndmFsdWUnKX1fcGFuZWxcIlxuICAgIFxuICAgICQoXCJbbmFtZT0nI3tjdXJyZW50X3JhZGlvYnV0dG9uX25hbWV9J11cIikuZWFjaCAoaSwgZWxlbWVudCkgPT5cbiAgICAgICRyYWRpb2J1dHRvbiA9ICQoZWxlbWVudClcbiAgICAgIHBhbmVsX2lkICAgICA9IFwiIyN7JHJhZGlvYnV0dG9uLmF0dHIoJ2lkJyl9X3BhbmVsXCJcbiAgICAgICRwYW5lbCAgICAgICA9ICQocGFuZWxfaWQpXG4gICAgICBcbiAgICAgIGlmIHBhbmVsX2lkID09IGN1cnJlbnRfcGFuZWxfaWRcbiAgICAgICAgJHBhbmVsLnNob3coKVxuICAgICAgZWxzZVxuICAgICAgICAkcGFuZWwuaGlkZSgpXG4gICAgICAgIFxuICBpbnRlcnZhbCA9IHNldEludGVydmFsKCgtPlxuICAgIGlmICQoJ2J1dHRvbltkYXRhLWNhcm91c2VsLWF1dG9wbGF5XScpLmF0dHIoJ2FyaWEtcHJlc3NlZCcpID09IFwidHJ1ZVwiXG4gICAgICAjIEJ1ZzogdGhpcyBsZWFkcyBjdXJyZW50bHkgdG8gYW4gYWxlcnQgd2hlbiBwYXVzaW5nIGFuZCB0aGVuIHJlLWVuYWJsaW5nIGF1dG8gcGxheS5cbiAgICAgICQoXCJidXR0b25bZGF0YS1jYXJvdXNlbC1kaXJlY3Rpb249J25leHQnXVwiKS5jbGljaygpXG4gICksIDIwMDApXG5cbiAgJCgnYnV0dG9uW2RhdGEtY2Fyb3VzZWwtYXV0b3BsYXldJykuY2xpY2sgLT5cbiAgICAkYnV0dG9uID0gJChAKVxuICAgIGNvbnNvbGUubG9nICRidXR0b24uYXR0cignYXJpYS1wcmVzc2VkJylcbiAgICBzdGF0dXMgPSBpZiAkYnV0dG9uLmF0dHIoJ2FyaWEtcHJlc3NlZCcpID09IFwidHJ1ZVwiXG4gICAgICAgICAgICAgICBcImZhbHNlXCJcbiAgICAgICAgICAgICBlbHNlXG4gICAgICAgICAgICAgICBcInRydWVcIlxuICAgICRidXR0b24uYXR0cignYXJpYS1wcmVzc2VkJywgc3RhdHVzKSJdfQ==
//# sourceURL=coffeescript