1

I'm trying to make this image slider go faster. There also seems to be an issue if you click the radio buttons to go the next slide, the autoplay function seems to stop all together.

I can see that there is web kit key frames but I have never used them or even know how to remotely do the math to get it working flawlessly. I grabbed this code from a free source I found. So I'm sure there is some unneeded styles. But any suggestions is GREATLY appericated.

Any ideas?

/* Making Thing Pretty
---------------------------- */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
.opencanvascontainer {
 margin: 0 auto;
 max-width: 1140px;
}
[class*=bit-] {
 float: left;/*padding:.3em;*/
}
/* OBSW Grid System
---------------------------- */
.box {
 text-align: center;
 border: solid 1px black;
 color: #000;
 font-size: 12px;
 font-family: 'proxima_nova_rgregular', sans-serif;
 padding: 15px 10px 15px 10px;
}
.bit-1 {
 width: 100%;
}
.bit-2 {
 width: 50%;
}
.bit-3 {
 width: 33.33333%;
 padding: 20px;
}
.bit-4 {
 width: 25%;
}
.bit-5 {
 width: 20%;
}
.bit-6 {
 width: 16.66667%;
 padding: .3em;
}
.bit-7 {
 width: 14.28571%;
}
.bit-8 {
 width: 12.5%;
}
.bit-9 {
 width: 11.11111%;
}
.bit-10 {
 width: 10%;
}
.bit-11 {
 width: 9.09091%;
}
.bit-12 {
 width: 8.33333%;
}
.bit-25 {
 width: 25%;
}
.bit-40 {
 width: 40%;
}
.bit-60 {
 width: 60%;
}
.bit-75 {
 width: 75%;
}
.bit-35 {
 width: 35%;
}
.bit-65 {
 width: 65%;
}

/* Laptop */
@media (min-width:50em) and (max-width:68.75em) {
.bit-7, .bit-35, .bit-65 {
 width: 100%;
}
.bit-10, .bit-12, .bit-4, .bit-8 {
 width: 50%;
}
}

/* Tablet */
@media (min-width:30em) and (max-width:50em) {
.bit-10, .bit-12, .bit-4, .bit-6, .bit-8 {
 width: 50%;
}
.bit-1, .bit-11, .bit-3, .bit-5, .bit-7, .bit-9 {
 width: 100%;
}
}

/* Mobile */
@media (max-width:30em) {
.bit-1, .bit-10, .bit-11, .bit-12, .bit-2, .bit-3, .bit-4, .bit-5, .bit-6, .bit-7, .bit-8, .bit-9 {
 width: 100%;
}
}
/* -------------------------
End OBSW Grid System */



/* Full Width Wrapper
---------------------------- */
.fullwidthwrapper {
 width: 100%;
 padding-top: 150px;
}

@media (max-width:991px) {
.fullwidthwrapper {
 padding-top: 5px;
}
}

@media (max-width:907px) {
.fullwidthwrapper {
 padding-top: 5px;
 line-height: 42px;
}
}
/* -------------------------
End Full Width Wrapper */



