CSS3 Transition Carousel

Question

We needed to create a responsive carousel of images and used the Gallery CSS (a CSS only carousel with no javascript - http://benschwarz.github.io/gallery-css/).

The following is an example of the markup used (excluding images)

<div class="gallery autoplay items-3">
    <div id="item-1" class="control-operator"></div>
    <div id="item-2" class="control-operator"></div>
    <div id="item-3" class="control-operator"></div>

    <figure class="item">
        <a href="http://www.google.co.uk">
            <h1>First Item</h1>
        </a>
    </figure>

    <figure class="item">
        <a href="http://www.bbc.co.uk/news">
            <h1>Second Item</h1>
        </a>
    </figure>

    <figure class="item">
        <a href="http://www.apple.co.uk">
            <h1>Third Item</h1>
        </a>
    </figure>

    <div class="controls">
        <a href="#item-1" class="control-button">•</a>
        <a href="#item-2" class="control-button">•</a>
        <a href="#item-3" class="control-button">•</a>
    </div>
</div>

The links to the external websites work for each of the items if you click on the individual "control-button" links to get to them. The problem is, if the autoplay runs then clicking any item goes to the first figure element and would therefore go to the www.google.co.uk link.

As the markup does not change with transition we cannot pick up any changed element using JQuery. We have tried adding an event handler for "transitionend" (or its browser equivalent) but that never fires.

Any insight welcome.

---

Update:

We have tried

$(document).ready(function () {
        $('.item').on('animationend webkitAnimationEnd MSAnimationEnd', function () {
            alert('fired !!');
        });
    });

and

$(document).ready(function () {
            $('div').on('animationend webkitAnimationEnd MSAnimationEnd', function () {
                alert('fired !!');
            });
        });

Neither fire on the animation, whether it is the autoplay or clicking the control-buttons.

Answer 1

Ok, I took a closer look at the gallery code. The reason why the animationend event isn't called at any point is because the animations are on an infinite loop and thus never end. You could look instead at the animationstart and animationiteration events but at that point it involves a lot of javascript and might as well be another gallery (also setting the hash in the url breaks the autoplay). However, I realized that it is not setting the pointer-events property correctly on the items during the gallery animation loop. A simple fix then is to set that inside the correct css animation like so:

@keyframes galleryAnimation-3 {
  0% {
    opacity: 0;
    pointer-events: none;
  }

  9.5%, 33.3% {
    opacity: 1;
    pointer-events: auto;
  }

  42.9%, 100% {
    opacity: 0;
    pointer-events: none;
  }
}

In case you don't know, pointer events determine how the mouse interacts with that particular element. If you take a look at this codepen you'll see it works fine now both with autoplay and after you select a control point: http://codepen.io/paulmg/pen/akxVZk

If you cannot access the gallery css code directly to set up the pointer events you should be able to just add in the animations themselves in your own css and have those override the gallery ones as long as they are placed after the gallery css.