Bootstrap Carousel : Remove auto slide
You can do this 2 ways, via js or html (easist)
- Via js
$('.carousel').carousel({
interval: false,
});
That will make the auto sliding stop because there no Milliseconds added and will never slider next.
- Via Html By adding
data-interval="false"
and removingdata-ride="carousel"
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
becomes:
<div id="carouselExampleCaptions" class="carousel slide" data-interval="false">
updated based on @webMan's comment
How to stop bootstrap carousel automatic slide in mobile
I am using this one, working grate for me:
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
$('.carousel').carousel ({
interval: isMobile.any() ? false : 5000
});
Source: http://www.abeautifulsite.net/detecting-mobile-devices-with-javascript/
Trying to stop bootstrap carousel from pausing on hover
Set Pause to null and data-pause="false"
$crsl.carousel({//initialize
interval: false,
pause: null
})
<div id="carousel-hero" class="carousel slide" data-ride="carousel" data-pause="null">
Read more about the carousel options here
https://v4-alpha.getbootstrap.com/components/carousel/#options
For avoiding the progress bar stop remove the code for crsl.hover which clears interval for the progress bar and restart it on blur.
Working Example : https://jsfiddle.net/ne9x9Lp1/
Bootstrap Carousel Full Screen
Update Bootstrap 4
Bootstrap 4 has utility classes that make it easier to create a full screen carousel. For example, use the min-vh-100
class on the carousel-item
content...
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner bg-info" role="listbox">
<div class="carousel-item active">
<div class="d-flex align-items-center justify-content-center min-vh-100">
<h1 class="display-1">ONE</h1>
</div>
</div>
</div>
</div>
Full screen carousel demo
This works to make the carousel items full screen, but carousel items that contain images or videos that have a specific size & aspect ratio require further consideration.
Since the viewport h/w ratio is likely to be different than the image or video h/w ratio, usually background images or object-fit
are commonly used to size images and videos to "full screen". For videos, use the Bootstrap responsive embed classes as needed for the video ratio (21:9, 19:9, etc...).
Full screen videos demo
Also see: https://stackoverflow.com/a/58765043/171456
Original answer (Bootstrap 3)
Make sure the img inside the carousel item is set to height and width 100%. You also have to make sure the carousel and any of the .item containers (html,body) are 100%...
html,body{height:100%;}
.carousel,.item,.active{height:100%;}
.carousel-inner{height:100%;}
Boostrap 3 Full Screen Carousel Demo
Here's an example for Bootstrap 3.x:
http://www.codeply.com/go/2tVXo3mAtV
Related Topics
Sum Numbers in HTML Inputs, JavaScript
Display Image from Http Response With Image Content Type
Prevent JavaScript String That Contains a Number from Dropping Zeros
Getting Typeerror: This.Props Is Undefined on Reactjs
Javascript Date Validation ( Dd/Mm/Yyyy) & Age Checking
Highlight Menu Item When Scrolling Down to Section
Call JavaScript Function Onchange Event of Dropdown List
How to Check If Character Is a Letter in JavaScript
Will a React Component Re-Render If Its Props Are Updated, But Don't Change in Value
How to Hide the Android Keyboard Using JavaScript
How to Move the Mouse Pointer and Click With Selenium Webdriver JavaScript
How to Add and Remove Class to Menu Items on Mouseover
Google Charts - Labels Are Not Showing
Javascript: Get All Months Between Two Dates
Prevent Bootstrap Modal Window from Closing on Form Submission
Prevent Particular Child Element from Firing Parent'S Mouseover Event in Jquery
How to Increment a Number After Every 1 Second Using JavaScript