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