I have a problem on my carousel using controls and indicators, which does not make my photos slide through other pictures, the only picture I see is the one you marked as active.
<div class="col-6 text-center m-auto ">
<div id="example" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#example" data-slide-to='0' class="active"></li>
<li data-target="#example" data-slide-to='1'> </li>
<li data-target="#example" data-slide-to='2'> </li>
<li data-target="#example" data-slide-to='3'> </li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active"> <img src="/setup/img/portfolio.jpg" alt="port" class="d-block w-100 height-100"></div>
<div class="carousel-item"> <img src="/setup/img/mypic.jpg" alt="ports" class="d-block w-50"></div>
<div class="carousel-item"> <img src="/setup/img/code.jpg" alt="port1" class="d-block w-50"></div>
<div class="carousel-item"> <img src="/setup/img/about.jpg" alt="port2" class="d-block w-50"></div>
</div>
<!-- controls-->
<a href="#example" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#example" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
I expect to be able to use my controls or even even just the indicators.
Your code looks like using bootstrap.
Please double check that you have links for jQuery and Bootstrap.js in your code.
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
Related
I'm having some issues with bootstrap's carousel, I have some images with different resolutions and ratios, and when I use the carousel-fade effect and two images with different ratios are next to each other the animation comes out janky.
I was wondering if there was a way to alleviate or solve this problem entirely
<div id="demo" class="carousel slide carousel-fade" data-ride="carousel" style="width: 800px;">
<ul class="carousel-indicators" id="car_ind">
<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>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://images.corsidia.com/ckeditor/pictures/data/000/000/086/content/immagini-e-tabelle-html-00.jpg" alt="Los Angeles" />
</div>
<div class="carousel-item">
<img src="https://www.urbannaturale.com/wp-content/uploads/2019/06/face-800-x-533px-photo-1498842812179-c81beecf902c.jpg" alt="Chicago" />
</div>
<div class="carousel-item">
<img src="https://script.meteolive.it/admin/immaginiNotizie/SRC/__130766___taal1.jpg" alt="New York" />
</div>
</div>
<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>
demo:
https://jsfiddle.net/02fxt9de/2/
The main issue here is your image resolution
if they are different it is obvious that the slide transition would appear janky . This can be solved by
setting resolution of image as equal
just replace this section in your code and try out
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://images.corsidia.com/ckeditor/pictures/data/000/000/086/content/immagini-e-tabelle-html-00.jpg" class="carousel-img-size" alt="Los Angeles" />
</div>
<div class="carousel-item">
<img src="https://www.urbannaturale.com/wp-content/uploads/2019/06/face-800-x-533px-photo-1498842812179-c81beecf902c.jpg" class="carousel-img-size" alt="Chicago" />
</div>
<div class="carousel-item">
<img src="https://script.meteolive.it/admin/immaginiNotizie/SRC/__130766___taal1.jpg" class="carousel-img-size"alt="New York" />
</div>
</div>
CSS code
.carousel-img-size {height:200px ; width:400px;}
change width and height as per your requirement. :)
Trying to add a bootstrap carousel to my site to display images, the first images show, however the buttons do not work to change the image
I've tried adding some javascript, however nothing seems to work.]
Overall I feel it is just a stupid mistake somewhere but I honestly am not sure, and do not know what else to do
<div class="row">
<div class="col-sm-4">
<div class="midcol">
<h2>Some of our current stock</h2>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="#routes.Assets.versioned("images/1.jpeg")" alt="First slide">
<div class="container">
<div class="carousel-caption">
<p>Volkswagen Polo 2012</p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="#routes.Assets.versioned("images/2.jpeg")" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<p>Opel Corsa 2010</p>
</div>
</div>
</div>
<div class="item">
<img class="third-slide" src="#routes.Assets.versioned("images/3.jpeg")" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<p>Renautl Clio 2014</p>
</div>
</div>
</div>
</div>
<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><!-- /.carousel -->
</div>
</div>
I think you should use item like this
<div class="carousel-item active">
<img class="d-block w-100" src="#routes.Assets.versioned("images/1.jpeg")" alt="First slide">
<div class="carousel-caption d-md-block">
<p>Volkswagen Polo 2012</p>
</div>
</div>
and also you should use jquery code
$('.carousel').carousel({
interval: 6000,
pause: "false"
});
when you are using bootstrap carousel you need to use carousel-item
instade of using item class
just use carousel- before your item hope it will solve your problem
I am making a MEAN stack application using angular 7. I use a Bootstrap Carousel but it's not working.
#slider .item {
height: 500px;
}
.carousel-caption {
font-size: 18px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!--all above is necessary for bootstrap to function in this snippet-->
<div class="carousel slide" id="slider" data-ride="carousel">
<!--indicators-->
<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">
<div class="item active">
<img src="../../assets/public/RoadTipsMain.jpg" style="width: 100%">
<div class="carousel-caption">
<h4>Welcome</h4>
<p>Travel! Enjoy!</p>
</div>
</div>
<div class="item" id="slide2">
<img src="../../assets/public/5.jpg" style="width: 100%">
<div class="carousel-caption">
<h4>Welcome</h4>
<p>Travel! Enjoy!</p>
</div>
</div>
<div class="item" id="slide3">
<img src="../../assets/public/cardrive.jpg" style="width: 100%">
<div class="carousel-caption">
<h4>Welcome</h4>
<p>Travel! Enjoy!</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#slider" data-slide="prev" role="button"><span class="icon-prev"></span></a>
<a class="right carousel-control" href="#slider" data-slide="next" role="button"><span class="icon-next"></span></a>
</div>
Is there any mistake I am doing with the code? I think #slider is not working in angular 7.
As I already explained here (marked as duplicate but nothing happened):
You have to give all items (pictures) of the carousel the class
carousel-item but you only gave them the class item. Same with the
Previous and Next buttons. The classes should be carousel-control-prev and carousel-control-next but you only gave
them the class carousel-control.
The rest seems to be working just fine! When handling Bootstrap you
always have to look out for the classes since they have to be exactly
right for it to work at all. (You could also probably remove the
popper.js-script at the bottom since it is not used at all.)
So basically just change all <div class="item"> to <div class="carousel-item"> and add -next and -prev to the control
classes as I did here:
#slider .carousel-item {
height: 500px;
}
.carousel-caption {
font-size: 18px;
}
.carousel-item>img {
width: 100%
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!--all above is necessary for bootstrap to function in this snippet-->
<div class="carousel slide" id="slider" data-ride="carousel">
<!--indicators-->
<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">
<div class="carousel-item active">
<img src="https://picsum.photos/1000/600/">
<div class="carousel-caption">
<h4>Welcome</h4>
<p>Travel! Enjoy!</p>
</div>
</div>
<div class="carousel-item" id="slide2">
<img src="https://picsum.photos/1000/600/">
<div class="carousel-caption">
<h4>Welcome</h4>
<p>Travel! Enjoy!</p>
</div>
</div>
<div class="carousel-item" id="slide3">
<img src="https://picsum.photos/1000/600/">
<div class="carousel-caption">
<h4>Welcome</h4>
<p>Travel! Enjoy!</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">Previous</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">Next</span>
</a>
</div>
I have the same problem like that.
You must be careful to read again Getting Started carousel focused on Dependency.
https://ng-bootstrap.github.io/#/getting-started
Don't forget to add BootstrapCDN (content delivery network) in your HTML file:
https://www.bootstrapcdn.com/
this is my BootstrapCDN in my workspace:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
I'm having this weird problem where the controls won't show up for my bootstrap 4 beta carousel unless I place the controls links inside the carousel-inner div.
jquery & the bootstrap files are working because nothing else on the website is wrong (and I've used lots of jquery on it). The indicators also work fine without being inside "carousel inner".
I've copied and pasted this code directly from bootstrap's site, as well as trying to copy and paste from other examples. The controls are only appearing for me if I move them before the closing div for carousel-inner. All my divs are closed properly (I'm using brackets so it tells me if any aren't closed). The rest of my code is also basically copied and pasted from the bootstrap 4 page/examples. All I did was add more slides but this issue was occurring before that as well.
Only piece of custom css, which if I comment this out doesn't fix the controls problem. (it moves captions underneath slide instead of layered on top of slide, and moves indicators so they're above slides instead of layered on top.):
.carousel-caption {
position: relative;
left: auto;
right: auto;
}
.carousel-indicators {
position: relative;
margin: 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div id="myCarousel" class="carousel slide bg-inverse hidden-mobile" data-ride="carousel">
<ol class="carousel-indicators" style="padding-bottom:2%;padding-top:2%;">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid ml-auto mr-auto" src="backgroundimages/step1.gif" alt="First slide">
<div class="carousel-caption" style="padding-top:3%;">
<h3>Title</h3>
<p>text text text</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid ml-auto mr-auto" src="backgroundimages/step2.gif" alt="Second slide">
<div class="carousel-caption" style="padding-top:3%;">
<h3>Title</h3>
<p>text text text</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid ml-auto mr-auto" src="backgroundimages/step3.gif" alt="Third slide">
<div class="carousel-caption" style="padding-top:3%;">
<h3>Title</h3>
<p>text text text</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid ml-auto mr-auto" src="backgroundimages/step4.gif" alt="Fourth slide" width="55%" height="auto">
<div class="carousel-caption" style="padding-top:3%;">
<h3>Title</h3>
<p>text text text</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid ml-auto mr-auto" src="backgroundimages/step5.gif" alt="Fifth slide">
<div class="carousel-caption" style="padding-top:3%;">
<h3>Title</h3>
<p>text text text</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid ml-auto mr-auto" src="backgroundimages/step6.gif" alt="Sixth slide">
<div class="carousel-caption" style="padding-top:3%;">
<h3>Title</h3>
<p>text text text</p>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev" onclick="$('#myCarousel').carousel('prev')">
<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" onclick="$('#myCarousel').carousel('next')">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
hi Every one would you help me please regarding my project I'm getting frustrating of the error it would not next when I try to click next in
edge browser the carousel would not work its button
you can view this information about the carousel that I have choosen here's the link http://v4-alpha.getbootstrap.com/components/carousel/#carouselprev
<section id ="Carousel">
<div id="carousel-home" class="carousel slide"data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-home" data-slide-to="0" class="active"></li>
<li data-target="#carousel-home" data-slide-to="1"></li>
<li data-target="#carousel-home" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block img-fluid" src="girl_holdCamera.jpg" alt="woman holding a cannon camera">
<div class = "carousel-caption">
<h3>A woman holding camera</h3>
<p>she is probably holding a cannon camera to take picture</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="heart.jpg" alt="heart forming by thiere hand">
<div class = "carousel-caption">
<h3>Building a heart with Two hands</h3>
<p>they build a heart with the use of thiere hands to keep them promesis</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="Smart-guy-holding-beautiful-girl-in-arms.jpg" alt="guy holding girl in his hand">
<div class = "carousel-caption">
<h3>Guy and Pretty woman hugging for the First time</h3>
<p> They were happy to meet each of them</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel-home" 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="#carousel-home" role="button" data-slide= "next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="js/bootstrap.min.js"></script>