0

:) I'm working with Bootstrap carousel and looking for a solution which is working. I want to have smaller images stretched to screen resolution of the user. There are some tutorials online already but any of them is working with current version of Bootstrap.

I noticed that during carousel-fade effect my image is responsive the way I need. I downloaded Bootstrap source code to find the specific line but I couldn't find this.

Could anyone tell me how to copy these effect to get responsive image in my carousel? Or maybe do you have your own solution for this problem?

 <div class="row inner-bg" id="slider-calosc">
        <div class="col-xs-12 text">
            <div id="slider" class="carousel slide carousel-fade" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#slider" data-slide-to="0" class="active"></li>
                    <li data-target="#slider" data-slide-to="1"></li>
                    <li data-target="#slider" data-slide-to="2"></li>
                </ol>

                <div class="carousel-inner" role="listbox">
                    <div class="carousel-item active ">
                        <img class="img-fluid" src="slider1.jpg" alt="First slide">
                        <div class="d-block p-2 carousel-caption justify-content-center">
                            <h3>mytext</h3>
                            <p class="d-block p-2 podpisy-slider">mytext</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img class="img-fluid" src="slider2.jpg" alt="Second slide">
                        <div class="d-block p-2 carousel-caption  justify-content-center">
                            <h3>mytext</h3>
                            <p class="d-block p-2 podpisy-slider">Informatyka <span class="akcent">mytext</span></p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img class="img-fluid" src="slider3.jpg" alt="Third slide">
                        <div class="d-block p-2 carousel-caption justify-content-center">
                            <h3>mytext</h3>
                            <p class="d-block p-2 podpisy-slider">mytext</p>
                        </div>
                    </div>
                </div>

                <a class="carousel-control-prev" href="#slider" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Poprzedni</span></a>

                <a class="carousel-control-next" href="#slider" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Następny</span></a>
            </div>
        </div>
    </div>

And CSS

.carousel-caption {
display: flex;
transform: translateY(-50%);
align-items: center;
top: 50%;
right: 0;
left: 0;
bottom: auto;
}
.carousel-item .img-fluid {
width: 100%;

}

.carousel-item a {
display: block;
width: 100%;
}
.podpisy-slider {

font-size: 3vw;
text-transform: uppercase;
font-weight: 800;

}
Joanna
  • 1
  • 1
  • 2
  • 1
    add some code , whatever you have tried – Saurabh Mistry Aug 24 '18 at 11:22
  • As indicated [here](https://stackoverflow.com/questions/48665392/bootstrap-4-0-0-carousel-fade-transition), `carousel-fade` was added in Bootstrap 4.1+ The [carousel examples](https://getbootstrap.com/docs/4.1/components/carousel/) in the docs also show responsive images. – Carol Skelly Aug 24 '18 at 11:30
  • I saw that but I mean other kind of responsiveness. It's not the thing to make it smaller on mobile devices. I need it in 1920x1080 to be good looking on retina devices. And I use Bootstrap 4.1. In the post I used the world "the current version". So sorry for misunderstanding. – Joanna Aug 24 '18 at 11:38

0 Answers0