CODEWITHSUNDEEP
htmlcsssliderresponsive
adambwhitten
adambwhitten

Reputation: 116

How do I make this slider go faster?

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!

Upvotes: 1

Views: 107

Answers (1)

Ethan
Ethan

Reputation: 446

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.

Upvotes: 1

Related Questions