• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Christian_01

Mitglied
Hallo Leute,

ich habe ein kleines Problem in meinem Slider. Die Bilder werden geladen und von rechts nach links hinein "geslidet". Dabei ist das Bilder erst ganz groß und dann ganz klein (die Größe die ich haben möchte). Ich weiß nicht genau wonach ich googlen soll und auch nicht wie ich dabei vorgehen soll. Ich habe schon viele ausprobiert, bin aber noch nicht auf die Lösung gekommen.

Ich hoffe ihr könnt mir weiterhelfen.

Gruß Christian

Code:
        <div class="col-lg-6" id="Aktion_Slider">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

              <!-- Verpackung für die Elemente -->
              <div class="carousel-inner" id="box" role="listbox">
              
                  <div class="item active slider1"  >
                     <img class="image" src="GPIO-Pi%203.png" alt="slider1" width="60%">
                     <div class="overlay">
                        <h2 class="Zoom "><i class="material-icons" style="font-size: 90%;">zoom_in</i>Vergrößern</h2>
                      </div>
                    </div>
              

                <div class="item slider1">
                  <img  class="image" src="GPIO-Pi%203.png" alt="slider2" width="60%">
                <div class="overlay">
                        <h2 class="Zoom "><i class="material-icons" style="font-size: 90%;">zoom_in</i>Vergrößern</h2>
                </div>

                </div>
          
            </div>
        </div>     
    </div>

Code:
#Aktion_Slider {

}

#carousel-example-generic{
    width: 100%;
    margin-top: 0%;
    margin-left: 0%;
    height: 100%;
}

#box{
    width: 60%;
    margin-left: 20%;
    margin-top: 10%;
    height: auto;

}

.slider1{
    width: 60%;
    height: 100%;
    position: relative;
    margin-left: 20%;

}

.slider1>.image{
    display: block;
    height: auto;
    width: 100%;
    border: 0px solid black;
    border-radius: 0.5em;

}

.overlay{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: rgba(35, 36, 38, 0.5);
    border-radius: 0.5em;
}

.slider1:hover .overlay{
    opacity: 1;
    cursor: pointer;
}
.Zoom{
    color: white;
    width: 100%;
    height: 12%;
    text-align: center;
    position: absolute;
    margin-top: 65%;
    margin-left: 0%;
    transform: translatescale(-50%, -50%);
}
 

Anhänge

  • Slideshow.gif
    Slideshow.gif
    474,5 KB · Aufrufe: 13
Werbung:
Werbung:
Sieht man das im GIF nicht? Wenn der rüber slided dann ist das Bild erst richtig groß und dann springt das erst auf die richtige größe...das ist für einen ganz kurzen Moment nur so...1/10 sekunde oder soo...

Jetzt möchte ich gerne wissen woran das liegt...
 
aaah okay jetzt hab ichs verstanden. Öhm ja ich guck mal.

Wie weit hast du den Slider denn von der Vorlage verändert?
Was hast du genau verändert?
 
Werbung:
hab ein paar Sachen raus gelöscht...titel, Beschreibung, die kleinen punkte usw.
Den Slider habe ich neben einer Beschreibung gesetzt, der Termine durchblättert um zu zeigen das es mehrere gibt. Man kann das slieder auch noch groß machen und selbstständig von Bild zu Bild sliden. Deshalb hab ich TItel, Beschreibung usw. weg gemacht.
Ich habe dazu Bootstrap als Vorlage verwendet ----> http://holdirbootstrap.de/javascript/#carousel

Mein Code kannst du oben sehen im ersten Post sehen.
 
Gut ich hab's:
HTML:
.carousel-inner > .item.next.left,
.carousel-inner > .item.prev.right,
.carousel-inner > .item.active {
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
ist der übeltäter.
Entferne mal
Code:
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
und guck was passiert

Ich frage mich nur wieso, weil translate3d(0,0,0) ja das Bild weder auf der "x" noch auf der "y" oder "z" Achse bewegt...

@Tronjer irgendwelche Vorschläge?
 
Zuletzt bearbeitet:
Werbung:
Werbung:
Zurück
Oben