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

Antworten

Beitrag melden

Forenspende

Spenden über PayPal

Ein Forum zu betreiben, erfordert ein hohes Maß an Zeit, Kraft und Aufmerksamkeit.

Das Team von Jimdo-Forum arbeitet hinter den Kulissen sehr engagiert daran,
die erforderlichen Aufgaben zu erfüllen, um dir und den
anderen Forenmitgliedern ein tolles Forenerlebnis zu ermöglichen.

Wir freuen uns, dass du dich dazu entschlossen hast, unser Forum mit deiner Spende zu unterstützen!

...hier ist der direkte Spendenlink
für unsere Kaffeekasse!

Xobor-Forum für Jimdo-Creator User

Private Nachrichten:

Einstellungen:

Sonstiges:

Bitte geben Sie einen Grund für die Verwarnung an