I am trying to fit the image inside the carousel, but I can't seem to fix it. Here is my css code:
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="images/Products/keyboard.jpg" alt="First slide">
<div class="carousel-caption d-md-block">
<h5 style="color:black">Welcome to LebShops</h5>
<p style="color:black">Proud to be Lebanese</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/Products/mouse.jpg" alt="Second slide">
<div class="carousel-caption d-md-block">
<h5 style="color:black">Enjoy our vast selection of products</h5>
<p style="color:black">Cash on delivery</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/Products/airpods.jpg" alt="Third slide">
<div class="carousel-caption d-md-block">
<h5 style="color:black">Whatever you need we got it !</h5>
<p style="color:black">Cash on delivery</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
How can I fit my picture inside this carousel?
I've used css to adjust its height
I've checked other people's questions but it didnt help me.
Please see the below snippet. I have used different size images in the gallery.
The only change you need to add is css
img{
object-fit: cover;
vertical-align: middle;
border-style: none;
height: 70vh;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://picsum.photos/id/100/200/250" alt="First slide">
<div class="carousel-caption d-md-block">
<h5 style="color:black">Welcome to LebShops</h5>
<p style="color:black">Proud to be Lebanese</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://picsum.photos/id/100/500/300" alt="Second slide">
<div class="carousel-caption d-md-block">
<h5 style="color:black">Enjoy our vast selection of products</h5>
<p style="color:black">Cash on delivery</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://picsum.photos/id/100/300/350" alt="Third slide">
<div class="carousel-caption d-md-block">
<h5 style="color:black">Whatever you need we got it !</h5>
<p style="color:black">Cash on delivery</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
Related
I'm new to HTML and I'm trying to get carousels to display next to each other just like in the picture but I can't seem to make it work.
This is my code. The carousel works but I need it to be display side by side on mobile view. Is it a grid problem?? Anyone know how to solve it, thanks! Your help is gladly appreciated.
desired output
<div class="row">
<div class="col-md-6">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/vege.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Vegetables</h5>
<p>Producing more but consuming less</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/vege-red.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Red Label</h5>
<p>Vegetables Wine Industry</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/vege-green.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Broccoli</h5>
<p>Chemistry: Taste like Chicken</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="col-md-6">
<div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators2" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators2" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators2" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/farm-01.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Aquaphonics</h5>
<p>Producing without farm lot</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/farm-02.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Modern Farm tools</h5>
<p>Building and Growing Crops</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/farm-03.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Science of Farming</h5>
<p>Botany, Biology, Chemistry</p>
</div>
</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>
</div>
</div>
</div> ```
You can add col-* class to adjust the columns in mobile view. Also, You don't even need to write col-md-* because the col-* will affect on all views.
for this example, it would be class="col-6".
<div class="container">
<div class="row">
<div class="col-6">
</div>
<div class="col-6">
</div>
</div>
</div>
I'm trying to figure if this design is possible with the Bootstrap 4 carousel.
Essentially i'm looking to make a slider like in the above image but I can't figure out if it's possible to have the text on the left and the image on the right with the arrows.
Is this possible?
Any help is much appreciated.
I just have the default Bootstrap 4 carousel code at the moment.
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<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="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Use the Bootstrap grid. For example 2 columns...
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row align-items-center">
<div class="col-md py-2">
<p> Text text text here. Text here, here, here, here is the text. Text here, here, here, here is the text. </p>
<button class="btn btn-primary">More here</button>
</div>
<div class="col-md py-2">
<img class="d-block img-fluid" src="..." alt="First slide">
</div>
</div>
</div>
<div class="carousel-item">
...
</div>
<div class="carousel-item">
...
</div>
</div>
</div>
Codeply demo
I have a bootstrap carousel but he is automatic and manual. I wanted to change him in order to use it only manually and I want to separate the items with spaces.
This is my carousel html :
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style=" width:608px; height: 420px !important;">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./assets/image/Meduse-aurelie.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./assets/image/Merou-lanceole.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./assets/image/Iguane.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="./assets/image/requin-marcheur.jpg" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
And this is my carousel css :
.carousel-item {
margin-left: 20px;
}
I have this result :
Someone can help me please ?
In my page, I have multiple games one below the other.
Each game has a distinct carousel.
The problem is that only the first one works as expected.
All the other carousels when the next or previous button is pressed they change the images of the first carousel. They still auto slide though.
I want a way to make each one of the carousels to work distinctly.
I tried to use an i = 0 for the ids to make them work distinctly but that didnt work as expected since none of them worked.
Also, the other issue that I am facing is that when the carousel button is pressed this black background appears carousel-control.
Any thoughts?
index.html.erb
is inside a loop
here is my code
<div id="carouselId" class="carousel slide" data-ride="carousel" style = "width:450px; height: 250px; ">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carouselId" data-slide-to="0" class="active"></li>
<li data-target="#carouselId" data-slide-to="1"></li>
<li data-target="#carouselId" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<%=image_tag "#{#stadio.stadium_name}/1.jpg" %>
</div>
<div class="item">
<%=image_tag "#{#stadio.stadium_name}/2.jpg" %>
</div>
<div class="item">
<%= image_tag "#{#stadio.stadium_name}/3.jpg" %>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#carouselId" 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="#carouselId" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true" ></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="container">
<div class="row" id="row1">
<h1>400x400</h1>
<div class="bd-example">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1" class=""></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://placebear.com/400/400" alt="400x400" />
<div class="carousel-caption d-none d-md-block">
<h3>400x400</h3>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://www.fillmurray.com/g/400/400" alt="400x400" />
<div class="carousel-caption d-none d-md-block">
<h3>400x400</h3>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://placekitten.com/g/400/400" alt="400x400" />
<div class="carousel-caption d-none d-md-block">
<h3>400x400</h3>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<div class="row" id="row2">
<div class="bd-example">
<h1>600x600</h1>
<div id="carouselExampleCaptions2" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions2" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions2" data-slide-to="1" class=""></li>
<li data-target="#carouselExampleCaptions2" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://placebear.com/600/600" alt="600x600" />
<div class="carousel-caption d-none d-md-block">
<h3>600x600</h3>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://www.fillmurray.com/g/600/600" alt="600x600" />
<div class="carousel-caption d-none d-md-block">
<h3>600x600</h3>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://placekitten.com/g/600/600" alt="600x600" />
<div class="carousel-caption d-none d-md-block">
<h3>600x600</h3>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions2" 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="#carouselExampleCaptions2" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<div class="row" id="row3">
<h1>250x250</h1>
<div class="bd-example">
<div id="carouselExampleCaptions3" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions3" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions3" data-slide-to="1" class=""></li>
<li data-target="#carouselExampleCaptions3" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://placebear.com/250/250" alt="250x250" />
<div class="carousel-caption d-none d-md-block">
<h3>250x250</h3>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://www.fillmurray.com/g/250/250" alt="250x250" />
<div class="carousel-caption d-none d-md-block">
<h3>250x250</h3>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://placekitten.com/g/250/250" alt="250x250" />
<div class="carousel-caption d-none d-md-block">
<h3>250x250</h3>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions3" 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="#carouselExampleCaptions3" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<div class="container-fluid" >
<div class="row">
<section class="col-12">
<div class="">
<div class="row">
<section class="col-sm-12">
</div>
<div class="carousel slide" id="featured" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#featured" data-slide-to="0" class="active"></li>
<li data-target="#featured" data-slide-to="1"></li>
<li data-target="#featured" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block img-fluid" src="_images/Slider_1.jpg" alt="slider1">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="_images/Slider_2.jpg" alt="slider2">
<div class="carousel-caption d-none d-md-block">
<h3>Jadon Events</h3>
<p>We organize your events like you cannot even imagine</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="_images/Slider_3.jpg" alt="slider3">
</div>
</div>
<a class="carousel-control-prev" href="#featured" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true">
<span class="sr-only">Previous</span>
</span></a>
<a class="carousel-control-next" href="#featured" role="button" data-slide="prev"><span class="carousel-control-next-icon" aria-hidden="true">
<span class="sr-only">Next</span>
</span></a>
</div>
</section>
</div>
</div>
I have figured out how to make slider in bootstrap, but now I am stuck with full width slider.
how can I make my carousel full width? I removed container classes but it makes some scroll at bottom which is not good for responsiveness
Try the following code and change images with yours.
<div class="carousel slide" id="featured" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#featured" data-slide-to="0" class="active"></li>
<li data-target="#featured" data-slide-to="1"></li>
<li data-target="#featured" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block img-fluid" src="http://placehold.it/2100x300" alt="slider1">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://placehold.it/2100x300" alt="slider2">
<div class="carousel-caption d-none d-md-block">
<h3>Jadon Events</h3>
<p>We organize your events like you cannot even imagine</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://placehold.it/2100x300" alt="slider3">
</div>
</div>
<a class="carousel-control-prev" href="#featured" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true">
<span class="sr-only">Previous</span>
</span>
</a>
<a class="carousel-control-next" href="#featured" role="button" data-slide="prev">
<span class="carousel-control-next-icon" aria-hidden="true">
<span class="sr-only">Next</span>
</span>
</a>
</div>