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

Christian_01

Mitglied
9 Februar 2017
42
0
6
24
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

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.103
408
83
67
Hast Du diesen Slider selbst entwickelt?
Im CSS sehe ich nichts von Animationen, daher vermute ich, dass noch Javascript dazu gehört. Dieses hast Du aber nicht gepostet.
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.142
236
63
19
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

Mitglied
9 Februar 2017
42
0
6
24
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

Senior HTML'ler
6 Oktober 2015
1.142
236
63
19
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

Mitglied
9 Februar 2017
42
0
6
24
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

Senior HTML'ler
6 Oktober 2015
1.142
236
63
19
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:

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.142
236
63
19
Welchen Browser benutzt du denn? Mit Chrome funktioniert es auf jeden Fall.