<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>
Related
I have a website that uses bootstrap, I have a issue with carousel indicator the Know more button on the captain not working on most screens specifically a big screen.
My code:
<section class="slider_section">
<div id="myCarousel" class="carousel slide banner-main" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="first-slide" src="images/image1.png" alt="First slide">
<div class="container ">
<div class="carousel-caption relative d-block">
<h1><br><strong class="cur">Person 1</strong></h1>
<p>Admin</p>
<div class="button_section"> <a class="main_bt" href="person1.html">Know More</a></div>
</div>
</div>
</div>
<div class="carousel-item">
<img class="first-slide" src="images/image2.png" alt="First slide">
<div class="container">
<div class="carousel-caption relative d-block">
<h1><br><strong class="cur"> Person 2</strong></h1>
<p> User</p>
<div class="button_section"> <a class="main_bt" href="person2.html">Know More</a></div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev" style="width: 5%;">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next" style="width: 5%;">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</section>
What is the issue and how do you solve it??
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>
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>
The carousel isn't working as it supposed to work. I've checked the code several times but it seems I don't know why there's no transition between the photos
I've tried adding the carousel to my webpage but somehow only the active photo is being displayed. There is no transition in the photo-set.
<div class="container">
<div id="main-slider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#main-slider" data-slide-to="0" class="active"></li>
<li data-target="#main-slider" data-slide-to="1"></li>
<li data-target="#main-slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="img/slide_01.jpg" class="d-block img-fluid" alt="">
</div>
<!--carousel item-->
<div class="carousel-item">
<img src="img/slide_02.jpg" class="d-block img-fluid" alt="">
</div>
<div class="carousel-item">
<img src="img/slide_03.jpg" class="d-block img-fluid" alt="">
</div>
</div>
<a href="#main-slider" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a href="#main-slider" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
The three photo set "slide_01.jpg" ,"slide_02.jpg","slide_01.jpg" should change on the click of the "carousel-control-next" button.
Make sure you have included all the necessary libraries for the carousel to work.
If you are using Bootstrap v4.2 then you need the following
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
I copied your HTML code and it works...
See demo below
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<h2>demo</h2>
<div class="container">
<div id="main-slider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#main-slider" data-slide-to="0" class="active"></li>
<li data-target="#main-slider" data-slide-to="1"></li>
<li data-target="#main-slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="http://placekitten.com/g/600/400" class="d-block img-fluid" alt="">
</div>
<!--carousel item-->
<div class="carousel-item">
<img src="http://placekitten.com/g/600/400" class="d-block img-fluid" alt="">
</div>
<div class="carousel-item">
<img src="http://placekitten.com/g/600/400" class="d-block img-fluid" alt="">
</div>
</div>
<a href="#main-slider" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a href="#main-slider" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
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>