---

Ich schaue mal, was wir da umsetzen können. Ich nehme es mal in unsere To-do-Liste auf.

---

Wenn man den Text und das Feld auch deaktiveren könnte, wärs auch recht nett. So das man bei bedarf einfach nur eine Slideshow ohne extra Textfelder und Texte hat, halt nur die reinen Bilder.

---

Echt 1 A die Unterstützung

einfach bilder Anpassen und los gehts :D

Ein anmerkung hätte ich nooch. Es wäre echt nice wenn man für jedes Bild den Style der Schrift und die Position ändern könnte wenn man bilder hat z.B wo man weisse schrift nicht lesen kann 

oder gibt es da schon und ich habe es nciht gefunden?

 

---

odin: Guten Tag,

Ich habe ein Ähnliches Problem und möchte die Bilder nur in einer Bestimmten grösse rollieren lassen an welcher stelle muss ich da denn den Hebel ansetzen ? 


VIelen lieben dank

Normalerweise brauchst du nur alle Bilder in der gleichen Größe bearbeiten. z. B. 1920x400 dann ist die Höhe 400. 1920x600 ist Höhe 600

---

Guten Tag,

Ich habe ein Ähnliches Problem und möchte die Bilder nur in einer Bestimmten grösse rollieren lassen an welcher stelle muss ich da denn den Hebel ansetzen ? 


VIelen lieben dank

---

I have modified the  carousel.css  to resize according to the resolution, it works well for me, tell me if it works for you too.
 

