DE - Allgemein • Slideshow only HTML/CSS

22.06.2012, 14:11 - Marceld - webSPELL friend - 617 Posts
hallo ich wollte mir selber eine slideshow bauen nur basierend auf html und CSS...

eigentlich funktioniert sie auch bis auf das mir statt 4 bilder in der show nur 2 angezeigt werden beziehungsweise nur zwischen 2 hin und her geswitcht wird....
würde aber gerne noch mehr bilder einbauen....

könnte mir jemand bei der lösung des problems helfen sollte der code dann einwand frei funktionieren darf der helfer ihn natürlich selber gern auch verwenden würde ihn hier auch gern freeware mäßig anbieten.

[toggle=HTML-code]
Code:
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.
<!doctype html>
<link rel=stylesheet href=stylesheet.css>


<div id="angebote">
                 <div class="skip">
                 <a pfeil=l href=#1><img src="pfeil_zurueck.jpg" width="20" height="30" border="0" /></a>
                    <a pfeil=l href=#2></a>
                    <a pfeil=l href=#3></a>
           </div>
          <div class="slideshow">
              <div class="show_ueberschrift"><h1>Slideshow</h1></div>
                <div class="show_bilder">
                       <span id=1>
                    <span id=2>
                    <span id=3>
                   <span id=4>

                    <a data-paginate href=#1></a>
                    <a data-paginate href=#2></a>
                    <a data-paginate href=#3></a>
                    <a data-paginate href=#4></a>

                    <span>
                    <img src=1.jpg>
                    <img src=2.jpg>
                    <img src=3.jpg>
                    <img src=4.jpg>
                    </span>

                    </span>
                    </span>
                    </span>
                    </span>
                </div>
                
          </div>
          <div class="skip">
               <a pfeil=r href=#2><img src="pfeil_vor.jpg" width="20" height="30" border="0" /></a>
               <a pfeil=r href=#3></a>
               <a pfeil=r href=#4></a>
          </div>
           </div>
[/toggle]

[toggle=CSS-code lesen]
Code:
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.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
@charset "UTF-8";
/* CSS Document */

/************* STYLES *************/

h1      { margin-top:0px; font-family: Verdana, Geneva, sans-serif; color:#590f21; font-size:18px; font-weight:bold;}

/************* SLIDESHOW BOX *************/
     
#angebote{
     float:left;
     width:2680px;
     margin-top:30px;
     margin-bottom:30px;
     }

.slideshow{
     float:left;
     width:660px;
     }
     
.show_ueberschrift{
     width:660px;
     padding-left:40px;
     }
     
.show_bilder{
     float:left;
     width:660px;
     }

.skip{
     float:left;
     width:20px;
     padding-top:160px;     
     }
     
/************* Slideshow GROSS *************/

[id="1"] {
  overflow:hidden;
  position:absolute;
  width:660px;
  height:270px;
}


[id="1"]:target *+span {
  -webkit-transform:translate3d(0,0,0);
  -moz-transform:translateX(0);
}
[id="2"]:target *+span {
  -webkit-transform:translate3d(-660px,0,0);
  -moz-transform:translateX(-25%);
}
[id="3"]:target *+span {
  -webkit-transform:translate3d(-1320px,0,0);
  -moz-transform:translateX(-50%);
}
[id="4"]:target *+span {
  -webkit-transform:translate3d(-1980px,0,0);
  -moz-transform:translateX(-75%);
}


[pfeil] {
  top:200px;
  width:20px;
  height:30px;
  visibility: visible;
}
[pfeil]:active {
  -webkit-transform:translateY(1px);
  -moz-transform:translateY(1px);
}
[pfeil="l"] {
       float:left;
     width:20px;
     background-repeat:no-repeat;
     }
     
[pfeil="r"] {
      float:left;
     width:20px;
     background-repeat:no-repeat;
     }

[id="1"]:target [pfeil="r"][href$="2"],
[id="2"]:target [pfeil="l"][href$="1"],
[id="2"]:target [pfeil="r"][href$="3"],
[id="3"]:target [pfeil="l"][href$="2"],
[id="3"]:target [pfeil="r"][href$="4"],
[id="4"]:target [pfeil="l"][href$="3"] 

{
  visibility:visible;
}

*+span {
  display:block;
  width:2640px;
  -webkit-transition:-webkit-transform 1s cubic-bezier(0,0,.2,1);
  -moz-transition:-moz-transform 1s cubic-bezier(0,0,.2,1);
}
img {
  float:left;
}

/************* SLIDESHOW GROSS *************/

[id="1"] {
  overflow:hidden;
  position:absolute;
  width:660px;
  height:270px;
}


