Zoom im Slider

[Christian_01]

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

Spoiler: HTML-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>

Spoiler: CSS-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%);
}

 

[Christian_01]

Tut mir leid es nicht erwähnt zu haben....den Slider habe ich via Bootstrap realisiert.

http://holdirbootstrap.de/javascript/#carousel

 

[Christian_01]

Ich würde mich über eure Hilfe sehr freuen, da das Problem immer noch nicht gelöst ist...

 

[Aaron3219]

Dabei ist das Bilder erst ganz groß und dann ganz klein (die Größe die ich haben möchte)

Erklär das mal genauer.
Also du hast den Slider schon richtig?!
Du hast auch schon die Bilder eingefügt und sie funktionieren ganz genau richtig?!
Was ist jetzt genau dein Ziel?

 

[Christian_01]

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...

 

[Aaron3219]

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?

 

[Christian_01]

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.

 

[Aaron3219]

Gut ich hab's:

.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

-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?

 

[Tronjer]

@Tronjer irgendwelche Vorschläge?

Ich beschäftige mich primär mit JavaScript. Für CSS gibt es andere Spezis in diesem Forum.

 

[Christian_01]

Leider muss ich sagen das es nicht daran liegt....

 

[Aaron3219]

Welchen Browser benutzt du denn? Mit Chrome funktioniert es auf jeden Fall.

 

[Christian_01]

Ich benutze ebenfalls Google Chrome

 

[Aaron3219]

Komisch... ich habs ausprobiert und bei mir funzt es...