<link href="~/assets/css/bootstrap.min.css" rel="stylesheet" />
<div id="myCar" class="carousel slide" data-ride="carousel" style="height: 100%;" >
<!-- Wrapper for slides -->
<div id="myNewCar" class="carousel-inner" style="height: 100%; ">
<div class="item active">
<img src="~/assets/images/full-screen-image-3.jpg" class="img-responsive" />
</div>
<div class="item">
<img src="~/assets/images/sidebar-1.jpg" class="img-responsive" />
</div>
<div class="item">
<img src="~/assets/images/sidebar-5.jpg" class="img-responsive" />
</div>
</div>
</div>
<script src="~/assets/js/core/jquery.3.2.1.min.js"></script>
<script src="~/assets/js/core/bootstrap.min.js"></script>
I am using bootstrap carousel in my asp.net mvc partial view but the images in the slider are not sliding it only displays the first image
Bootstrap 4 changed .item to .carousel-item. Update your HTML to reflect migration from BS3 to BS4 and your carousel will work as expected. So change:
<div class="item active">
<img src="~/assets/images/full-screen-image-3.jpg" class="img-responsive" />
</div>
to:
<div class="carousel-item active">
<img src="~/assets/images/full-screen-image-3.jpg" class="img-responsive" />
</div>
And repeat for each iteration of your slides. For additional information on Bootstrap 4s Carousel component reference the documentation for the current version (4.0.0-beta2):
https://getbootstrap.com/docs/4.0/components/carousel/
Related
I'm trying to create a Bootstrap Carousel with a video in the first slide. Everything is working as expected except that the carousel does not take the data-interval into account on the first run of the first slide. When we go back to the slide from another one, it works as expected.
I did a minimal repro here:
https://www.codeply.com/p/avdtdpw8ie
We can see that the first slide gets displayed for about 1 second on the first run, but on its second run it gets displayed for 5 seconds as defined by the data-interval attribute.
Instead of using the data-interval attributes directly on the HTML, you can set the interval using jQuery. This will trigger the Carousel once it's loaded:
$('.carousel').carousel({
interval: 1000
})
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" style="width: 400px; height: 300px">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" alt="First slide" src="https://picsum.photos/400/300" />
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="Second slide" src="https://picsum.photos/400/300" />
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="Third slide" src="https://picsum.photos/400/300" />
</div>
</div>
</div>
More info here.
I have a problem with basic bootstrap carousel. I just want slides to move every four seconds, for example. Carousel looks like this:
$(document).ready(function() {
fixCarousel();
});
function fixCarousel() {
$('.carousel').carousel({
interval: 1000*4
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://via.placeholder.com/750x150" alt="Image">
<div class="carousel-caption car_slide">
<h3 class="slide_text">Suppliers of skilled Workforce</h3>
<a class="page-scroll" href="#services">
<button class="learn_more_button btn btn-primary">
LEARN MORE
</button>
</a>
</div>
</div>
<div class="item">
<img src="http://via.placeholder.com/750x150" alt="Image">
<div class="carousel-caption car_slide">
<h3>SMART, EFFECTIVE ENTERPRISE SOLUTIONS</h3>
<a class="page-scroll" href="#services">
<button class="learn_more_button btn btn-primary">
LEARN MORE
</button>
</a>
</div>
</div>
</div>
</div>
But strange things are happening. It works one time, another it waits like 10 sec, then few seconds, then, it goes normally, then, it stops cycling at all...
Any solutions? Thanks.
Here you go with the solution https://jsfiddle.net/zj6bj6cj/
$(document).ready(function() {
$('.carousel').carousel({
interval: 1000*4
});
});
img {
height: 300px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://via.placeholder.com/350x15" alt="Image">
<div class="carousel-caption car_slide">
<h3 class="slide_text">Suppliers of skilled Workforce</h3>
<a class="page-scroll" href="#services">
<button class="learn_more_button btn btn-primary">
LEARN MORE
</button>
</a>
</div>
</div>
<div class="item">
<img src="http://via.placeholder.com/350x15" alt="Image">
<div class="carousel-caption car_slide">
<h3>SMART, EFFECTIVE ENTERPRISE SOLUTIONS</h3>
<a class="page-scroll" href="#services">
<button class="learn_more_button btn btn-primary">
LEARN MORE
</button>
</a>
</div>
</div>
</div>
</div>
Console is showing every element is where its supposed to be but the is just not showing anything, its like everything has gone under a white blanket,i never seen this kind of problem and have no clue what it might be. strange thing is not even images are showing up
here is the code bootstrap carousel
<!--read-anywhere starts -->
<section class="read-anywhere page" id="read-anywhere">
<div class="container">
<div class="row">
<div class="main-heading clearfix">
<div class="col-md-12 text-center">
<h1 class="text-center">Carousel</h1>
<h2 class="text-center">Carousel sub title.</h2>
</div>
</div>
<div class="col-md-12">
<div id="read-anywhere-slider" class="carousel fade" data-ride="carousel" data-interval="3000">
<div class="row">
<!-- Indicators -->
<div class="col-md-6">
<ol class="carousel-indicators">
<li data-target="#read-anywhere-slider" data-slide-to="0" class="mobile active">
<img src="http://lorempixel.com/300/500/" width="30px"> mobile
</li>
<li data-target="#read-anywhere-slider" data-slide-to="1" class="kindle">
<img src="http://lorempixel.com/300/500/" width="35px"> kindle
</li>
<li data-target="#read-anywhere-slider" data-slide-to="2" class="tablet">
<img src="http://lorempixel.com/300/500/" width="35px"> tablet
</li>
<li data-target="#read-anywhere-slider" data-slide-to="3" class="laptop">
<img src="http://lorempixel.com/300/500/" width="45px"> laptop
</li>
</ol>
</div>
<div class="col-md-6">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/300/500/" class="read-ipad">
</div>
<div class="item">
<img src="http://lorempixel.com/300/500/" class="read-laptop">
</div>
<div class="item">
<img src="http://lorempixel.com/300/500/" class="read-iphone">
</div>
<div class="item">
<img src="http://lorempixel.com/300/500/" class="read-kindle">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--read-anywhere ends -->
Your HTML code contains a couple of mistakes.
Your current code looks like this (in Emmet style):
.col-md-12 > .carousel > .row > .col-md-6 + .col-md-6 > .carousel-inner
By the way, in this case you don't need .col-md-12 at all. So the final HTML structure will look this:
.container > .row > .col-md-6 + .col-md-6 > .carousel > .carousel inner
The second mistake is .fade class on .carousel. By default, bootstrap can't do fade animations for carousels. The fade class will work only with a modal component. Default carousel behaviour is sliding. So you need to add the .slide class to your .carousel element.
If you want to get fade effects, you can try someone's snippets like in this codepen.
Disclaimer: I'm not quite familiar with carousel.js, but I changed this:
class="carousel fade"
into:
class="carousel slide"
And that makes at least the sliding pictures appear.
Kindly check this [jsfiddle][1]
May be it's helpful to you
i.e. two carousels in the same location but one is always hidden, with two buttons (anchors?) above to turn either one on:
<div class="row">
<div class="col-lg-12">
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div id="floorsCarousel" class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/1400/600/sports/1/" alt="Chania">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/2/" alt="Chania">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/3/" alt="Flower">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/4/" alt="Flower">
</div>
</div>
</div>
My JS does not appear to be working, this is what I have in my JS file:
var floorsCarousel = document.getElementById("floorsCarousel");
var spaceCarousel = document.getElementById("spaceCarousel");
function floorPlans() {
if (floorsCarousel.style.display==="none") {
floorsCarousel.style.display="inherit";
}
if (spaceCarousel.style.display!=="none") {
spaceCarousel.style.display="none";
}
return false;
}
function spacePlans() {
if (spaceCarousel.style.display==="none") {
spaceCarousel.style.display="inherit";
}
if (floorsCarousel.style.display!=="none") {
floorsCarousel.style.display="none";
}
return false;
}
JSFiddle
I have created a solution for you that does what you need here. I've created "buttons" to toggle which carousel you wish to open and wrapped the carousel's in a div with the attr's id="Car-#" class="Car-toggle"
Html
<div class="row">
<button class="toggleCar" data-for="Car-1">Toggle 1</button>
<button class="toggleCar" data-for="Car-2">Toggle 2</button>
<div class="col-lg-12">
<div id="Car-1" class="Car-toggle">carousel One
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div id="floorsCarousel" class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/1400/600/sports/1/" alt="Chania">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/2/" alt="Chania">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/3/" alt="Flower">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/4/" alt="Flower">
</div>
</div>
</div>
</div>
<div id="Car-2" class="Car-toggle">carousel Two
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div id="floorsCarousel" class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/1400/600/sports/1/" alt="Chania">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/2/" alt="Chania">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/3/" alt="Flower">
</div>
<div class="item">
<img src="http://lorempixel.com/1400/600/sports/4/" alt="Flower">
</div>
</div>
</div>
</div>
</div>
</div>
Javascript (JQuery since your using bootstrap)
$('.toggleCar').click(function(){
var CarWrapperName=$(this).attr('data-for');
$('.Car-toggle').hide();
$('#'+CarWrapperName).show();
});
//Hide All Toggles and Show Default
$('.Car-toggle').hide();
$('#Car-1').show();
I can't get Bootstraps carousel to work with rails... what am I missing?
1.) I downloaded a custom version of bootstrap with the carousel component.
2.) Placed it in my assets/js and required the file in application.js
3.) Initialized the carousel by:
$(document).ready(function(){
$('.carousel').carousel()
});
4.) Put my html markup:
<section class="wrapper row">
<article class="slider">
<!-- Carousel - consult the Twitter Bootstrap docs at
http://twitter.github.com/bootstrap/javascript.html#carousel -->
<div id="this-carousel-id" class="carousel slide"><!-- class of slide for animation -->
<div class="carousel-inner">
<div class="item active"><!-- class of active since it's the first item -->
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
</div><!-- /.carousel-inner -->
<!-- Next and Previous controls below
href values must reference the id for this carousel -->
<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">‹</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
</div><!-- /.carousel -->
</article>
</section>
It's not working! Any ideas?