CSS3 Carousel

Question

We needed to create a responsive image carousel and use Gallery CSS (only CSS carousel without javascript - http://benschwarz.imtqy.com/gallery-css/ ).

Below 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> 

Links to external websites work for each of the elements if you click on individual links of the "control button" to get to them. The problem is that if autostart starts, then clicking on any element goes to the first element of the figure and therefore goes to the link www.google.co.uk.

Since the markup does not change with the transition, we cannot select any modified element using jQuery. We tried to add an event handler for "transitionend" (or its browser equivalent), but it never works.

Any insight is appreciated.

---

Update:

We tried

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

and

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

Not a single fire in the animation, whether it is auto play or the press of control buttons.

Answer 1

Well, I looked at the gallery code in detail. The reason that the animationend event is not triggered at any point is because the animations are in an infinite loop and thus never end. You could instead look at the animationstart and animationiteration events, but at this point it is due to a lot of javascript, and it could also be a different gallery (also setting a hash in the URL interrupts autostart). However, I realized that it does not correctly set the pointer-events property for elements during the gallery animation cycle. A simple fix is ​​to install inside the correct css animation as follows:

 @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; } } 

If you do not know, pointer events determine how the mouse interacts with this particular element. If you look at this code, you will see that now it works fine both with autorun and after selecting a breakpoint: http://codepen.io/paulmg/pen/akxVZk

If you cannot access the css gallery code directly to set up pointer events, you just need to add the animations themselves to your own css and redefine their gallery until they are placed after the css gallery.