Hi Huriata,
You should be able to do this purely with custom CSS. The <img> tag will affect the carousel height by default, but you can force a custom carousel height by targeting the surrounding <div> layers.
Let me know if you need any further pointers with this..
Phil
Thank you for your lighting answer. I’m working on it right now, I’ll post what I’ve achieve (or not), Phil.
So much thank you for your help, finally I did this:
.slide {
.carousel-inner {
padding: 3rem 1.5rem;
.item {
img {
height: 90px; height: 9rem;
width: 90px; width: 9rem;
margin-bottom: 3rem;
margin-right: 3rem;
display: inline-block;
float: left;
position: relative;
z-index: 1000;
@include box-shadow(10px, $dark-gray);
@include box-round(50%);
}
.carousel-caption {
position: relative;
bottom: 0;
right: 0;
left: 0;
padding-top: 0; padding-bottom: 0;
h4, p {
background: none;
padding: 0;
max-width: 100%;
}
} // .carousel-caption
} // .item
}
} // .slide
With this result hoping it helps to someone :
IMAGE RESULT
Brilliant, glad you got it working!
For clarity, if anyone else reads this – it looks like the above code is written in LESS / SASS or something, not vanilla CSS. So you can’t just copy and paste it straight into your styles.css file.
Phil
Oh, my fault, I made that using SASS (CodeKit app for Mac), is basically the same CSS but using some variables and SASS features.
SASS