/* Header Slider
---------------------------- */
.gallery .control-operator:target ~ .controls .control-button {
 color: #ccc;
 color: rgba(255, 255, 255, 0.4);
}
.gallery .control-button:first-of-type, .gallery .control-operator:nth-of-type(1):target ~ .controls .control-button:nth-of-type(1), .gallery .control-operator:nth-of-type(2):target ~ .controls .control-button:nth-of-type(2), .gallery .control-operator:nth-of-type(3):target ~ .controls .control-button:nth-of-type(3), .gallery .control-operator:nth-of-type(4):target ~ .controls .control-button:nth-of-type(4), .gallery .control-operator:nth-of-type(5):target ~ .controls .control-button:nth-of-type(5) {
 color: white;
 color: rgba(255, 255, 255, 0.8);
}
.gallery .item:first-of-type {
 position: static;
 pointer-events: auto;
 opacity: 1;
}
.gallery .item {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 pointer-events: none;
 opacity: 0;
 -webkit-transition: opacity .5s;
 -o-transition: opacity .5s;
 transition: opacity .5s;
}
.gallery .control-operator {
 display: none;
}
.gallery .control-operator:target ~ .item {
 pointer-events: none;
 opacity: 0;
 -webkit-animation: none;
 -o-animation: none;
 animation: none;
}
.gallery .control-operator:target ~ .controls .control-button {
 -webkit-animation: none;
 -o-animation: none;
 animation: none;
}
 @-webkit-keyframes controlAnimation-3 {
0% {
color: #ccc;
color: rgba(255, 255, 255, 0.4);
}
 9.5%, 33.3% {
 color: white;
 color: rgba(255, 255, 255, 0.8);
}
 42.9%, 100% {
 color: #ccc;
 color: rgba(255, 255, 255, 0.4);
}
}
 @-o-keyframes controlAnimation-3 {
 0% {
 color: #ccc;
 color: rgba(255, 255, 255, 0.4);
}
 9.5%, 33.3% {
 color: white;
 color: rgba(255, 255, 255, 0.8);
}
 42.9%, 100% {
 color: #ccc;
 color: rgba(255, 255, 255, 0.4);
}
}
 @keyframes controlAnimation-3 {
 0% {
 color: #ccc;
 color: rgba(255, 255, 255, 0.4);
}
 9.5%, 33.3% {
 color: white;
 color: rgba(255, 255, 255, 0.8);
}
 42.9%, 100% {
 color: #ccc;
 color: rgba(255, 255, 255, 0.4);
}
}
 @-webkit-keyframes galleryAnimation-3 {
 0% {
 opacity: 0;
}
 9.5%, 33.3% {
 opacity: 1;
}
 42.9%, 100% {
 opacity: 0;
}
}
 @-o-keyframes galleryAnimation-3 {
 0% {
 opacity: 0;
}
 9.5%, 33.3% {
 opacity: 1;
}
 42.9%, 100% {
 opacity: 0;
}
}
 @keyframes galleryAnimation-3 {
 0% {
 opacity: 0;
}
 9.5%, 33.3% {
 opacity: 1;
}
 42.9%, 100% {
 opacity: 0;
}
}
.gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {
 pointer-events: auto;
 opacity: 1;
}
.gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {
 pointer-events: auto;
 opacity: 1;
}
.gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) {
 pointer-events: auto;
 opacity: 1;
}
.items-3.autoplay .control-button {
 -webkit-animation: controlAnimation-3 12s infinite;
 -o-animation: controlAnimation-3 12s infinite;
 animation: controlAnimation-3 12s infinite;
}
.items-3.autoplay .item {
 -webkit-animation: galleryAnimation-3 12s infinite;
 -o-animation: galleryAnimation-3 12s infinite;
 animation: galleryAnimation-3 12s infinite;
}
.items-3 .control-button:nth-of-type(1), .items-3 .item:nth-of-type(1) {
 -webkit-animation-delay: -2s;
 -o-animation-delay: -2s;
 animation-delay: -2s;
}
.items-3 .control-button:nth-of-type(2), .items-3 .item:nth-of-type(2) {
 -webkit-animation-delay: 2s;
 -o-animation-delay: 2s;
 animation-delay: 2s;
}
.items-3 .control-button:nth-of-type(3), .items-3 .item:nth-of-type(3) {
 -webkit-animation-delay: 6s;
 -o-animation-delay: 6s;
 animation-delay: 6s;
}
.gallery .control-button {
 color: #ccc;
 color: rgba(255, 255, 255, 0.4);
}
.gallery .control-button:hover {
 color: white;
 color: rgba(255, 255, 255, 0.8);
}
/*
 Theme controls how everything looks in Gallery CSS.
*/

.gallery {
 position: relative;
}
.gallery .item {
 height: auto;
 overflow: hidden;
 text-align: center;
 background: #e9e9e8; /* BACKGROUND COLOR HERE */
}
.gallery .controls {
 position: absolute;
 bottom: 0;
 width: 100%;
 text-align: center;
}
.gallery .control-button {
 display: inline-block;
 margin: 0 .02em;
 font-size: 3em;
 text-align: center;
 text-decoration: none;
 -webkit-transition: color .1s;
 -o-transition: color .1s;
 transition: color .1s;
}
.hpfullwidth-top {
 background-color: #fff;
 background-repeat: repeat;
 padding-top: 150px;
}

@media (max-width:991px) {
.hpfullwidth-top {
 padding-top: 5px;
}
}
.imageholder {
 max-width: 1140px;
 margin: 0 auto;
}
/* -------------------------
End Header Slider */



/* Image Hover
---------------------------- */
.fade {
 opacity: 1;
 transition: opacity .5s ease-in-out;
 -moz-transition: opacity .5s ease-in-out;
 -webkit-transition: opacity .5s ease-in-out;
}
fade:hover {
 opacity: 0.5;
}
/* -------------------------
End Image Hover */
<!-- Start Body Content -->

