I have built a bootstrap video carousel. It is working just fine but, the only problem I have is the carousel keeps sliding to the next slide after 5 seconds. How do I make it stop autosliding and only slide when the user clicks on the left or right arrows? I have pasted the code below.
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-pause=hover>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" autoplay muted id="homevid">
<source src="C:\Development Software\Sample Website\videos\Michael Vick 88 yard touchdown pass to DeSean Jackson.mp4" />
</video>
</div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" autoplay muted id="homevid">
<source src="C:\Development Software\Sample Website\videos\Vick to Jeremy Maclin for 50 Yard TD.mp4" />
</video>
</div>
</div>
<div class="item">
<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" autoplay muted id="homevid">
<source src="C:\Development Software\Sample Website\videos\Michael Vick Scramble Plays vs Rams 2011.mp4" />
</video>
</div>
</div>
</div>
By adding data-interval="false"
<div id="carousel-example-generic" class="carousel slide" data-interval="false" data-ride="carousel" data-pause="hover" >
From the documentation
Option - Interval - ..If false, carousel will not automatically cycle.
2021 Update
In Bootstrap 5 it is data-bs-interval="false"
<div id="carousel-example-generic" class="carousel slide" data-bs-interval="false" data-ride="carousel" data-pause="hover">
Documentation
There are two ways.
1.
Update 2022: Bootstrap 5.x
In your HTML code, you need to use data-bs-interval="false"
<div id="your-carousel-id" class="carousel slide" data-bs-interval="false">
</div>
Bootstrap 4.x
In your HTML code, you need to use data-interval="false"
<div id="your-carousel-id" class="carousel slide" data-interval="false">
</div>
2.
If you want to do with the help of Jquery then you need to add.
// document ready
$(document).ready(function(){
// Event for pushed the video
$('#your-carousel-id').carousel({
pause: true,
interval: false
});
});
Thanks :)
To stop the autoplay is by just removing the attribute data-ride=”carousel” from the htmlcode
<div id="carousel-example" class="carousel slide" data-ride="carousel">....</div>
There is another way to stop autoplay just add below code in your js file
$(window).load(function() {
$('.carousel').carousel('pause');
});
Paste this code on your custom Javascript file.
$('.carousel').carousel({
interval: false
});
In react-bootstrap in order to stop cycling you have to use
<Carousel interval={null}>
...
</Carousel>
There is an update on bootstrap
https://getbootstrap.com/docs/5.1/components/carousel/
data-bs-interval="false"
for bootstrap v5.2:
Just remove "data-bs-ride:carousel" part from the div tag having "carousel slide" in order to stop the auto-slide
By adding data-interval="false" and removing data-ride="carousel" to the carousel id or class
I spent a lot of time on why data-bs-ride=false does not work for this and i understand it now.
In version 5.0 and 5.1, notice in documentation under options subsection it says
Autoplays the carousel after the user manually cycles the first item. If set to 'carousel', autoplays the carousel on load.
This just means that data-bs-ride=false, data-bs-ride=true or data-ride="carousel" it will still auto slide so we have to use
data-interval="false" and remove data-ride="carousel"
But in version 5.2 the documentation says that
If set to true, autoplays the carousel after the user manually cycles the first item. If set to "carousel", autoplays the carousel on load.
So, we can stop the autoplay by just using data-bs-ride=false or just removing data-bs-ride tag bc it is by default false.
Related
I'm working with Carousel, it has indicators and text(both in the same amount of numbers), one indicator for one text/slide. I want the indicator should be the same place i.e it shouldn't move up or down in case text is less or more I achieved this with help of min-height.
Now I want that text should be center i.e same amount of margin from top and indicators so that it looks good, but I'm not able to do that I tried a lot but I couldn't achieve what I want. I saw solutions and tried them but those solutions didn't work for my code.
I hope you people will help me.
HTML:-
<div class="container">
<div class="row">
<div class="col-lg-7 col-md-8">
<div class="award-winning-content">
<h1>Meet an award-winning agency wholly-integrated for these times</h1>
<h1>It's all about communicating with real humanity</h1>
<h1>Person to person.<br/> H2H communication</h1>
<h1>Clients engage us to simplify. Humanize.</h1>
<h1>Make something good far better. And get it right, and remarkable, right away.</h1>
<!-- Carousel Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"><span class="color-line"></span></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>
</ol>
<!-- Carousel Indicators End -->
<img src="images/refresh-icon.png" alt="" /> REPLAY
</div>
</div>
</div>
</div>
Try to add a wrapper on your <h1> tags, for instance with the class my-text-wrapper.
This class should be a flexbox. You can then align your text using align-items (vertical) and justify-content (horizontal).
.my-text-wrapper{
display: flex;
align-items: center;
justify-content: center;
}
Maybe you have to add height: 100%; to the class, but therefore I would need to have a look at your css.
<div class="my-text-wrapper">
<h1>Meet an award-winning agency wholly-integrated for these times</h1>
</div>
<div class="my-text-wrapper">
<h1>It's all about communicating with real humanity</h1>
</div>
<div class="my-text-wrapper">
<h1>Person to person.<br/> H2H communication</h1>
</div>
<div class="my-text-wrapper">
<h1>Clients engage us to simplify. Humanize.</h1>
</div>
<div class="my-text-wrapper">
<h1>Make something good far better. And get it right, and remarkable, right
away.</h1>
</div>
I have carousel which displays video slides. The problem with that while playing the current video the carousel automatically transfers the view to the next corousel-item video. How do I solve this issue? Is it a bad way to display a video gallery using carousel?
<h4 class="stylish_headline center ">-Video Gallery-</h4>
<?php $rows= $data["img"];?>
<div class="row" id="posts">
<div class="col s12 m12 l12">
<div class="carousel " data-indicators="true" style="margin-top: -80px;" >
<?php
foreach ($rows as $row){?>
<a class="carousel-item " href="#one!" style=" width: 300px !important;">
<video class="responsive-video" controls>
<source src="video/<?= $row['VIDEO_LINK'] ?>" type="video/mp4">
</video>
</a>
<?php }?>
</div>
</div>
</div>
<script type="text/javascript" >
$(document).ready(function(){
$('.carousel').carousel({
});
});
</script>
I'm using Bootstrap's (3.3.5) Carousel to show a Slider on a page. Code is pretty simple and standard:
<div id="header-carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="pull-right carousel-indicators">
<li data-target="#header-carousel" data-slide-to="0" class="active"></li>
<li data-target="#header-carousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<article class="item active" style="background-image:url(foo.jpg);">
<div class="carousel-caption">
<h1>FOO</h1>
<h2>Caption</h2>
</div>
</article>
<article class="item" style="background-image:url(bar.jpg);">
<div class="carousel-caption">
<h1>BAR</h1>
<h2>Caption</h2>
</div>
</article>
</div>
</div>
I was missing the option to swipe on mobile devices, so I added jQuery mobile 1.4.5 to get this function like this:
$(document).ready(function() {
$("#header-carousel").swiperight(function() {
$(this).carousel('prev');
});
$("#header-carousel").swipeleft(function() {
$(this).carousel('next');
});
});
So far it works on mobile and tablets. But it also works on desktops, so one can't select the caption without triggering the swipe-methods. Is there a possibility to deactivate this behaviour?
I would ask you to disable it only for those devices without Touch support. So for that, you can try this:
function isTouchSupported () {
try {
document.createEvent("TouchEvent");
touch = true;
} catch (e) {
touch = false;
}
return touch;
}
The same program can be written in another way too:
function isTouchSupported () {
return 'ontouchstart' in document.documentElement;
}
And after initializing, you can unbind the events:
if (!isTouchSupported())
$("#header-carousel").off("swiperight").off("swipeleft");
edit: added () to isTouchSupported-call
Self Proof Check:
On my desktop Google Chrome, using F12 Developer Tools:
On my mobile Google Chrome, using jsBin's console tab.
i used toggle to hide paragraph through a video but i do not run
<div class="site-slider">
<div class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<div class="overlay"></div>
<video id="video_background" preload="auto" autoplay="true" loop="loop" volume="0" width="100%">
<source src="video.mp4" type="video/mp4"> Video not supported
</video>
<div class="slider-caption ">
<div class="hide">
<h2>Marketing Solutions Company</h2>
<p>feeling special</p>
</div>
<a href="#" class="slider-btn" id="polina onclick=" toggleContent()>Pause</a> </a>
</div>
</li>
</ul>
</div>
<!-- /.flexslider -->
</div>
<!-- /.slider -->
</div>
<!-- /.site-slider -->
</div>
how i can show this paragraph when i paused the video because i use display:none
This Line Needs to be:
Pause
There was one closing Tag to much and the `"? was missing behind the onClick Event.
But there are several other invalid HTML Tags too.
The <source> Tag doesn't gets closed for example.
If the code still does'nt work after correcting all HTML Markup please Post your Javascript Code as well.
I want to embed a youtube video in a bootstrap one page scroll web page, exactly in a carousel video slider.
I have a problem with both Chrome and Firefox (no problem using Safari).
Here is my code:
<section class="videos">
<div class="container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<ol class="carousel-indicators" style="top:125%">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" style="top:100px;">
<div class="item active">
<div style="text-align:center;">
<iframe width="853" height="480" src="http://www.youtube-nocookie.com/embed/XXXX?rel=0" frameborder="0" allowfullscreen></iframe>
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item">
<div style="text-align:center;">
<iframe width="853" height="480" src="http://www.youtube-nocookie.com/embed/XXXX?rel=0" frameborder="0" allowfullscreen></iframe>
<div class="carousel-caption">
</div>
</div>
</div>
</div>
I get two error:
In my console I get:
Blocked a frame with origin "https://www.youtube-nocookie.com" from accessing a frame with origin "http://www.domain.com". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.
Uncaught Error: Error calling method on NPObject.
The videos, appears as black boxes.
What should I do? Thanks
I'd recommend you using an object for the videos you want to embed in your site instead of the iframe. It has a better web browser independent behaviour and works as well with other video providers that enable sharing (dailymotion, vimeo)
<embed width="756" height="461" style="display: block;" src="http://www.youtube.com/v/nlcIKh6sBtc?autohide=1&version=3?autohide=1&version=3&autoplay=1" type="application/x-shockwave-flash" bgcolor="#000000" scale="scale" allowfullscreen="true" salign="tl" allowscriptaccess="never" wmode="opaque">
The above code snippet is an example of how to share a youtube video on a web page with various parameters. Hope this helped.