/* CAROUSEL SETTINGS */ 
/* Carousel Styles */ 
/* CUSTOMIZE THE CAROUSEL Extra large devices (large desktops, 1200px and up) */ 
@media (min-width: 1200px) { .carousel { } 
.carousel-caption { bottom: 2rem; z-index: 10; } 

.carousel-item > img { top: 0; left: 0; margin-top: 30px; } 
.carousel-caption .hs-text { display: table-cell; vertical-align: middle; } 
.carousel-caption .hs-text h1 { color: #fff; font-weight: 400; font-size: 70px; margin-bottom: 20px; position: relative; top: 30px; opacity: 0; } 
.carousel-caption .hs-text h1 span { color: #fe821d; } 
.carousel-caption .hs-text p { color: #fff; font-size: 20px; margin-bottom: 10px; position: relative; top: 20px; opacity: 0; } 
.btn-mobile {background-color:#ef7f1a;border-color:#fe821d;box-shadow:none;color:#fff;width: 8em;height: 2.5em;font-size:19px;padding-bottom: 20px;} 
.btn-mobile:hover{color:#fff;background-color:#e76901;border-color:#fe821d;box-shadow:0 5px 15px rgba(0,0,0,.05),0 4px 10px rgba(255,161,0,0.5)} 
.btn-mobile.focus,.btn-mobile:focus{color:#fff;box-shadow:0 0 0 3px rgba(0,123,255,.15),0 3px 15px rgba(0,123,255,.2),0 2px 5px rgba(0,0,0,.1)} 
.btn-mobile.disabled,.btn-mobile:disabled{color:#fff;background-color:#ef7f1a;border-color:#007bff;box-shadow:none;cursor:not-allowed} 
.btn-mobile .h7 { vertical-align: middle; text-align: center; } 
.featurette-divider { margin: 5rem 0; } 
.featurette-heading { font-weight: 300; line-height: 1; letter-spacing: -.05rem; } 
.carousel-indicators .active { background-color: #fe821d; } 
.carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .fa-chevron-left, .carousel-control .fa-chevron-right { position: absolute; top: 50%; z-index: 5; display: inline-block; margin-top: -10px; } 
.carousel-control .icon-prev, .carousel-control .fa-chevron-left { left: 50%; margin-left: -10px; } 
.carousel-control .icon-next, .carousel-control .fa-chevron-right { right: 50%; margin-right: -10px; } 
.carousel-control .icon-prev, .carousel-control .icon-next { width: 20px; height: 20px; font-family: serif; line-height: 1; } 
} 
/*Large devices (desktops, 992px and up) */ @media (min-width: 992px) and (max-width: 1199px) { 
.carousel { } 
.carousel-caption { bottom: 2rem; z-index: 10; } 
.carousel-item > img { top: 0; left: 0; margin-top: 30px; } 
.carousel-caption .hs-text { display: table-cell; vertical-align: middle; } 
.carousel-caption .hs-text h1 { color: #fff; font-weight: 400; font-size: 50px; margin-bottom: 20px; position: relative; top: 30px; opacity: 0; } 
.carousel-caption .hs-text h1 span { color: #fe821d; } 
.carousel-caption .hs-text p { color: #fff; font-size: 19px; margin-bottom: 10px; position: relative; top: 20px; opacity: 0; } 
.btn-mobile {background-color:#ef7f1a;border-color:#fe821d;box-shadow:none;color:#fff;width: 8em;height: 2.5em;font-size:15px;padding-bottom: 20px;} 
.btn-mobile:hover{color:#fff;background-color:#e76901;border-color:#fe821d;box-shadow:0 5px 15px rgba(0,0,0,.05),0 4px 10px rgba(255,161,0,0.5)} 
.btn-mobile.focus,.btn-mobile:focus{color:#fff;box-shadow:0 0 0 3px rgba(0,123,255,.15),0 3px 15px rgba(0,123,255,.2),0 2px 5px rgba(0,0,0,.1)} 
.btn-mobile.disabled,.btn-mobile:disabled{color:#fff;background-color:#ef7f1a;border-color:#007bff;box-shadow:none;cursor:not-allowed} 
.btn-mobile .h7 { vertical-align: middle; text-align: center; } 
.featurette-divider { margin: 5rem 0; } 
.featurette-heading { font-weight: 300; line-height: 1; letter-spacing: -.05rem; } 
.carousel-indicators .active { background-color: #fe821d; } 
.carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .fa-chevron-left, .carousel-control .fa-chevron-right { position: absolute; top: 50%; z-index: 5; display: inline-block; margin-top: -10px; } 
.carousel-control .icon-prev, .carousel-control .fa-chevron-left { left: 50%; margin-left: -10px; } 
.carousel-control .icon-next, .carousel-control .fa-chevron-right { right: 50%; margin-right: -10px; } 
.carousel-control .icon-prev, .carousel-control .icon-next { width: 20px; height: 20px; font-family: serif; line-height: 1; } 
} 
/* Medium devices (tablets, 768px and up) */ 
@media (min-width: 768px) and (max-width: 991px) { 
.carousel { } 
.carousel-caption { bottom: 2rem; z-index: 10; } 
.carousel-item > img { top: 0; left: 0; margin-top: 30px; } 
.carousel-caption .hs-text { display: table-cell; vertical-align: middle; } 
.carousel-caption .hs-text h1 { color: #fff; font-weight: 400; font-size: 40px; margin-bottom: 20px; position: relative; top: 30px; opacity: 0; } 
.carousel-caption .hs-text h1 span { color: #fe821d; } 
.carousel-caption .hs-text p { color: #fff; font-size: 18px; margin-bottom: 10px; position: relative; top: 20px; opacity: 0; } 
.btn-mobile {background-color:#ef7f1a;border-color:#fe821d;box-shadow:none;color:#fff;width: 10em;height: 2.5em;font-size:10px;padding-bottom: 20px;} 
.btn-mobile:hover{color:#fff;background-color:#e76901;border-color:#fe821d;box-shadow:0 5px 15px rgba(0,0,0,.05),0 4px 10px rgba(255,161,0,0.5)} 
.btn-mobile.focus,.btn-mobile:focus{color:#fff;box-shadow:0 0 0 3px rgba(0,123,255,.15),0 3px 15px rgba(0,123,255,.2),0 2px 5px rgba(0,0,0,.1)} 
.btn-mobile.disabled,.btn-mobile:disabled{color:#fff;background-color:#ef7f1a;border-color:#007bff;box-shadow:none;cursor:not-allowed} 
.btn-mobile .h7 { vertical-align: middle; text-align: center; } 
.featurette-divider { margin: 5rem 0; } 
.featurette-heading { font-weight: 300; line-height: 1; letter-spacing: -.05rem; } 
.carousel-indicators .active { background-color: #fe821d; } 
.carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .fa-chevron-left, .carousel-control .fa-chevron-right { position: absolute; top: 50%; z-index: 5; display: inline-block; margin-top: -10px; } 
.carousel-control .icon-prev, .carousel-control .fa-chevron-left { left: 50%; margin-left: -10px; } 
.carousel-control .icon-next, .carousel-control .fa-chevron-right { right: 50%; margin-right: -10px; } 
.carousel-control .icon-prev, .carousel-control .icon-next { width: 20px; height: 20px; font-family: serif; line-height: 1; } 
} 
/* Small devices (landscape phones, 576px and up) */ 
@media (min-width: 576px) and (max-width: 767px) { 
.carousel { } 
.carousel-caption { bottom: 2rem; z-index: 10; } 
.carousel-item > img { top: 0; left: 0; margin-top: 25px; } 
.carousel-caption .hs-text { display: table-cell; vertical-align: middle; } 
.carousel-caption .hs-text h1 { color: #fff; font-weight: 400; font-size: 30px; margin-bottom: 20px; position: relative; top: 30px; opacity: 0; } 
.carousel-caption .hs-text h1 span { color: #fe821d; } 
.carousel-caption .hs-text p { color: #fff; font-size: 12px; margin-bottom: 10px; position: relative; top: 20px; opacity: 0; } 
.btn-mobile {background-color:#ef7f1a;border-color:#fe821d;box-shadow:none;color:#fff;width: 10em;height: 2.5em;font-size:10px;padding-bottom: 20px;} 
.btn-mobile:hover{color:#fff;background-color:#e76901;border-color:#fe821d;box-shadow:0 5px 15px rgba(0,0,0,.05),0 4px 10px rgba(255,161,0,0.5)} 
.btn-mobile.focus,.btn-mobile:focus{color:#fff;box-shadow:0 0 0 3px rgba(0,123,255,.15),0 3px 15px rgba(0,123,255,.2),0 2px 5px rgba(0,0,0,.1)} 
.btn-mobile.disabled,.btn-mobile:disabled{color:#fff;background-color:#ef7f1a;border-color:#007bff;box-shadow:none;cursor:not-allowed} 
.btn-mobile .h7 { vertical-align: middle; text-align: center; } 
.featurette-divider { margin: 5rem 0; } 
.featurette-heading { font-weight: 300; line-height: 1; letter-spacing: -.05rem; } 
.carousel-indicators .active { background-color: #fe821d; } 
.carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .fa-chevron-left, .carousel-control .fa-chevron-right { position: absolute; top: 50%; z-index: 5; display: inline-block; margin-top: -10px; } 
.carousel-control .icon-prev, .carousel-control .fa-chevron-left { left: 50%; margin-left: -10px; } 
.carousel-control .icon-next, .carousel-control .fa-chevron-right { right: 50%; margin-right: -10px; } 
.carousel-control .icon-prev, .carousel-control .icon-next { width: 20px; height: 20px; font-family: serif; line-height: 1; } 
} 
/* Extra small devices (portrait phones, less than 576px) */ 
@media (max-width: 575px) { 
.carousel { } 
.carousel-caption { bottom: 2rem; z-index: 10; } 
.carousel-item > img { top: 0; left: 0; margin-top: 25px; } 
.carousel-caption .hs-text { display: table-cell; vertical-align: middle; } 
.carousel-caption .hs-text h1 { color: #fff; font-weight: 400; font-size: 18px; margin-bottom: 20px; position: relative; top: 30px; opacity: 0; } 
.carousel-caption .hs-text h1 span { color: #fe821d; } 
.carousel-caption .hs-text p { color: #fff; font-size: 8px; margin-bottom: 10px; position: relative; top: 20px; opacity: 0; } 
.btn-mobile {background-color:#ef7f1a;border-color:#fe821d;box-shadow:none;color:#fff;width: 10em;height: 2.5em;font-size:8px;padding-bottom: 20px;} 
.btn-mobile:hover{color:#fff;background-color:#e76901;border-color:#fe821d;box-shadow:0 5px 15px rgba(0,0,0,.05),0 4px 10px rgba(255,161,0,0.5)} 
.btn-mobile.focus,.btn-mobile:focus{color:#fff;box-shadow:0 0 0 3px rgba(0,123,255,.15),0 3px 15px rgba(0,123,255,.2),0 2px 5px rgba(0,0,0,.1)} 
.btn-mobile.disabled,.btn-mobile:disabled{color:#fff;background-color:#ef7f1a;border-color:#007bff;box-shadow:none;cursor:not-allowed} 
.btn-mobile .h7 { vertical-align: middle; text-align: center; } 
.featurette-divider { margin: 5rem 0; } 
.featurette-heading { font-weight: 300; line-height: 1; letter-spacing: -.05rem; } 
.carousel-indicators .active { background-color: #fe821d; } 
.carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .fa-chevron-left, .carousel-control .fa-chevron-right { position: absolute; top: 50%; z-index: 5; display: inline-block; margin-top: -10px; } 
.carousel-control .icon-prev, .carousel-control .fa-chevron-left { left: 50%; margin-left: -10px; } 
.carousel-control .icon-next, .carousel-control .fa-chevron-right { right: 50%; margin-right: -10px; } 
.carousel-control .icon-prev, .carousel-control .icon-next { width: 20px; height: 20px; font-family: serif; line-height: 1; } 
}

---

schon lustig bei mir klappte das mit dem rem aber mit der px wie vorgeschlagen nicht :D Funny. Naja hauptsache es geht nun =)

---

Danke dir das hat geklappt jetzt super. Dann weiß ich wie ich das nun anpassen kann. Also nochmal danke und schönes WE euch. Gruß Toby

---

Warum das nicht geklappt hat bei dir müsste man selber sehen wenn du uns einen Link geben würdest. Versuche mal das (Höhe 400px):

/* Declare heights because of positioning of img element*/
.carousel-item { height: 400px !important; background-color: #777; }
.carousel-item > img { position: absolute; top: 0; left: 0; min-width: 100%; height: 400px !important; }

---

Also habe mal in der CSS erstmal das umgestellt was du geschrieben hast, hat leider keinerlei Effekt. Ich habe auch andere Bilder genommen mit anderen Größen ist leider immer noch die selbe Größe in der Darstellung. Habe dann andere Werte geändert auch keinerlei Änderung der Darstellung. Vielleicht muss man da noch andere Werte in anderen Dateien ändern damit es Wirkung zeigt finde aber keine weiteren Einstellungen diesbezüglich. Falls es sich nicht umstellen lassen sollte muss ich mir eine andere Lösung überlegen. Danke dir erst mal für die Hilfe bis hierhin vllt. haste ja noch ne anderen Idee wo was einzustellen ist. Gruß Toby