I am trying to solve this problem. I have carousel with few video slides. When slide is loaded (active) I need that it will shows 3 seconds poster and after few seconds (for example 3s) it will play the video. I figured out how to make it for one slide, however I struggling to get working whole carousel.
HTML
<div class="my-1 my-lg-5">
<div id="main_carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#main_carousel" data-slide-to="0" class="active"></li>
<li data-target="#main_carousel" data-slide-to="1" ></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<video id="video_background" class="video-js vjs-16-9" poster="img/xxx.jpg" muted loop data-setup='{}'>
<source src="xxx.mp4" type="video/mp4" />
</video>
</div>
<div class="carousel-item">
<video id="video_background" class="video-js vjs-16-9" poster="xxx.jpg" muted loop data-setup='{}'>
<source src="xxx.mp4" type="video/mp4" />
</video>
</div>
</div>
<a class="carousel-control-prev" href="#main_carousel" 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="#main_carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Working script for only one slide (any other slides cannot be in carousel)
let player = document.querySelector('#video_background');
player.addEventListener("canplay", function (){
setTimeout(function(){
player.play();
}, 3000);
})
Then I tried this for BS4 carousel, however it didn't work.
$('#main_carousel').carousel({
interval: 6000
}).on('slide.bs.carousel',function(){
var vids = $(this).find(".active video");
setTimeout(function() {
vids[0].play();
}, 3000);
});
I would be glad for any help. Thank you.
Related
I am facing a strange bug on javascript which I have tried different ways to solve it but in this case, it has beaten me. The idea of this code is to show the available gallery of photos when the user presses the element tag h5 '<h5 class="m" id="myelem">Galery of photos</h5>', then the website shows the galery with SweetAlert2 and Bootstrap.
So when I do click to the h5 element it runs the function called sweetCarousel which shows the gallery of photos. At this time I am calling the function in this way sweetCarousel.bind(this, ...) to receive the parameters, in this case, the URL from the photos.
I am injecting HTML code inside the Sweetalert. As a condition the HTML inside the alert changes depending on how many photos I want to show. The interesting thing which is happening is that when I only load one photo like this:
document.getElementById("myelem").addEventListener("click", sweetCarousel.bind(this, "./img/image1.jpg"));
The browser set the parameters value on this way:
img1 = "./img/image1.jpg", img2 = MouseEvent {isTrusted: true, screenX: 449, screenY: 442, clientX: 449, clientY: 339, …}, img3 = ""
So the first conditional if (img2.length == 0) { skips it and goes to the second conditional if (img3.length == 0) {.
I do not know why is happening this bug. I planned to evaluate the code in the first conditional as I only passed one image as a parameter
function sweetCarousel(img1, img2 = "", img3 = "") {
if (img2.length == 0) {
eee = '<div class=""> <div class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="' + img1 +'"> </div> </div> <!-- Controls --> </div></div>';
} else if (img3.length == 0) {
eee = '<div class=""> <div class="carousel slide" data-ride="carousel"> <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> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="' + img1 +'"> </div> <div class="item"> <img src="' + img2 +'"> </div> <!-- Controls --> <a class="left carousel-control" 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" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div>';
} else {
eee = '<div class=""> <div class="carousel slide" data-ride="carousel"> <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> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="' + img1 +'"> </div> <div class="item"> <img src="' + img2 +'"> </div> <div class="item"> <img src="' + img3 +'"> </div> </div> <!-- Controls --> <a class="left carousel-control" 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" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div>';
}
Swal.fire( {
html: eee,
width: '50%',
background: "black !important",
showCloseButton: true,
showCancelButton: false,
showConfirmButton: false,
focusConfirm: false
});
$(".carousel").swipe({
swipe: function(event, direction, distance, duration, fingerCount, fingerData) {
if (direction == 'left') $(this).carousel('next');
if (direction == 'right') $(this).carousel('prev');
},
allowPageScroll:"vertical"
});
}
This is the expected behavior. When you provide an event listener to the addEventListener() method, the listener must implement the EventListener interface.
So if you want to provide additional arguments to the listener, I suggest you to use closures.
document.getElementById("trigger1").addEventListener("click", eventListener( ["./img/image1.jpg"]).bind(this));
document.getElementById("trigger2").addEventListener("click", eventListener(["./img/image1.jpg","./img/image2.jpg"]).bind(this));
document.getElementById("trigger3").addEventListener("click", eventListener(["./img/image1.jpg","./img/image2.jpg","./img/image3.jpg"]).bind(this));
function eventListener(images){
return function(event){
console.log('images', images);
console.log('event', event);
}
}
<button id="trigger1">Trigger 1</button>
<button id="trigger2">Trigger 2</button>
<button id="trigger3">Trigger 3</button>
And also I suggest you to pass images as an array instead of passing them as separate arguments. By using array, you can replace if/else blocks with a loop to create a more generic function. Imagine that you will want to provide 50 images in future, then you will have to create 50 if/else blocks. You can do it as followings:
document.getElementById("trigger").addEventListener("click", eventListener(["./img/image1.jpg", "./img/image2.jpg", "./img/image3.jpg"]).bind(this));
function eventListener(images) {
return function(event) {
const indicators = images.map(function(image, index) {
return `
<li
data-target="#carousel-example-generic"
data-slide-to="${index}"
${index === 0 ? `class="active"` : ``}
></li>
`
})
const imageItems = images.map(function(image, index) {
return `
<div class="item ${index === 0 ? `active` : ``}">
<img src="${image}">
</div>
`
})
const carousel = `
<div class="">
<div class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
${indicators}
</ol>
<div class="carousel-inner" role="listbox">
${imageItems}
</div>
<!-- Controls --> <a class="left carousel-control" 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" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
</div>
</div>
`
console.log(carousel)
}
}
<button id="trigger">Trigger</button>
How to add progress bar to bootstrap carousel and give each item different interval and preserve the on hover carousel pause characteristic?
I have try many time to combine both together, but it is not working smoothly, the jquery animate always run faster than setInterval, and i don't know how to stop the animate on progress bar when hover on the carousel.
Anyone know how to do this?
here is my work:
<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>
...
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
#php
$intervals = [
'1000', '2000', '3000', '4000'
];
#endphp
#foreach ($intervals as $interval_key => $interval)
<div class="item #if ($interval_key == 0) active #endif" data-interval="{{$interval}}" data-last-item="#if ((count($intervals) - 1) == $interval_key) true #else false #endif">
<img src="http://placehold.it/400x200" alt="..." />
<div class="carousel-caption">
{{$interval_key}}
</div>
</div>
#endforeach
</div>
<!-- Controls -->
<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>
<div class="progress_bar">
<div class="percentage">
</div>
</div>
here is my javascript:
var t;
var start = $('#myCarousel .carousel-inner .item.active').data('interval');
console.log(start);
t = setTimeout("$('#myCarousel').carousel({interval: 1000});", (start - 1000));
$(".progress_bar .percentage").animate({'width':'100%'}, start);
$(".progress_bar .percentage").animate({'width':'0%'}, 30);
$('#myCarousel').on('slid.bs.carousel', function () {
clearTimeout(t);
var duration =$('#myCarousel .carousel-inner .item.active').data('interval');
console.log(duration);
$('#myCarousel').carousel('pause');
t = setTimeout("$('#myCarousel').carousel();", (duration - 1000));
$(".progress_bar .percentage").animate({'width':'100%'}, duration);
$(".progress_bar .percentage").animate({'width':'0%'}, 30);
});
$('.carousel-control.right').on('click', function(){
clearTimeout(t);
});
$('.carousel-control.left').on('click', function(){
clearTimeout(t);
});
I am using bootstrap as a framework for a website I am helping with. On the front page of the website is a carousel. For some odd reason, the carousel "slide" transition is very smooth when clicking on the left arrow (PREVIOUS); however it seems to go all weird when clicking the right arrow (NEXT)
I've tried looking online as well as in the bootstrap files (CSS and JS)
I cannot seem to find anything. I've tried re-copying the code from the bootstrap website for carousels. Not sure what's wrong.
URL: www.acebac.org
Help? :D
Here is JQuery code:
var $item = $('.carousel .item');
var $wHeight = $(window).height();
$item.eq(0).addClass('active');
$item.height($wHeight);
$item.addClass('full-screen');
$('.carousel img').each(function() {
var $src = $(this).attr('src');
var $color = $(this).attr('data-color');
$(this).parent().css({
'background-image' : 'url(' + $src + ')',
'background-color' : $color
});
$(this).remove();
});
$(window).on('resize', function (){
$wHeight = $(window).height();
$item.height($wHeight);
});
$('.carousel').carousel({
interval: 5000,
pause: "false"
});
HTML code:
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="img/bg.jpg" data-color="lightblue" alt="First Image">
<div class="carousel-caption">
<h3>First Image</h3>
</div>
</div>
<div class="item">
<img src="img/bg1.jpg" data-color="firebrick" alt="Second Image">
<div class="carousel-caption">
<h3>Second Image</h3>
</div>
</div>
<div class="item">
<img src="img/bg2.jpg" data-color="violet" alt="Third Image">
<div class="carousel-caption">
<h3>Third Image</h3>
</div>
</div>
</div>
<!-- Controls -->
<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>
See Demo:Demo Carousel Bootstrap
I'm trying to use this template with a custom carousel.
I want the carousel to replace the default header, but when I put the carousel code there, nothing happens.
When I first tried it did appear, but the left and right arrows would not function properly.
Here is the carousel:
<header id="myCarousel" class="carousel slide">
<!-- 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>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('');"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('');"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('');"></div>
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
And these scripts are at the bottom of the body
// Closes the sidebar menu
$("#menu-close").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
// Opens the sidebar menu
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
// Scrolls to the selected menu item on the page
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
The reason the carousel wasn't showing up is that the carousel has to be inside the header, not the header itself. Change this
<header id="myCarousel" class="carousel slide">
...
</header>
To this
<header>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
...
</div>
</header>
The previous and next buttons aren't working because your page has a smooth scrolling plugin. Just change this line
$('a[href*=#]:not([href=#])').click(function() { ... }
So that it filters out the carousel buttons, like so
$('a[href*=#]:not([href=#]):not([href=#myCarousel])').click(function() { ... }
(Demo)
Take a look at this Fiddle.
I set the fiddle up with the template and have a Bootstrap carousel fullscreen in place of the image.
The issue why you could not get it to work was because the template site uses a scroll-to in the menu links.
It was a simple fix, all that was needed was to swap the tags to div.
You could use <button>but this would have a shaded gray edge area in from each side.
<!-- Left and right controls -->
<div 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>
</div>
<div 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>
</div>
I'm trying to make a carousel with videos. With the images it works fine the image are responsive even in mobile view. But with videos the width is responsive but not the height. Basically I would like to achieve the same comportement with a carousel image but with a video. I've tried many tricks online but none is doing it. My video is 1024/552px
Tried my best at a fiddle. You can see if you load the fiddle with a small width, it keeps the same height and it isn't responsive but the width of the carousel/video is (it crops the video on the sides though). It doesn't have the same comportement as an image. As you will see I have included an image in the second slide to further demonstrate my problem.
https://jsfiddle.net/687bsb21/1/
Here's the code :
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div align="center">
<video autoplay loop>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" width="1024" height="552" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="carousel-caption">
<h3>hello</h3>
<p>hello</p>
</div>
</div>
<div class="item">
<img src="http://dummyimage.com/1024x552/000/fff" class="img-responsive" alt="asfds">
<div class="carousel-caption">
<h3>hello</h3>
<p>hello.</p>
</div>
</div>
<a class="left carousel-control" href="#carouselHelp" 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="#carouselHelp" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Thanks for helping.
add your css,
video{
width:100%
}
also adding the width/height directly to the tag works:
<video autoplay loop width="1024" height="552">
regards.
This is the best solution:
<div class="container">
<video><source src="video.mp4" type="video/mp4"></video>
</div>
.container{
position: relative;
width: 100%
}
.container video{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}