I am trying to make the bxslider cycle through three slides and then return to the first slide and stop the slideshow in that position. I've tried different bits of code but I can't find anything that specifically addresses this kind of action. Any help is appreciated.
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
autoControls: true,
pause: 5000,
slideMargin: 0
});
});
The simplest way I can think of would be to insert a second copy of the first slide at the end so you have three slides and then another copy of the first and you tell it not to auto-repeat.
$(document).ready(function() {
$('.bxslider').bxSlider({
auto: true,
autoControls: true,
pause: 5000,
infiniteLoop: false, // don't auto-repeat
slideMargin: 0
});
});
Beyond that, you could specify a callback and after the third slide finishes displaying, you could stop the auto-advance and then tell it to goto the first slide.
$(document).ready(function() {
var slider = $('.bxslider').bxSlider({
auto: true,
autoControls: true,
pause: 5000,
infiniteLoop: false,
slideMargin: 0,
onSlideNext: function($slideElement, oldIndex, newIndex) {
if (newIndex >= 3) {
slider.stopAuto();
slider.goToSlide(0);
}
}
});
});
If you only have three slides (a fact you haven't included that would have helped us), then perhaps you won't get an onSlideNext event when infiniteLoop is off. In that case, you could use the onSlideAfter method and trigger after showing the third slide.
$(document).ready(function() {
var slider = $('.bxslider').bxSlider({
auto: true,
autoControls: true,
pause: 5000,
infiniteLoop: false,
slideMargin: 0,
onSlideAfter: function($slideElement, oldIndex, newIndex) {
if (newIndex >= 2) {
slider.stopAuto();
setTimeout(function() {
slider.goToSlide(0);
}, 5000); // put whatever time here you want the 3rd slide to show
}
}
});
});
Did you try this using callback?
var slider = $('.bxslider').bxSlider(options); //your default options here.
$('.bxslider').bxSlider({
onSlideAfter: function($slideElement, oldIndex, newIndex){
//if slide number is 3
if(newIndex === 2){
slider.goToSlide(0);
slider.stopAuto();
}
});
What this code will do is, it will callback onSlideAfter function as soon as the slide is changed.. If the slide index is 3 then the code will stop autoplay after going to first slide..
Used callbacks and methods :
onSlideAfter (callback)
goToSlide (method)
Reference here : http://bxslider.com/options
Related
I'm using slick.js as a content browser. As such, my slider has a number of images to peruse through. I'd like to be able to refresh the web page and have slick remember the last slide I was viewing. I'm new to jquery and javascript so any guidance would be appreciated.
Here's the code I'm working with:
$(document).ready(function(){
// Carousel Options
$('.mycarousel').slick({
infinite: true,
accessibility: true, mobileFirst: true,
adaptiveHeight: true,
arrows: false, draggable: true,
useCSS: true, cssEase:'linear', focusOnSelect: true,
dots: true, appendDots:$(document.innerHTML = "<p> </p>"),
lazyLoad: 'ondemand',
});
$('.leftArrow').on('click', function(){
$('.mycarousel').slick("slickPrev");
});
$('.rightArrow').on('click', function(){
$('.mycarousel').slick("slickNext");
});
$(window).on('resize orientationchange', function() {
$('.mycarousel').slick('resize');
});
});
I myself did some research and this is what I found:
$('#yourCarousel').on('slid.bs.carousel', function () {
var currentSlide = $('#yourCarousel div.active').index();
sessionStorage.setItem('lastSlide', currentSlide);
});
if(sessionStorage.lastSlide){
$("#yourCarousel").carousel(sessionStorage.lastSlide*1);
}
Instead of sessionStorage you could also use:
localStorage.setItem('lastSlide', currentSlide)
I need to add class inactive in prev if first slider and for next if end of the slider.
$('.bxslider').bxSlider({
nextSelector: '#slider-next',
prevSelector: '#slider-prev',
nextText: 'Nex →',
prevText: '← Prev',
infiniteLoop: false,
});
https://jsfiddle.net/uewLafk1/
According to the documentation for the bxSlider plugin, there's an onSlideAfter callback which triggers after every transition. In addition, it has methods for getCurrentSlide and getSlideCount.
Using all of these three, you can do the following:
var slider = $('.bxslider').bxSlider({
nextSelector: '#slider-next',
prevSelector: '#slider-prev',
nextText: 'Next →',
prevText: '← Prev',
infiniteLoop: false,
onSlideAfter: function() {
if (slider.getCurrentSlide() == 0)
// First slide
$('#slider-prev').addClass('inactive');
else if (slider.getCurrentSlide() == slider.getSlideCount() - 1)
// Last slide
$('#slider-next').addClass('inactive');
else
$('#slider-next, #slider-prev').removeClass('inactive');
}
});
Fiddle: https://jsfiddle.net/kbfdebzg/
I am using a bxSlider plugin to create a JS web application. On one slide there is a form which needs to be validated before I can get to a next slide. For validation I use jQuery Validate plugin which returns true / false when the form is valid.
How to make bxSlider not to go to next slide when form is not valid? I would prefer to use default bxSlider next/prev controls.
Function that initialize bxSlider:
bxSliderInit: function() {
var $slider = $(dom.slider);
$(dom.body).on('click', dom.pageLink, function(e) {
e.preventDefault();
_this = $(this);
slideFinished = true;
//newSlide = _this.data('slide-index');
app.slidePaging();
});
slider = $slider.bxSlider({
mode: 'horizontal',
easing: 'ease-out',
infiniteLoop: false,
touchEnabled: false,
preventDefaultSwipeY: true,
preventDefaultSwipeX: true,
responsive: false,
slideWidth: 1024,
pager: false,
prevText: '<i class="icon icon-arrow-left"></i>',
nextText: '<i class="icon icon-arrow-right"></i>',
onSlideBefore: function($slideElement, oldIndex, newIndex) {
app.slideValidation($slideElement, oldIndex, newIndex);
}
});
},
BxSlider callback onSlideBefore to validate the form
slideValidation: function($slideElement, oldIndex, newIndex) {
var $thisSlidevalidationForm = $(dom.slider).children().eq(oldIndex).find(dom.formValidationClass),
validationFromExist = $thisSlidevalidationForm.length > 0 ? true : false;
if (oldIndex < newIndex) {
if (validationFromExist) {
if (!$thisSlidevalidationForm.valid()) {
//slider.dontDoTransition
}
}
}
},
Everything seems to work fine, I just can't force the bxSlider to stay on the current slide when the form is not valid...
Thank u for ur help!
After some experiments and ideas, here is the solution:
onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
return currentSlideNumber--;
}
I realised that lightSlider does not have a resume playback function and will stop playing once any slide is clicked. Is there any way we can add in this functionality?
$(document).ready(function() {
var slider = $('#demo').lightSlider({
item:1,
slideMargin:0,
pause:8000,
enableTouch:true,
auto:true,
loop:true,
controls:false,
pauseOnHover: true,
});
$('#demo').parent().on('mouseenter',function(){
slider.pause();
});
$('#demo').parent().on('mouseleave',function(){
slider.play();
});
});
I tried adding a resume play functionality with the mouseleave function but it does not work on mobile. Will appreciate if any one of you gurus has any suggestion. Thanks in advance.
i Found the solution.
01.use this lightSlider.js file link : http://raw.githack.com/sachinchoolur/lightslider/1.1.2/src/js/lightslider.js
02.script on the page:
$(window).load(function(){
$('#lightSlider').lightSlider({
item: 4,
auto:true,
slideMargin: 2,
loop :true,
pause: 4000,
speed: 1000,
onAfterSlide: function () {
$('#lightSlider iframe').remove();
$('#lightSlider li').removeClass('hasIframe');
}
});
});
found from this
I want the bxSlider to automatically start the slideshow without the user clicking on it. This is my code (which isn't working):
slider = $('.slider1').bxSlider({
slideWidth: 1012,
slideHeight:200,
minSlides: 1,
slideMargin: 0,
controls: false,
auto: true,
autoStart: true
});
slider.startAuto();
What's wrong with this? What happens is that images do load, but it never autoscrolls, the user always have to choose one of the pager dots to manually scroll through. What's wrong with my code?
You should use
$(document).ready(function(e) { });
or
$(window).ready(function(e) { });
in between the code.
so the correct one should be,
$(document).ready(function(e) {
$('.slider1').bxSlider({
slideWidth: 1012,
slideHeight:200,
minSlides: 1,
slideMargin: 0,
controls: false,
auto: true,
});
});
hope this will help you...!
This Code worked for me!
var slider = $('#slider').bxSlider();
$('.bx-next, .bx-prev, .bx-pager a').click(function(){
// time to wait (in ms)
var wait = 1000;
setTimeout(function(){
slider.startAuto();
}, wait);
});
You can set wait on 0 if you don't want a delay. And because I used: pagerCustom: '#pager', I changed '.bx-pager' a into '#pager a'.
This was all , what was missing and i got it from bxslider official page
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
auto: true,
autoControls: true,
pause: 2000
});
});
Try setting autoControls: true (from http://bxslider.com/examples/auto-show-start-stop-controls)
Okay! I got the same problem! And none of the solution worked above. But I found what was wrong!
1 - First Check and make sure you have auto:true in jQuery script like below:
$('.bxslider').bxSlider({
auto: true,
pause: 3000,
pager: true
});
2 - The main jQuery file that you are using, kindly update that jQuery file, you might be using old jQuery file! (#2 was the issue in case of mine)
Thanks!
This code is also working perfectly
jQuery(function(e){
jQuery('.bxslider').bxSlider({
mode: 'fade',
captions: true,
autoplay:true,
autoControls: true,
auto: true,
autoplaySpeed:1000
});
});
I suggest the following remedy. onSlideAfter is executed after each slide transition. Then this code will cause slider.startAuto() to be executed each time this happens, starting auto show.
var slider = $(".sliderBx ul").bxSlider({
auto: true,
pager: true,
controls: true,
onSlideAfter: function () {
slider.startAuto();
}
});