I am having trouble down scaling a responsive image in bootstrap using the example carousel on their website.
<div class="container">
<div class="other-div">
....
</div>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner img-fluid">
<div class="carousel-item active">
<img class="img-fluid" src="/path/1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="img-fluid" src="/path/2.jpg" alt="Second slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
The images appears as follows:
How the images should appear
The image is quite large around 3000x1500 px. I was hoping to scale it down to be the width of the container and an appropriate height to keep aspect ratio. ex 900/450.
The problem was that had to remove the class definitions for carousel-item and the animation elements because they were treating the imgs as flex elements. Added the following to my style.css:
.carousel-item{}
.carousel-item-next, .carousel-item-prev, .carousel-item.active
{
display:block;
}
Related
I am using below code to make carousel having vertical images. It is not responsive i.e. it works completely fine on desktop but on reducing screen size, images are not fully visible (i.e half portion of image is not visible in carousel).
How can I remove this bug?
<div class="container ">
<div class="col-md-offset-1 col-md-11 col-sm-2 col-xs-12">
<div id="carousel-pager" class="carousel slide " data-ride="carousel" data-interval="1000">
<div class="carousel-inner vertical">
<div class="active item" style="object-fit: fill;">
<img style="object-fit: fill;" src="..." class="img-responsive" data-target="#carousel-main" data-slide-to="0" width:100>
</div>
<div class="item" style="object-fit: fill;">
<img src="..." class="img-responsive" data-target="#carousel-main" data-slide-to="1">
</div>
<div class="item" style="object-fit: fill;">
<img src="..." class="img-responsive" data-target="#carousel-main" data-slide-to="2">
</div>
</div>
<a class="left carousel-control" href="#carousel-pager" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-pager" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
You are using bootstrap, you should add the classes: d-block and mx-auto for responsiveness to all the img tags.
like so:
<img src="..." class="d-block mx-auto" data-target="#carousel-main" data-slide-to="2">
It will make them responsive.
Source: https://getbootstrap.com/docs/4.0/components/carousel/
also change all the div class="item" to div class="carousel-item"
OR use this:
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
You can try this :
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
I have added min-width: 100%; to make image take full container.
I would like to use card-image-top section as a slider, especially on mobile. I will use that part as product card and i want my customers to see several images on this part. Is there an easy way to do this?
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<p class="card-text">Example Text</p>
</div>
</div>
I solved it.
<div class="card">
<div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="w-100" src="https://picsum.photos/1920/1080?random=4" alt="image">
</div>
<div class="carousel-item">
<img class="w-100" src="https://picsum.photos/1920/1080?random=5" alt="image">
</div>
<div class="carousel-item">
<img class="w-100" src="https://picsum.photos/1920/1080?random=6" alt="image">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators2" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I'm currently using Carousel property for my website and I'm not able to use background-size: cover, in order for the pictures in my carousel to "stretch" to the full size of the browser. How do I go around that?
Note: The reason why I did what I did below in my code block is because, the images are too big so I did "w-auto", to resize the image to how it looks now.
This is my HTML code:
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="cover">
<img class="d-block w-auto" src="./assets/img/mcdonalds/2.jpg" alt="First slide">
</div>
</div>
<div class="carousel-item">
<div class="cover">
<img class="d-block w-auto" src="./assets/img/mcdonalds/3.jpg" alt="Second slide">
</div>
</div>
<div class="carousel-item">
<div class="cover">
<img class="d-block w-auto" src="./assets/img/mcdonalds/4.jpg" alt="Third slide">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
This is my CSS code:
.cover {
background-size: cover;
}
You can give background-size property if there is a background-image. In your case you have used an img tag so instead for the img tag use this properties:
width: 100%;
height: 250px;
object-fit: cover;
where you can give height as the height you desire to have.
I want to change the color of the left and right buttons on my carousel. I tryed with background color, but doesnt work. How do i change it?
here is my carousel code:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4"><img src="<?php bloginfo('template_url');?>/images/html_brand.jpg" class="img-responsive"></div>
<div class="col-xs-4"><img src="<?php bloginfo('template_url');?>/images/css_brand.jpg" class="img-responsive"></div>
<div class="col-xs-4"><img src="<?php bloginfo('template_url');?>/images/js_brand.jpg" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-4"><img src="<?php bloginfo('template_url');?>/images/jq_brand.jpg" class="img-responsive"></div>
<div class="col-xs-4"><img src="<?php bloginfo('template_url');?>/images/json_brand.jpg" class="img-responsive"></div>
<div class="col-xs-4"><img src="<?php bloginfo('template_url');?>/images/wp_brand.jpg" class="img-responsive"></div>
</div>
</div>
<!-- Controls-->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Change color property of this selector:
.carousel-control {
color: #bada55;
}
Default arrows are glyphicons which is text based icons. Change their color property.
For example
.glyphicon.glyphicon-chevron-right{
color:red;
}
add following css
<style>
.carousel-control.right{ opacity:1 !important;color:red;}
</style>
Hello StackOverflow I have the following code, this works with bootstrap and Pixedelic camera:
<section id="slider" class="container-fluid">
<div class="row fluid">
<div id="camera_wrap_1">
<div data-src="content/images/slider1.png"></div>
<div data-src="content/images/slider1.png"></div>
<div data-src="content/images/slider1.png"></div>
</div>
</div>
The camera runs fine is the blue image, but I want to achive this boxes over the camera wrap. Like this
Image
The white boxes needs to be aligned respect 4 columns bootstrap col-md-3 but be over the content of the camera. The blue is slider1.png is part of the content of camera plugin than is a full width image.
Here's a example o a bootstrap carousel.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/carousel.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://3.bp.blogspot.com/-bGl8UEECI8A/UH1o5UwxvdI/AAAAAAAABEg/L0iomiHX330/s640/old+bridge.jpg" alt="Ye olde bridge">
<div class="carousel-caption">
The old bridge
</div>
</div>
<div class="item">
<img src="http://bashooka.com/wp-content/uploads/2012/09/fantasy-landscape-15.jpg" alt="Elves land">
<div class="carousel-caption">
Elves landscape
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>