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>
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'm using Bootstrap Carousel, but not sure if it is possible to move the Carousel to the far right instead of putting it in the center. I've looked for an example of it but I could not find any other than moving the indicator to the right. I'd like to move the whole Carousel to the right, so I can have white space on the left. Can I do this with Bootstrap Carousel? Or should I look for some other way?
.mainCarousel {
background-color: whitesmoke;
margin-top: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="mainCarousel">
<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/1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/1.jpg" 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>
</div>
Add these 2 classes .w-75 .ml-auto to .mainCarousel see the example.
And if you don't want .w-75 which contains width: 75% !important; you can add custom width to .mainCarousel in your CSS.
.mainCarousel {
background-color: whitesmoke;
margin-top: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="mainCarousel w-75 ml-auto">
<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://images.pexels.com/photos/1051399/pexels-photo-1051399.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.pexels.com/photos/2741458/pexels-photo-2741458.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.pexels.com/photos/2175211/pexels-photo-2175211.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" 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>
</div>
If you only just want to have non-writable whitespace on the left of the carousel, use the accepted answer's approach. In fact, you don't even need to set the width to 75%. You can just add left paddings to the carousel.
If you want to have space on the left of the carousel so that you can put some texts there, and you want it to be responsive, use the grid system to construct the layout, and place the carousel on the right column.
The following is just an example. I have no idea how long you want the carousel to be, and/or when you want the left stacks up on top of the right column:
<div class="container-fluid">
<div class="row">
<div class="col-lg-4">
Writable area
</div>
<div class="col-lg-8">
<div class="mainCarousel" />
</div>
</div>
</div>
At large breakpoint and up:
Below large breakpoint:
demo: https://jsfiddle.net/davidliang2008/sj541uoL/7/
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>
the bootstrap carousel in bootstrap 4.0 is not working, i have checked everything and written the code 100% the same:
<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="images/pic03.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/pic01.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/pic02.jpg" 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>
The images simply show up below each other and the left and right buttons like links, as if bootstrap isn't even referenced.
.carousel-inner img {
width: 100%;
height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.w3schools.com/bootstrap4/la.jpg" alt="Los Angeles" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Chicago" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="New York" width="1100" height="500">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
i have insert here and it's working. you has check jquery and bootstrap js+css?
<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>