Ankündigung

Einklappen
Keine Ankündigung bisher.

CSS-Slider ohne Duplizieren

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • CSS-Slider ohne Duplizieren

    Guten Abend,

    Ich habe einen Slider in CSS erstellt und keine Idee, wie ich das ohne Duplizieren des ersten DIV´s schaffe. Steht mir einer auf der Leitung?

    https://jsfiddle.net/zcg4f6b7/


  • #2
    Ich würde erstmals anstatt Ids, Css Klassen verweden, damit man mehrere Slider erstellen könnte. Hast Du mal nach "Css only sliders" gegooglet, da kommen etliche Beispiele. Vielleicht findest du da eine Lösung. Ansonsten, müsste ich mal selber einen machen, jedoch finde Sliders echt, unnötig, nicht Bentzerfreundlich und deshalb total überflüssig. Wer schaut den diese noch an?

    Kommentar


    • #3
      Zitat von strub Beitrag anzeigen
      Ich würde erstmals anstatt Ids, Css Klassen verweden, damit man mehrere Slider erstellen könnte. Hast Du mal nach "Css only sliders" gegooglet, da kommen etliche Beispiele. Vielleicht findest du da eine Lösung. Ansonsten, müsste ich mal selber einen machen, jedoch finde Sliders echt, unnötig, nicht Bentzerfreundlich und deshalb total überflüssig. Wer schaut den diese noch an?
      Auf der einen Seite willst du Klassen um mehrere Slider zu erstellen und einen Satz später bezeichnest du Slider als überflüssig.

      Ob Id oder Klasse ist für das Problem vollkommen unerheblich. Google ist auch kein Fremdwort für mich. Ebenso sind pure CSS Slider kein Fremdwort für mich. Das Problem ist ziemlich simpel. Die Geschichte soll responsiv sein. Damit das gelingt, muss ich immer als erstes ein Element gleicher Größe relativ positionieren. Sonst schiebt sich der folgende Inhalt nach einer absoluten Positionierung nach oben.

      Bisher ist keine Antwort gekommen, das war aber trotzdem besser als deine vollkommen überflüssige Antwort.

      Kommentar


      • #4
        Ich meinte es ja nur gut. Ich weiss ja nicht ob du dies schon gegooglet hast oder was auch immer. Aber dann antworte ich eben bei Dir nicht mehr, wenn du solche antworten zurückgibst. Dann habe ich echt besseres zu tun.

        Kommentar


        • #5
          Zitat von strub Beitrag anzeigen
          Ich meinte es ja nur gut. Ich weiss ja nicht ob du dies schon gegooglet hast oder was auch immer. Aber dann antworte ich eben bei Dir nicht mehr, wenn du solche antworten zurückgibst. Dann habe ich echt besseres zu tun.
          Das war nicht böse gemeint, wenn Du meine bisherigen Beiträge liest, wirst Du erkennen, dass ich im Thema bin. Ich habe schlicht und einfach überreagiert, dafür entschuldige ich mich.

          Kommentar


          • #6
            Kein Problem. Habe auch mal ein Versuch gewagt. Nur in Firefox getested.

            Code:
            <!DOCTYPE html>
            <html lang="de-CH">
            <head>
            <meta charset="UTF-8">
            <title>Slider</title>
            <style type="text/css">
            <!--
            html { box-sizing: border-box;}
            *, *:before, *:after { box-sizing: inherit;}
            
            .slider-container{
                width: 100%;
                overflow: hidden;
            }
            .slider{
                border: 1px solid blue;
                position: relative;
            }
            .slide{
                border: 1px solid red;
                float: left;
            }
            
            .slide-count-4 .slider{
                width: 400%;
                animation: slides-4 18s ease infinite;
            }
            .slide-count-4 .slide{
                width: 25%;
            }
            @-webkit-keyframes slides-4 {
              20% {margin-left: 0px;}
              30% {margin-left: -100%;}
              50% {margin-left: -100%;}
              60% {margin-left: -200%;}
              70% {margin-left: -200%;}
              80% {margin-left: -300%;}
              90% {margin-left: -300%;}
            }
            -->
            </style>
            
            </head>
            <body>
            
            <div class="slider-container slide-count-4">
                <div class="slider">
                    <div class="slide">
                        <h1>Lorem1</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque molestiae voluptatibus consequuntur aperiam minima iure repudiandae mollitia accusamus vel explicabo.</p>
                        <p>Info...</p>
                    </div>
                    <div class="slide">
                        <h1>Lorem2</h1>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                    </div>
                    <div class="slide">
                        <h1>Lorem 3</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque molestiae voluptatibus consequuntur aperiam minima iure repudiandae mollitia accusamus vel explicabo.</p>
                    </div>
                    <div class="slide">
                        <h1>Lorem 4</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque molestiae voluptatibus consequuntur aperiam minima iure repudiandae mollitia accusamus vel explicabo.</p>
                    </div>      
                </div>
            </div>
            
            
            </body>
            </html>

            Kommentar


            • #7
              Ich habe es nicht getestet. Der Code erinnert an Sisyphos. Der Stein ist gerade oben und rollt dann wieder nach unten wo es von vorne beginnt.

              Dieser Slider ist noch aus der Anfangszeit der CSS Animation und löst das Problem nicht. Mir geht es um die fortlaufende Animation Slide 1 -> Slide 2 -> Slide 3 -> Slide 1

              Bei deiner Lösung ist es so Slide1 -> Slide 2 -> Slide 3 -> Slide 4 >> Slide 3 >> Slide 2 >> SLide 1 -> Slide 2 ....

              Kommentar


              • #8
                Ja man müsste nur bei der letzten animation display: none; und die Animationlänge anpassen, dann hätte man den Rückwärtsgang nicht mehr sichtbar.

                Habe nochmals dein Beispiel angeschaut. Es würde warscheinlich klappen wenn man eine zweite animation für das erste Div machen würde. Mal ein Test, jedoch müsste man die Animationsdauer noch anpassen.

                Code:
                <!DOCTYPE html>
                <html lang="de-CH">
                <head>
                <meta charset="UTF-8">
                <title>Slider</title>
                <style type="text/css">
                <!--
                * {
                    font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
                    margin: 0px;
                    padding: 0px;
                    list-style-type: none;
                    font-size: 1em;
                    box-sizing: border-box;
                    text-decoration: none;
                }
                
                html {
                    height: 100%;
                    width: 100%;
                    scroll-behavior: smooth;
                }
                
                body {
                    position: relative;
                    background: white;
                    width: 80%;
                    max-width: 800px;
                    height: 100%;
                    margin-left: auto;
                    margin-right: auto;
                    margin-top: 20px;
                    font-size: 1em;
                }
                
                
                /* Short Slider */
                
                #fhwslider {
                    width: 100%;
                }
                
                #fhwslidercontainer div {
                    display: block;
                    width: 100%;
                    height: 300px;
                    background: black;
                    display: flex;
                    flex-direction: column;
                    flex-wrap: nowrap;
                    justify-content: center;
                    align-content: center;
                    align-items: center;
                }
                
                #fhwslidercontainer div p{
                padding:20px 10% 0 10%;
                    text-align: center;
                    color:white;
                    font-size:1em;
                }
                
                #fhwslidercontainer div p:last-child{
                    margin-top:1.5em;
                    padding:.25em 1em;
                    text-align: center;
                    border: 1px solid #666;
                    border-radius:5px;
                }
                #fhwslidercontainer div p:last-child:hover{
                    border: 1px solid #888;
                    cursor:pointer;
                }
                #fhwslidercontainer div h1{
                    font-size: 1.5em;
                    color:white;
                }
                
                #fhwslidercontainer {
                    position: relative;
                    overflow: hidden;
                }
                
                #fhwslidercontainer div:not(:first-child) {
                    position: absolute;
                    top: 0;
                    transform: translateX(-100%);
                    animation: meine-animation 12s ease-in-out 0s infinite;
                }
                
                #fhwslidercontainer div:nth-child(1) {
                    animation: meine-animation 12s ease-in-out 0s 1;
                }
                #fhwslidercontainer div:nth-child(1) {
                    animation: meine-animation-first 12s ease-in-out 0s infinite;
                    animation-delay: 12s;
                }
                
                
                #fhwslidercontainer div:nth-child(2) {
                    animation-delay: 4s;
                }
                
                #fhwslidercontainer div:nth-child(3) {
                    animation-delay: 8s;
                }
                
                #fhwslidercontainer div:nth-child(4) {
                    animation-delay: 12s;
                }
                
                @keyframes meine-animation {
                    0% {}
                    8.33333% {
                        transform: translateX(0);
                    }
                    33.3333337% {
                        transform: translateX(0);
                    }
                    41.6666667% {
                        transform: translateX(100%);
                    }
                    100% {
                        transform: translateX(100%);
                    }
                }
                @keyframes meine-animation-first {
                    0% {  transform: translateX(-100%);}
                    8.33333% {
                        transform: translateX(-100%);
                    }
                    33.3333337% {
                        transform: translateX(0);
                    }
                    41.3333337% {
                        transform: translateX(0);
                    }    
                    61.6666667% {
                        transform: translateX(100%);
                    }
                    100% {
                        transform: translateX(100%);
                    }
                }
                -->
                </style>
                
                </head>
                <body>
                
                <div id="fhwslider">
                        <div id="fhwslidercontainer">
                            <div>
                                <h1>Lorem1</h1>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque molestiae voluptatibus consequuntur aperiam minima iure repudiandae mollitia accusamus vel explicabo.</p>
                                <p>Info...</p>
                            </div>
                
                            <div>
                                <h1>Lorem 2</h1>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque molestiae voluptatibus consequuntur aperiam minima iure repudiandae mollitia accusamus vel explicabo.</p>
                                <p>Info...</p>
                            </div>
                            <div>
                                <h1>Lorem 3</h1>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque molestiae voluptatibus consequuntur aperiam minima iure repudiandae mollitia accusamus vel explicabo.</p>
                                <p>Info...</p>
                            </div>
                        </div>
                    </div>
                
                </body>
                </html>

                Denn eigentlich sieht es so nich schlecht aus, ausser dass beim letzen Slide der erste nicht "mitspielt". Deshalb das andere Beispiel (Test) oben, mit einer zusätzlichen Animation für den ersten Slider.

                Code:
                <!DOCTYPE html>
                <html lang="de-CH">
                <head>
                <meta charset="UTF-8">
                <title>Slider</title>
                <style type="text/css">
                <!--
                * {
                    font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
                    margin: 0px;
                    padding: 0px;
                    list-style-type: none;
                    font-size: 1em;
                    box-sizing: border-box;
                    text-decoration: none;
                }
                
                html {
                    height: 100%;
                    width: 100%;
                    scroll-behavior: smooth;
                }
                
                body {
                    position: relative;
                    background: white;
                    width: 80%;
                    max-width: 800px;
                    height: 100%;
                    margin-left: auto;
                    margin-right: auto;
                    margin-top: 20px;
                    font-size: 1em;
                }
                
                
                /* Short Slider */
                
                #fhwslider {
                    width: 100%;
                }
                
                #fhwslidercontainer div {
                    display: block;
                    width: 100%;
                    height: 300px;
                    background: black;
                    display: flex;
                    flex-direction: column;
                    flex-wrap: nowrap;
                    justify-content: center;
                    align-content: center;
                    align-items: center;
                }
                
                #fhwslidercontainer div p{
                padding:20px 10% 0 10%;
                    text-align: center;
                    color:white;
                    font-size:1em;
                }
                
                #fhwslidercontainer div p:last-child{
                    margin-top:1.5em;
                    padding:.25em 1em;
                    text-align: center;
                    border: 1px solid #666;
                    border-radius:5px;
                }
                #fhwslidercontainer div p:last-child:hover{
                    border: 1px solid #888;
                    cursor:pointer;
                }
                #fhwslidercontainer div h1{
                    font-size: 1.5em;
                    color:white;
                }
                
                #fhwslidercontainer {
                    position: relative;
                    overflow: hidden;
                }
                
                #fhwslidercontainer div:not(:first-child) {
                    position: absolute;
                    top: 0;
                    transform: translateX(-100%);
                    animation: meine-animation 24s ease-in-out 0s infinite;
                }
                
                #fhwslidercontainer div:nth-child(1) {
                    animation: meine-animation 24s ease-in-out 0s 1;
                }
                
                #fhwslidercontainer div:nth-child(2) {
                    animation-delay: 8s;
                }
                
                #fhwslidercontainer div:nth-child(3) {
                    animation-delay: 16s;
                }
                
                #fhwslidercontainer div:nth-child(4) {
                    animation-delay: 24s;
                }
                
                @keyframes meine-animation {
                    0% {}
                    8.33333% {
                        transform: translateX(0);
                    }
                    33.3333337% {
                        transform: translateX(0);
                    }
                    41.6666667% {
                        transform: translateX(100%);
                    }
                    100% {
                        transform: translateX(100%);
                    }
                }
                -->
                </style>
                
                </head>
                <body>
                
                <div id="fhwslider">
                        <div id="fhwslidercontainer">
                            <div>
                                <h1>Lorem1</h1>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque molestiae voluptatibus consequuntur aperiam minima iure repudiandae mollitia accusamus vel explicabo.</p>
                                <p>Info...</p>
                            </div>
                
                            <div>
                                <h1>Lorem 2</h1>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque molestiae voluptatibus consequuntur aperiam minima iure repudiandae mollitia accusamus vel explicabo.</p>
                                <p>Info...</p>
                            </div>
                            <div>
                                <h1>Lorem 3</h1>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque molestiae voluptatibus consequuntur aperiam minima iure repudiandae mollitia accusamus vel explicabo.</p>
                                <p>Info...</p>
                            </div>
                        </div>
                    </div>
                
                </body>
                </html>

                Kommentar


                • #9
                  Dein erster Slider als fiddle:

                  https://jsfiddle.net/5s79cuam/

                  Der 2. Slider als fiddle

                  https://jsfiddle.net/5s79cuam/1/

                  Ich denke, dass du das Problem erkannt hast und vermute, dass es tatsächlich nur mit der Duplizierung eines Div´s funktioniert.

                  Kommentar


                  • #10
                    Ok ich glaube ich habe die Lösung. Man setzt alle Slides transform: translateX(-100%);

                    Dannach benutzt man einen negativen delay für den ersten Slide.

                    Code:
                    <!DOCTYPE html>
                    <html lang="de-CH">
                    <head>
                    <meta charset="UTF-8">
                    <title>Slider</title>
                    <style type="text/css">
                    <!--
                    html { box-sizing: border-box;}
                    *, *:before, *:after { box-sizing: inherit;}
                    
                    
                    .slider{
                        border: 1px solid blue;
                        position: relative;
                    }
                    .slide{
                        border: 1px solid red;
                        width: 100%;
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        transform: translateX(-100%);
                        animation: sliding 24s ease-in-out 0s infinite;    
                    }
                    
                    .slider .slide:nth-child(1) {
                        animation-delay: -4s;
                    }
                    
                    .slider .slide:nth-child(2) {
                        animation-delay: 4s;
                    }
                    
                    .slider .slide:nth-child(3) {
                        animation-delay: 12s;
                    }
                    
                    .slider .slide:nth-child(4) {
                        animation-delay: 16s;
                    }
                    
                    @keyframes sliding {
                        0% {}
                        8.33333% {
                            transform: translateX(0);
                        }
                        33.3333337% {
                            transform: translateX(0);
                        }
                        41.6666667% {
                            transform: translateX(100%);
                        }
                        100% {
                            transform: translateX(100%);
                        }
                    }
                    
                    -->
                    </style>
                    
                    </head>
                    <body>
                    
                    
                    <div class="slider">
                        <div class="slide">
                            <h1>Lorem1</h1>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque molestiae voluptatibus consequuntur aperiam minima iure repudiandae mollitia accusamus vel explicabo.</p>
                            <p>Info...</p>
                        </div>
                        <div class="slide">
                            <h1>Lorem2</h1>
                            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                        </div>
                        <div class="slide">
                            <h1>Lorem 3</h1>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque molestiae voluptatibus consequuntur aperiam minima iure repudiandae mollitia accusamus vel explicabo.</p>
                        </div>      
                    </div>
                    
                    
                    
                    </body>
                    </html>
                    Natürlich ist der Slider noch nicht perfekt, es zeigt lediglich die Lösung mit dem negativen delay.

                    Kommentar


                    • #11
                      Das sieht schon gut aus. Hatte ich auch schon probiert. Der Nachteil ist, dass durch die absolute Positionierung nachfolgende Elemente nach oben verschoben werden. Man müsste dem Container eine Höhe geben, was natürlich bei Bildern aus responsiver Sicht zu Problemen führt. Der erste slide muss daher relativ bleiben. Was aber grundsätzlich auch gehen müsste.Ich teste das mal durch, vielen Dank erstmal - gehe nächste Woche nochmal ran und poste die endgültige Version

                      Kommentar


                      • #12
                        Vielleicht hilft dir das weiter https://codepen.io/dudleystorey/pen/ehKpi

                        Kommentar


                        • #13
                          Stimmt das erste Element müsste relative sein schon nur wenn das Eltern element ein overflow:hidden hat, welches es auch braucht. Der Nachteil ist jedoch, dass das erste Element, däs höchste sein müsste.

                          Das Beispiel von Protestix ist ähnlich wie mein erstes Beispiel, wo ja mit Floats gearbeitet wird. Vielleicht is diese Lösung doch die Bessere?

                          Kommentar


                          • #14
                            protestix bei dieser Lösung wird das erste Bild auch als letztes Bild eingesetzt. Also wie in #1 div kopieren.

                            Die Lösung von Strub mit dem negativen delay ist gut, solange das erste DIV das höchste ist. Dann muss es halt das höchste sein. Per JS und resize listener ist´s zwar auch möglich. Hier sieht es aber bei der noscript Fraktion düster aus. Bis mir nichts besseres einfällt, wird das erste Div das höchste. Bei Bildern ist es die Lösung.

                            Kommentar


                            • #15
                              Habe noch was versucht und scheint auch zu funktionieren. Und zwar mit dem Css Grid. Mann könnte falls Grid vom Browser nicht unterstützt wird, mit position:absolute wieder als Fallback verwenden.
                              Hier mal das Beispiel:

                              Code:
                              <!DOCTYPE html>
                              <html lang="de-CH">
                              <head>
                              <meta charset="UTF-8">
                              <title>Slider</title>
                              <style type="text/css">
                              <!--
                              html { box-sizing: border-box;}
                              *, *:before, *:after { box-sizing: inherit;}
                              .content-l{ margin: 0 auto; max-width: 1400px;}
                              
                              /* Slider logic */
                              .slider{
                                  border: 1px solid blue;
                                  display: grid;
                                  grid-template-columns: 1fr;
                                  grid-template-rows: repeat(3, 1fr);
                                  overflow: hidden;
                              }
                              .slide{
                                  align-self: center;
                                  grid-column: 1;
                                  grid-row: 1 / span 3;    
                                  border: 1px solid red;
                                  width: 100%;
                                  transform: translateX(-100%);
                                  animation: sliding 24s ease-in-out 0s infinite;    
                              }
                              
                              .slider .slide:nth-child(1) {
                                  animation-delay: -4s;  
                              }
                              
                              .slider .slide:nth-child(2) {
                                  animation-delay: 4s;
                              }
                              
                              .slider .slide:nth-child(3) {
                                  animation-delay: 12s;
                              }
                              
                              .slider .slide:nth-child(4) {
                                  animation-delay: 16s;
                              }
                              
                              @keyframes sliding {
                                  0% {}
                                  8.33333% {
                                      transform: translateX(0);
                                  }
                                  33.3333337% {
                                      transform: translateX(0);
                                  }
                                  41.6666667% {
                                      transform: translateX(100%);
                                  }
                                  100% {
                                      transform: translateX(100%);
                                  }
                              }
                              
                              /* Slider layout */
                              -->
                              </style>
                              
                              </head>
                              <body>
                              
                              <div class="content-l">
                              
                                  <div class="slider">
                                      <div class="slide">
                                          <h1>Lorem1</h1>
                                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque molestiae voluptatibus consequuntur aperiam minima iure repudiandae mollitia accusamus vel explicabo.</p>
                                          <p>Info...</p>
                                      </div>
                                      <div class="slide">
                                          <h1>Lorem2</h1>
                                          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                                      </div>
                                      <div class="slide">
                                          <h1>Lorem 3</h1>
                                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque molestiae voluptatibus consequuntur aperiam minima iure repudiandae mollitia accusamus vel explicabo.</p>
                                      </div>      
                                  </div>
                              
                              </div>
                              
                              
                              </body>
                              </html>

                              Kommentar

                              Lädt...
                              X