Infinite autoplay carousel - Element einbinden

Jimdo-Userforum � Jimdo User-Forum � Jimdo-Specials (Tools, Widgets, HTML und CSS) � Infinite autoplay carousel - Element einbinden

Themen-Einstellungen

Thema drucken

Bereich wechseln

Allgemeines Regeln f�r die Benutzung des Forums HowToDo ( = so geht�s) Jimdo User-Forum Eure Jimdo-Webseiten - Vorstellungsrunde Bugs, Workarounds und Anregungen Jimdo-Elemente Allgemeines Jimdo-Shop Jimdo-Specials (Tools, Widgets, HTML und CSS) Suchmaschinenoptimierung (SEO) Sonstiges Tutorials "OffTopic"-Themen "�bernahme" von Beitr�gen aus dem offiziellen Jimdo-Forum... Nutzungsbedingungen und Haftungsausschluss Jimdo-Blog

#1 | Infinite autoplay carousel - Element einbinden datum

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

WR#84

Informationen anzeigen

Beitr�ge:	5
Registriert seit:	21.10.2018

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

#2 | RE: Element einbinden datum

22.02.2019 11:14

eine genaue Fehlerbeschreibung + die URL wäre hilfreich

Antworten

#3 | RE: Element einbinden datum

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

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 immer mit der Schaltfläche für "Code" einkapseln!!! (=

)

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

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

...NEU!!! - hier könnt Ihr unser Userforum finanziell unterstützen: https://redesign-berlin.xobor.de/donations.html

Antworten

#4 | RE: Element einbinden datum

22.02.2019 23:34

WR#84

Informationen anzeigen

Beitr�ge:	5
Registriert seit:	21.10.2018

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

#5 | RE: Element einbinden datum

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

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

LG, az

Achtung: Code im Forum bitte immer mit der Schaltfläche für "Code" einkapseln!!! (=

Antworten

REST-API � � seiten "hüpfen" beim abrufen

�hnliche Themen

Antworten

Letzter Beitrag

Limite Anzahl Elemente pro Unterseite erhöhen
Erstellt im Forum Jimdo-Elemente von JeremySteig 1 01.12.2023 12:01
az_ • Zugriffe: 181
Plugin? - Bilder mit Veränderung Bewertung auf Website einbinden
Erstellt im Forum Jimdo-Specials (Tools, Widgets, HTML und CSS) von Little Bird 2 14.12.2020 15:35
Little Bird • Zugriffe: 579
Besucherzähler in Webseite einbinden
Erstellt im Forum Allgemeines von fotograph 4 19.11.2020 16:11
albenita • Zugriffe: 1814
BigCartel Online Shop in Jimdopage einbinden ?
Erstellt im Forum Jimdo-Elemente von Juna La 3 18.12.2017 12:06
az_ • Zugriffe: 1542
Animiertes SVG einbinden
Erstellt im Forum Jimdo-Elemente von HugoBeck 4 03.07.2023 18:47
az_ • Zugriffe: 2210
360° Panoramabild in Jimdo einbinden
Erstellt im Forum Jimdo-Specials (Tools, Widgets, HTML und CSS) von O.F 1 22.04.2017 11:40
az_ • Zugriffe: 1635
Disqus einbinden
Erstellt im Forum Jimdo-Specials (Tools, Widgets, HTML und CSS) von Nico 1 10.01.2017 11:39
az_ • Zugriffe: 663
Einbindung 360° Panoramabild
Erstellt im Forum Jimdo-Elemente von Uwe918 8 23.11.2020 18:10
az_ • Zugriffe: 6055
CSS in die Jimdo-Seite einbinden
Erstellt im Forum Jimdo-Specials (Tools, Widgets, HTML und CSS) von tschud61 50 13.02.2019 18:23
az_ • Zugriffe: 6287

Xobor-Forum f�r Jimdo-Creator User

Bitte geben Sie einen Grund f�r die Verwarnung an