Infinite autoplay carousel - Element einbinden

20.02.2019 19:42 (zuletzt bearbeitet: 24.02.2019 12:24)

WR#84
#1

WR

Hallo, kann mir jemand bitte eine Abfolge der Schritte machen, um dieses Element auf meiner Seite zu integrieren?

https://codepen.io/jackoliver/pen/qVbQqW

Mein bisheriger Versuch:
1. HTML Code über das Widget eingeben:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
<div class="slider">
    <div class="slide-track">
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
        </div>
 
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/2.png" height="100" width="250" alt="" />
        </div>
 
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/3.png" height="100" width="250" alt="" />
        </div>
 
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/4.png" height="100" width="250" alt="" />
        </div>
 
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/5.png" height="100" width="250" alt="" />
        </div>
 
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/6.png" height="100" width="250" alt="" />
        </div>
 
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/7.png" height="100" width="250" alt="" />
        </div>
 
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/1.png" height="100" width="250" alt="" />
        </div>
 
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/2.png" height="100" width="250" alt="" />
        </div>
 
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/3.png" height="100" width="250" alt="" />
        </div>
 
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/4.png" height="100" width="250" alt="" />
        </div>
 
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/5.png" height="100" width="250" alt="" />
        </div>
 
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/6.png" height="100" width="250" alt="" />
        </div>
 
        <div class="slide">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/7.png" height="100" width="250" alt="" />
        </div>
    </div>
</div>
 

2. CSS in den Head einarbeiten:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
<style type="text/css">
/*<![CDATA[*/
body {
        align-items: center;
        background: #E3E3E3;
        display: flex;
        height: 100vh;
        justify-content: center;
}
 
@mixin white-gradient {
        background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
}
 
$animationSpeed: 40s;
 
// Animation
@keyframes scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-250px * 7))}
}
 

// Styling
.slider {
        background: white;
        box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);
        height: 100px;
        margin: auto;
        overflow:hidden;
        position: relative;
        width: 960px;
        
        &::before,
        &::after {
                @include white-gradient;
                content: "";
                height: 100px;
                position: absolute;
                width: 200px;
                z-index: 2;
        }
        
        &::after {
                right: 0;
                top: 0;
                transform: rotateZ(180deg);
        }
 
        &::before {
                left: 0;
                top: 0;
        }
        
        .slide-track {
                animation: scroll $animationSpeed linear infinite;
                display: flex;
                width: calc(250px * 14);
        }
        
        .slide {
                height: 100px;
                width: 250px;
        }
}
/*]]>*/
</style>
 
 

Antworten

Beitrag melden

#2

22.02.2019 11:14

TiJo
#2

Ti

TiJo

eine genaue Fehlerbeschreibung + die URL wäre hilfreich

Antworten

Beitrag melden

#3

22.02.2019 21:52 (zuletzt bearbeitet: 22.02.2019 21:54)

az_
#3

az_

https://stackoverflow.com/questions/2676...re-after-in-css

Zitat
You can't use the ampersand in a .css file, as it has no meaning, you can only use it in sass/scss files that are compiled to CSS using a SASS pre-processor.

LG, az

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html

Antworten

Beitrag melden

#4

22.02.2019 23:34

WR#84
#4

WR

WR#84

Dank AZ. Habe den Code jetzt in CSS umwandeln lassen. Da gab es aber schon das nächste Problem: Das Tool läuft, aber die Seite verschluckt jetzt den Header...

https://www.vandals-football.de/testseite/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
<style type="text/css">
/*<![CDATA[*/
body {
  align-items: center;
  background: #E3E3E3;
  display: flex;
  height: 100vh;
  justify-content: center;
}
 
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7));
  }
}
.slider {
  background: white;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
  height: 100px;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 960px;
}
.slider::before, .slider::after {
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 100px;
  position: absolute;
  width: 200px;
  z-index: 2;
}
.slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.slider::before {
  left: 0;
  top: 0;
}
.slider .slide-track {
  animation: scroll 40s linear infinite;
  display: flex;
  width: calc(250px * 14);
}
.slider .slide {
  height: 100px;
  width: 250px;
}
/*]]>*/
</style>
 

Antworten

Beitrag melden

#5

24.02.2019 11:44 (zuletzt bearbeitet: 24.02.2019 11:46)

az_
#5

az_

...nimm bei body alle Einträge (...bis auf die HG-Farbe) raus!

LG, az

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html