Currently, I am working on implementing a CSS-only slider (no jQuery) in WordPress using the code from this source: http://codepen.io/dudleystorey/pen/kFoGw
An issue I have encountered is that the slider transitions are not functioning correctly in Safari, although they work perfectly fine in other browsers like Chrome and Firefox.
<div id="captioned-gallery">
<figure class="slider">
<figure>
<img src="http://localhost/wp/wp-content/uploads/2015/09/utah-peak.jpg" alt>
<figcaption>Integer vitae lectus accumsan, egestas dui eget, ullamcorper urn. In feugiat tortor at turpis rhoncus tincidunt. Duis sed porttitor ante, eget venenatis lectus.</figcaption>
</figure>
<figure>
<img src="http://localhost/wp/wp-content/uploads/2015/09/hobbiton-lake.jpg" alt>
<figcaption>Utah Mountains Valley in United States</figcaption>
</figure>
...
</figure>
</div>
Here are the corresponding CSS rules:
/* Frontpage Slider */
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
figure {
margin: 0;
font-family: sans-serif;
font-weight: 100;
}
div#captioned-gallery {
width: 100%;
overflow: hidden;
}
figure.slider {
position: relative;
width: 500%;
font-size: 0;
animation: 20s slidy infinite;
}
figure.slider figure {
width: 20%;
height: auto;
display: inline-block;
position: inherit;
}
figure.slider img {
width: 100%;
height: auto;
}
figure.slider figure figcaption {
position: absolute;
top:30%;
left:10%;
width:75%;
text-align:center;
line-height: 160%;
background: rgba(0,0,0,0.3);
color: #fff;
font-size: 3vw;
padding: .6rem;
}
Even though the slider example on CodePen works flawlessly in Safari, there seems to be an issue with my implementation of it.
I'm adding all stylesheets and scripts to WordPress in the following order:
wp_enqueue_style('pure-min', get_template_directory_uri().'/pure/pure-min.css');
wp_enqueue_style('pure-responsive-min', get_template_directory_uri().'/pure/grids-responsive-min.css');
wp_enqueue_style( 'default', get_stylesheet_uri() ); // default stylesheet
wp_register_style('ezy-font-light','http://fonts.googleapis.com/css?family=Raleway:300|Oswald:300');
wp_register_style('ezy-font-dark','http://fonts.googleapis.com/css?family=Raleway|Oswald');
wp_enqueue_style('css-font-awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');