[id="1"]:target *+span {
  -webkit-transform:translate3d(0,0,0);
  -moz-transform:translateX(0);
}
[id="2"]:target *+span {
  -webkit-transform:translate3d(-660px,0,0);
  -moz-transform:translateX(-25%);
}
[id="3"]:target *+span {
  -webkit-transform:translate3d(-1320px,0,0);
  -moz-transform:translateX(-50%);
}
[id="4"]:target *+span {
  -webkit-transform:translate3d(-1980px,0,0);
  -moz-transform:translateX(-75%);
}


[pfeil] {
  top:200px;
  width:20px;
  height:30px;
  visibility: visible;
}
[pfeil]:active {
  -webkit-transform:translateY(1px);
  -moz-transform:translateY(1px);
}
[pfeil="l"] {
       float:left;
     width:20px;
     background-repeat:no-repeat;
     }
     
[pfeil="r"] {
      float:left;
     width:20px;
     background-repeat:no-repeat;
     }

[id="1"]:target [pfeil="r"][href$="2"],
[id="2"]:target [pfeil="l"][href$="1"],
[id="2"]:target [pfeil="r"][href$="3"],
[id="3"]:target [pfeil="l"][href$="2"],
[id="3"]:target [pfeil="r"][href$="4"],
[id="4"]:target [pfeil="l"][href$="3"] 

{
  visibility:visible;
}

*+span {
  display:block;
  width:2640px;
  -webkit-transition:-webkit-transform 1s cubic-bezier(0,0,.2,1);
  -moz-transition:-moz-transform 1s cubic-bezier(0,0,.2,1);
}
img {
  float:left;
}
[/toggle]

www.Marcel-Draeger.de | [url=http://www.facebook.com/pages/Marcel-Draeger/150774091653181]"Facebook"[/url] | [url=https://twitter.com/Marceldraeger]"Twitter" [/url] ------------------------------------------------- Kreativität überzeugt durch gute Idee
 
24.06.2012, 09:06 - Marceld - webSPELL friend - 617 Posts
./push für immer noch hilfesuchend.... unglücklich

www.Marcel-Draeger.de | [url=http://www.facebook.com/pages/Marcel-Draeger/150774091653181]"Facebook"[/url] | [url=https://twitter.com/Marceldraeger]"Twitter" [/url] ------------------------------------------------- Kreativität überzeugt durch gute Idee
 
24.06.2012, 09:45 - he1OO - webSPELL user - 378 Posts
Hi,

Also vorab find ich die Lösung mal garnet so schlecht aber in zeiten wo noch uralt Browsers herrumlaufen zwecklos.
Dein Code kann fast von keinem Browser richtig dargestellt werden oder auch alles übernommen werden.

Ein beispiel mit Opera gehen 3 von 4. FF kann nur 2 von 4.
Liegt also eher an deinem Browser als an deinem Code.

Ebenfalls finde ich so einen umweg zu machen obwohl man es mit z.B. jQuery in 4 Zeilen schreiben kann eigenltich zwecklos.

Aber such hier im Forum (habs jetzt selber net gefunden weil die Suche mist ist auch wenn alle das gegenteil behaupten zwinkern ) nach einen Drop down CSS Tut. Ist erst in den letzten Wochen gepostet worden.

Der erklärt dir wie du divs usw. ein und ausblenden kannst mit CSS und auch in allen Browsern gefunden wird.
Hier sein YouTube Video dazu. http://www.youtube.com/watch?v=j_i2fYtUNpM

Mit dieser Technik kannst du dir auch einen Slider mit CSS machen. Zumindest mit ein und ausfaiden.
Wenn du eine Bewegungs movie mit css machen willst gibts sogar für das ein Tutorial auf Youtube (Achtung der einzige Browser der das halbwegs flüssig hinbekommt ist der IE).

Aber hoffe konnte dir bissi weiterhelfen.

mfg he

PS
schöne Webseite leider hat sie ein paar Fehler. Lightbox rechts der abschluss zwinkern Und noch ein paar kleinigkeiten die ich mir gestern net gemerkt habe lächeln

mfg

[center]Rechtschreibfehler sind gewollt und zur allgemeinen Belustigung da HaVe FuN[/center] --- Support gebe ich auch ohne Homepage-Link, ohne Geld und ohne das ich mich über Rechtschreibung oder Art der Ausdrucksform Aufrege.
 
25.06.2012, 09:15 - Marceld - webSPELL friend - 617 Posts
guten morgen,...

ja danke erstmal das doch noch wer nen tip parat hatte und danke fürs kompliment!
ja paar unstimmigkeiten muss ich da noch ausbügeln....

und bin für jeden tip dankbar!
ich muss mal schauen wie mir das tut da hilft und ich den tip aufnehmen kann.....

Lösung werd ich natürlich dann hier posten!

thx und lg
marcel

www.Marcel-Draeger.de | [url=http://www.facebook.com/pages/Marcel-Draeger/150774091653181]"Facebook"[/url] | [url=https://twitter.com/Marceldraeger]"Twitter" [/url] ------------------------------------------------- Kreativität überzeugt durch gute Idee