Wie mache ich diesen Slider schneller?

Ich versuche, diesen Bild-Slider schneller zu machen. Es scheint auch ein Problem zu geben, wenn Sie auf die Optionsfelder klicken, um zur nächsten Folie zu wechseln. Die Autoplay-Funktion scheint alle zusammen anzuhalten.Wie mache ich diesen Slider schneller?

Ich kann sehen, dass es Web-Kit Keyframes gibt, aber ich habe sie noch nie verwendet oder sogar aus der Ferne zu tun, um es einwandfrei funktionieren zu lassen. Ich habe diesen Code von einer freien Quelle genommen, die ich gefunden habe. Ich bin mir sicher, dass es einige unnötige Stile gibt. Aber irgendwelche Vorschläge sind sehr gut apperiviert.

Irgendwelche Ideen?

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

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

 
/* Tablet */ 
 
@media (min-width:30em) and (max-width:50em) { 
 
.bit-10, .bit-12, .bit-4, .bit-6, .bit-8 { 
 
\t width: 50%; 
 
} 
 
.bit-1, .bit-11, .bit-3, .bit-5, .bit-7, .bit-9 { 
 
\t 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 { 
 
\t width: 100%; 
 
} 
 
} 
 
/* ------------------------- 
 
End OBSW Grid System */ 
 

 

 

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

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

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

 

 

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

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

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

 

 

 
/* Image Hover 
 
---------------------------- */ 
 
.fade { 
 
\t opacity: 1; 
 
\t transition: opacity .5s ease-in-out; 
 
\t -moz-transition: opacity .5s ease-in-out; 
 
\t -webkit-transition: opacity .5s ease-in-out; 
 
} 
 
fade:hover { 
 
\t 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 -->

Dank!

Quelle

2016-12-08 adambwhitten

EDIT:

Hier ist das Beispiel: 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; 
}

Dies ist für die geteilte Gleitgeschwindigkeits. Die drei Geschwindigkeiten sollten gleich sein.

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

Dies sind die Verzögerungen für die Animation. So werden wir innerhalb des 9s Zeitrahmens unserer Galerie,
jeden Artikel zur festgelegten Zeit zeigen, auf die wir unsere Verzögerung einstellen.

Erster Punkt wird in der 0-Sekunden-Marke angezeigt,
Zweites Element wird in der 3-Sekunden-Marke gezeigt werden, und das
dritte Element wird an der 6-Sekunden-Marke angezeigt.

Wir haben extra 3s für unsere Galerie, weil unser letzter (dritter) Artikel Zeit benötigt, um angezeigt zu werden.

Dies ist die Verzögerung des Elementselektors (die drei Punkte am unteren Rand).
Wir wollen dies in Übereinstimmung mit unserer Galerie, so wird es das richtige Element markieren.

Quelle

2016-12-08 08:10:48 Ethan

Ja, aber wie bekommen Sie diese Mathe? -2, 2 und 6 machen seither keine Ahnung wie wir zu 12 haha kommen. Ich denke, das ist mein Problem. Wenn jemand klären könnte? Ich habe meinen Code aktualisiert, hoffentlich ist er jetzt ein wenig sauberer und von unbenutzten Stilen befreit. – adambwhitten

-2, -1, 0, 1, 2, 3, 4, 5, 6 ... ist 9, meine schlechte D: – Ethan

Oh, ich erinnere mich, warum ich extra 3 Sekunden hatte. Bearbeitete meine Antwort, um besser zu erklären. – Ethan

Wie mache ich diesen Slider schneller?

Antwort

Verwandte Themen