bxSlider - Play/Pause all sliders on page - javascript

I have two sliders on a page. Called with the same set of times and settings. One slider is a image slider, the other a sort of caption for it. Both in drastically different areas of the html.
bxslider is creating a play/pause for each slideshow, but I want some way of having one button that pauses all slideshows on the current page. This is because the slideshows are relative to each other and must keep a:
Slider A - Slide 1 / Slider B - Slide 1
Slider A - Slide 2 / Slider B - Slide 2
Slider A - Slide 3 / Slider B - Slide 3
etc.
Right now, when I pause one slideshow, the other continues and when the play is pressed, they are no longer in sync.
.bxslider & .bxslider-content are both my bxslider classes.
Thanks!
<script type="text/javascript">
$(document).ready(function () {
$('.bxslider, .bxslider-content').bxSlider({
mode: 'fade',
auto: true,
ease: 'cubic-bezier(0.42,0,0.58,1)',
pager: false,
controls: false,
autoControlsCombine: true,
autoControls: true,
pause: 8000,
speed: 800
});
});
</script>

Try
var slider=$('.bxslider').bxSlider({
//code here
});
var slider1=$('.bxslider-content').bxSlider({
//code here
});
$(document).on('click','.pause',function(){
slider.stopAuto();
slider1.stopAuto();
});
$(document).on('click','.play',function(){
slider.startAuto();
slider1.startAuto();
});
Fiddle http://jsfiddle.net/CDvmk/

Related

bxSlider - Wrong pause between slides when using pager