<div class="fullwidthwrapper">
  <div class="gallery autoplay items-3">
    <div class="control-operator" id="item-1">&nbsp;</div>
    <div class="control-operator" id="item-2">&nbsp;</div>
    <div class="control-operator" id="item-3">&nbsp;</div>
    <figure class="item"><a href="/all/bogofreeboots.cat?source=BOGOFREEMonetateFullWidthViewAll&amp;icid=20161116_holiday">
      <picture>
        <source media="(min-width: 50em)" srcset="//deichmann.scene7.com/is/image/deichmann/BOGOFREEHOMESLIDER?wid=2000&amp;fmt=gif" width="100%" />
        <source media="(min-width: 0em)" srcset="//deichmann.scene7.com/is/image/deichmann/SLIDER1-MOBILE?wid=580&amp;fmt=gif" width="100%" />
        <!-- img tag for browsers that do not support picture element --> <img alt="Get More. Save More." src="//deichmann.scene7.com/is/image/deichmann/BOGOFREEHOMESLIDER?wid=2000&amp;fmt=gif" width="100%" /> </picture>
      </a></figure>
    <figure class="item"><a href="/womens/bogofreeboots.cat?source=BOGOFREEMonetateFullWidthShopWomens&amp;icid=20161116_holiday">
      <picture>
        <source media="(min-width: 50em)" srcset="//deichmann.scene7.com/is/image/deichmann/SLIDER2?wid=1500&amp;fmt=jpg" width="100%" />
        <source media="(min-width: 0em)" srcset="//deichmann.scene7.com/is/image/deichmann/SLIDER2-MOBILE?wid=580&amp;fmt=jpg" width="100%" />
        <!-- img tag for browsers that do not support picture element --> <img alt="Get More. Save More." src="//deichmann.scene7.com/is/image/deichmann/SLIDER2?wid=1500&amp;fmt=jpg" width="100%" /> </picture>
      </a></figure>
    <figure class="item"><a href="/mens/bogofreeboots.cat?source=BOGOFREEMonetateFullWidthShopMens&amp;icid=20161116_holiday">
      <picture>
        <source media="(min-width: 50em)" srcset="//deichmann.scene7.com/is/image/deichmann/SLIDER3?wid=1500&amp;fmt=jpg" width="100%" />
        <source media="(min-width: 0em)" srcset="//deichmann.scene7.com/is/image/deichmann/SLIDER3-MOBILE?wid=580&amp;fmt=jpg" width="100%" />
        <!-- img tag for browsers that do not support picture element --> <img alt="Get More. Save More." src="//deichmann.scene7.com/is/image/deichmann/SLIDER3?wid=1500&amp;fmt=jpg" width="100%" /> </picture>
      </a></figure>
    <div class="controls"><a class="control-button" href="#item-1">&bull;</a> <a class="control-button" href="#item-2">&bull;</a> <a class="control-button" href="#item-3">&bull;</a></div>
  </div>
</div>

<!-- End Body Content -->

Thanks!

adambwhitten
  • 106
  • 1
  • 14

1 Answers1

1

EDIT:

Here's the example: https://jsfiddle.net/oLajysar/2/

.items-3.autoplay .item {
    -webkit-animation: galleryAnimation-3 9s infinite;
    -o-animation: galleryAnimation-3 9s infinite;
    animation: galleryAnimation-3 9s infinite;
}

This is for the divided slide speed. The three speeds should be equal to this.

.items-3 .control-button:nth-of-type(1), .items-3 .item:nth-of-type(1) {
    -webkit-animation-delay: 0s;
    -o-animation-delay: 0s;
    animation-delay: 0s;
}
.items-3 .control-button:nth-of-type(2), .items-3 .item:nth-of-type(2) {
    -webkit-animation-delay: 3s;
    -o-animation-delay: 3s;
    animation-delay: 3s;
}
.items-3 .control-button:nth-of-type(3), .items-3 .item:nth-of-type(3) {
    -webkit-animation-delay: 6s;
    -o-animation-delay: 6s;
    animation-delay: 6s;
}

These are the delays for animation. So within the 9s time frame of our gallery,
we'll be showing each item at the set time we set our delay to.

First item will be shown at the 0 second mark,
Second item will be shown at the 3 second mark, and the
Third item will be shown at the 6 second mark.

We have an extra 3s for our gallery because our last (third) item needs time to be displayed.

.items-3.autoplay .control-button {
    -webkit-animation: controlAnimation-3 9s infinite;
    -o-animation: controlAnimation-3 9s infinite;
    animation: controlAnimation-3 9s infinite;
}

This is the delay of the item selector (the three dots at the bottom).
We want this in sync with our gallery so it'll mark the right item.

Ethan
  • 446
  • 3
  • 13
  • yeah but how do you get that math? -2, 2 and 6 isn't making any since on how we are getting to 12 haha. I think thats my issue. If someone could clarify? I updated my code hopefully it's a little cleaner now and stripped of un used styles. – adambwhitten Dec 08 '16 at 18:13
  • -2, -1, 0, 1, 2, 3, 4, 5, 6... is 9, my bad D: – Ethan Dec 09 '16 at 03:30
  • Oh, I remember why I had an extra 3 seconds. Edited my answer to explain better. – Ethan Dec 09 '16 at 03:57
  • This is perfect. Thank you for explaining how the delays work. Now that I see how it all equals up to 9 this makes a lot more sense to me. Do you happen to know the issue on why it doesn't continue to slide after you click one of the 3 dots? – adambwhitten Dec 09 '16 at 06:28
  • sorry forgot to tag you. – adambwhitten Dec 09 '16 at 06:28
  • Sorry for the late reply. I think we'll need JavaScript to [restart the CSS animations](https://css-tricks.com/restart-css-animation) on dot click. Not sure if it's possible with just CSS. – Ethan Dec 09 '16 at 07:50