I'm running the latest version of Bxslider (4.2.14), everything works great except for the pager.
When using the pager to switch between slides, pause is much shorter than it should be:
Steps to reproduce:
Open the Fiddle: https://jsfiddle.net/Bruno42/smvhe3o4/7/
When Slide #2 appears wait ~3-4 seconds
Switch back to Slide #1 by clicking on the pager
Pause should then last 5 seconds (like during the "auto" mode), but instead it lasts only 1-2 seconds
I think the Pause countdown should be resetted to 5 seconds every time a slide is selected using the Pager.
I spent a while trying to figure out a solution in the clickPagerBind() function in jquery.bxslider.js by using clearInterval(slider.interval); to fix this, however it did not work (slider gets stuck after that).
Code used to load bxSlider (also available on my JsFiddle):
$('.bxslider').bxSlider({
maxSlides: 1,
slideWidth: 800,
pager: true,
pagerType: 'full',
autoHover: false,
auto: true,
stopAuto: false,
stopAutoOnClick: false,
speed: 1000,
pause: 5000,
mode: 'horizontal',
controls: false,
});
I would really appreciate your help on that.
The speed: 1000 might be too fast for the transition to complete and for startAuto() and stopAuto() methods to start or end. In order to control what methods are called during transition we can use a callback from the bxSlider API. Make a custom function and call it on either onSlideAfter or onSlideBefore. The following demo calls function pagerFix() onSlideAfter:
function pagerFix($bx, prv, nxt) {
bx.stopAuto(true);
bx.goToSlide(nxt);
bx.stopAuto(false);
bx.startAuto(true);
}
When initializing .bxSlider() make sure you reference it so you can call the methods.
let bx = $('.bxslider').bxSlider(...
Fiddle
(uses onSlideBefore)
Demo
(uses onSlideAfter)
let bx = $('.bxslider').bxSlider({
slideWidth: 800,
auto: true,
speed: 1000,
pause: 5000,
controls: false,
onSlideAfter: pagerFix
});
function pagerFix($bx, prv, nxt) {
bx.stopAuto(true);
bx.goToSlide(nxt);
bx.stopAuto(false);
bx.startAuto(true);
}
<link href='https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css' rel='stylesheet'>
<ul class="bxslider" style="width: 800px; height: 250px;">
<li><img src="https://placehold.it/800x250/5E7074/FFFFFF&text=1"></li>
<li><img src="https://placehold.it/800x250/5E7074/FFFFFF&text=2"></li>
<li><img src="https://placehold.it/800x250/5E7074/FFFFFF&text=3"></li>
<li><img src="https://placehold.it/800x250/5E7074/FFFFFF&text=4"></li>
</ul>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js'></script>

Making to slide more than one item ahead in OwlCarousel

I having two synced OwlCarousel sliders. The goal is to achieve - group of items sliding in first main slider. Now it's sliding from 1 to 2 to 3 etc. I need it to slide from 1 to 5. Is there some values i can change in js?
https://codepen.io/washaweb/pen/KVRxRW
.owlCarousel({
items : slidesPerPage,
dots: false,
nav: false,
autoplay: false,
smartSpeed: 200,
slideSpeed : 500,
mouseDrag: false,
touchDrag: false,
pullDrag: false,
slideBy: '1', //alternatively you can slide by 1, this way the active slide will stick to the first item in the second carousel
responsiveRefreshRate : 100
And how can i change sliding animation? For example fadein
You could try to.owl.carousel event:
var jumpTo = 5;
$('#sync2').trigger('to.owl.carousel', jumpTo);
Carousel #sync2 jumps to slide number 5. You can trigger this by other owl events or by clicks.

How do I deal with cloned slides to create a seamless html5 video slider in SlickJS?

I'm using slickJS to create a slider with HTML5 video backgrounds for each slide. Here's my SlickJS init code:
$homeSlider.slick({
adaptiveHeight: true,
arrows: false,
autoplay: true,
autoplaySpeed: 4000,
dots: true,
fade: false,
initialSlide: startSlide,
lazyLoad : 'progressive',
onBeforeChange: beforeSlickChange
});
Everything's working fine except that when I reach the end of the list of slides and try to go to the next slide (this loops back to the first slide), Slick shows a cloned slide for a moment and then the real first slide. Because of this, I'm unable to get a seamless transition between the last and first slide going in either direction. When I click forward to the first slide from the last slide or to the last slide from the first slide, the dummy slide appears (with no video playing) and after about 500ms or so, the real slide takes its place with the video playing.
What I'd like to happen is for the video to be playing seamlessly when transitioning two slides. I tried playing the video on the cloned slide and then playing the real slide's video from a slightly later point so that when the cloned slide disappeared, the real slide's video would be at the same point and there would be no noticeable change. However, the amount of time it takes for the cloned slide to disappear seems inconsistent.
Does anyone have a solution for this problem? Changing the slider to fade instead of slide fixes this problem, but I'd like to keep the sliding behavior. Thank you!
I managed to solve this problem. What I did was to play the video on the cloned slide and the real slide and then set the currentTime property of the real slide to that of the cloned slide on the afterChange event. The code looks like this:
Init code:
$homeSlider.slick({
adaptiveHeight: true,
arrows: false,
autoplay: true,
autoplaySpeed: 4000,
dots: true,
fade: false,
initialSlide: startSlide,
lazyLoad : 'progressive',
onBeforeChange: beforeSlickChange,
onAfterChange: afterSlickChange
});
onBeforeChange handler:
function beforeSlickChange(slick, currentSlide, nextSlide) {
if(hasVideoBG(currentSlide) === true && isMobile(mobileQuery) === false) {
getSlideVideoByIndex(currentSlide).currentTime = 0;
getSlideVideoByIndex(nextSlide).currentTime = 0;
}
if(hasVideoBG(nextSlide) === true && isMobile(mobileQuery)=== false) {
if(nextSlide === 0) {
$homeSlider.find(".slick-cloned:eq(1) video").get(0).currentTime = 0;
$homeSlider.find(".slick-cloned:eq(1) video").get(0).play();
}
if(nextSlide === (getSliderCount() - 1)) {
$homeSlider.find(".slick-cloned:eq(0) video").get(0).currentTime = 0;
$homeSlider.find(".slick-cloned:eq(0) video").get(0).play();
}
getSlideVideoByIndex(nextSlide).play();
}
}
onAfterChange handler:
function afterSlickChange(slick, currentSlide) {
if(currentSlide === 0) {
var $slideVideo = $homeSlider.find(".slick-cloned:eq(1) video").get(0);
getSlideByIndex(currentSlide).find("video").get(0).currentTime = $slideVideo.currentTime
} else if(currentSlide === (getSliderCount - 1)) {
var $slideVideo = $homeSlider.find(".slick-cloned:eq(0) video").get(0);
getSlideByIndex(currentSlide).find("video").get(0).currentTime = $slideVideo.currentTime
}
}
Basically I am resetting the currentTime of both the real and cloned slide videos to 0 and playing them before the slide changes. After the slide changes, I'm setting the currentTime property of the real slide to that of the cloned slide. This makes it so that when the cloned slide disappears, the real slide is playing the same video at the same time and the transition is seamless.

Nivo Slider - Stop animation when only one image

I am using the jQuery plugin for Nivo Slider and need to find a way to stop it from transitioning when only one image exists.
Can you set the option:
manualAdvance: true
Will that help? This is the documentation for the latest NivoSlider update.
If this wont help, can you post the code you are using to enable the slider?
This will be the full code:
$(window).load(function() {
$('#slider').nivoSlider({
slices: 1, // For slice animations
startSlide: 0, // Set starting Slide (0 index)
manualAdvance: true, // Force manual transitions
captionOpacity: 0.8, // Universal caption opacity
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
There is probably a better way to do it but it works for me:
if($('#slider img').length == 1) {
$('#slider').nivoSlider({});
$('.nivo-controlNav').css('display', 'none');
$('.nivo-directionNav').css('display', 'none');
$('#slider').data('nivo:vars').stop = true;
} else {
$('#slider').nivoSlider({
effect: 'slideInLeft'
});
}
PS. It's important to check the number of images before initializing Nivoslider because it seems to duplicate image tags...
None of the answers quite worked for me, because I still wanted a single image to display with a caption. I ended up using slightly different options to initialise the nivoSlider depending on the number of images (my images were in a containing div with the id 'hero-images'):
var numImages = $('#hero-images img').length;
if (numImages === 0) {
//No images - hide the block
$('#hero-images').hide();
} else if (numImages === 1) {
// 1 image - disable controls and set to manual advance to prevent animation
$('#hero-images').nivoSlider({
directionNav: false,
manualAdvance: true,
controlNav: false
});
} else {
// Multiple images, set up as normal
$('#hero-images').nivoSlider({
effect: 'fade',
directionNav: false
});
}

How can I alter anythingSlider so that it disables the next / previous buttons when only 1 <li> in the <ul>?

I have a page with multiple instances of anythingSlider on it and I'm using PHP to dynamically load pages that swap out the content in them.
Reference: http://ceedcreative.com/CEED_2.0/
I would like to edit the anythingSlider to disable the previous / next buttons if the UL it's displaying only has one LI within it.
In other words, no buttons, just a clean div that's the same heigh and width (no scrolling) if there's only one image.
Try this
$('.anythingSlider:not("#topSlider")').each(function(i, slider) {
// If any slider has less than 2 let members
if ( $("ul li", slider).length < 2 ) {
// don't apply the slider functionality
return;
}
$(slider).anythingSlider({
easing: "easeInOutExpo",
autoPlay: false,
delay: 3000,
startStopped: false,
animationTime: 600,
hashTags: false,
buildNextPrevButtons: true,
buildNavigation: false
});
});
If, for some reason, that doesn't work, this snippet will inspect the list length of every anythingSlider and hide the arrow buttons for any list that is only 1 in length (after excluding the front and back clones).
$(".anythingSlider").each(function(i, slider) {
if ( $("ul li", slider).not(".cloned").length == 1 ) {
$(".arrow", slider).hide();
}
});

Categories