Bx-slider not infinite - javascript

I bought a theme from a website, and i have some problems with bxslider...when on the last slide, it does not show next slides until the last slide gets to the front of the slider, which does not look good. you can see the preview HERE. and the bought theme HERE
here is the code that generates the slides:
<ul class="top_video_slider">
<?=$this->topRestaurants(45.8, 23.0);?>
</ul>
$this->topRestaurants() returns the $string generated like so:
foreach($topRest as $restaurant) {
$slug = $service->create($restaurant['name'], false) . '-' . $restaurant['id'];
$photos = explode(',', $restaurant['images']);
$string .= '<li>
<div class="video_holder">
<img src="/uploads/'.$photos[0].'" alt="image">
</div>
</li>';
}
the jquery for it looks like this:
$('.top_video_slider').bxSlider({
slideMargin: 10, useCSS: false,
pager: true, auto: true, autoHover:true,
onSliderLoad: function(currentIndex){
$(".top_video_slider").css("visibility", "visible");
}});
can you please please help me? thanks!

I managed to fix it using the "maxSlides" option from bxslider...i modified it to be less than the total of slides.
the jquery looks like so:
$('.top_video_slider').bxSlider({
slideMargin: 10, useCSS: false,
pager: false, auto: true, autoHover:true, infiniteLoop: true, maxSlides: 8,
onSliderLoad: function(currentIndex){
$(".top_video_slider").css("visibility", "visible");
}});
All the slides show now, but there is no space next to the last one

Related

lightSlider plugin not working on first time load

I make the slider on my website using lightSlider,below html code i am using (note that i am using asp.net mvc) and i am using loop in load images
<ul id="imageGallery">
#foreach (var i in Model.Images)
{
<li data-thumb="#i" data-src="#i">
<img src="#i" />
</li>
}
</ul>
and here is code jquery to load my slider
$(document).ready(function () {
$('#imageGallery').lightSlider({
gallery: true,
item: 1,
thumbItem: 9,
slideMargin: 0,
speed: 500,
auto: true,
loop: true,
onSliderLoad: function () {
$('#imageGallery').removeClass('cS-hidden');
}
});
});
So my problem is slider displaying not correctly in the first time
Please see my slider is loaded here slider
But when i reload the page it is working correctly.
I am not sure what am i missing here?

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>

Getting images from itunes rss feed and putting the pics in a bxslider

So I am able to get the images of the albums from the itunes rss by using this code:
$("#parse").click(function (){
$(".bxslider").html("");
var country = $("#country").val();
var number = $("#top").val();
$.get("https://itunes.apple.com/"+country+"/rss/topsongs/limit="+number+"/xml" , function(data){
var itunesArray = $(data).find("entry");
itunesArray.each(function(){
var image = $(this).find("im\\:image").eq(1).text();
var audio = $(this).find("link").eq(1).attr("href");
HTML for my slider:
<div class="slider">
<ul class = "bxslider">
</ul>
</div>
I try to append the html by using this code:
$('.bxslider').append("<li><img src = "+image + " height = '100'
width ='100' >" + "</li>");
Jquery for slider:
$('.bxslider').bxSlider({
mode: 'fade',
//captions: true,
auto: true,
//autoControls: true
pagerCustom: '#bx-pager'
/*minSlides: 2,
maxSlides: 2,
slideWidth: 170,
slideMargin: 10,
ticker: true,
speed: 7000*/
});
I can get the images into the webpage but not inside the slider. I can see the arrows but I am unable to switch images and can see all of them at once. Im supposed to see them one at a time. I do not know whats going on. Any recommendations would be highly appreciated. Thank you!
I will suggest you to initialize your bxSlider inside $.get Ajax success callback i.e. after all images has been added to DOM (exactly after itunesArray.each() loop).
I think you have not posted the entire code but you can just refer below code and take the idea (this code may not work directly as it is):
$("#parse").click(function (){
$(".bxslider").html("");
var country = $("#country").val();
var number = $("#top").val();
$.get("https://itunes.apple.com/"+country+"/rss/topsongs/limit="+number+"/xml" , function(data){
var itunesArray = $(data).find("entry");
itunesArray.each(function(){
var image = $(this).find("im\\:image").eq(1).text();
var audio = $(this).find("link").eq(1).attr("href");
$('.bxslider').append("<li><img src = "+image + " height = '100' width ='100' >" + "</li>");
});//each loop end
$('.bxslider').bxSlider({
mode: 'fade',
//captions: true,
auto: true,
//autoControls: true
pagerCustom: '#bx-pager'
/*minSlides: 2,
maxSlides: 2,
slideWidth: 170,
slideMargin: 10,
ticker: true,
speed: 7000*/
});
});
});

bx slider : how to disable slide show when only one image is present

I am using bxslider to create a slideshow of my images. The images are updating dynamically. My problem is the sideshow fade-in and fade-out work even only one image is present. How can I stop this ?
bxslider options are
var coverSlider = $('.bxslider').bxSlider({
auto: true,
minSlides: 1,
maxSlides: 1,
pager: false,
speed: 500,
pause: 3000,
autoHover: true,
mode: 'fade',
controls: false
})
I am using reload method to update the slider when a new image is appends or removes
coverSlider.reloadSlider();
this helps me:
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
auto: ($(".bxslider li").length > 1) ? true: false,
pager: ($(".bxslider li").length > 1) ? true: false,
controls: false
});
});
You should check the number of images before reloading, and use destroySlider() method if there is only 1 image.
// Get the quantity of images (add your code if you want an example)
var numberOfImages = ...;
if (numberOfImages > 1) {
coverSlider.reloadSlider();
} else {
coverSlider.destroySlider();
}
Try
var numImgs = $('div.myClassName img').length;
if(numImgs>1)
{
\\Do your bxslider reload here
}
Instead you can use Jquery Selector too like below
jQuery(".image").Length
Hope this helps...
Click here to read about selectors Click
var numImgs = $('div.bxslider img').length;
if (numImgs > 1) {
$('.bxslider ').bxSlider({
controls: true,
...
});
}
This solution works for me
Change auto: true
to
auto: ($('#slidername').children().length < 2) ? false : true
Thanks to https://github.com/stevenwanderski/bxslider-4/issues/607
bx slider : how to disable slide show when only one image is present?
Set auto to false:
var coverSlider = $('.bxslider').bxSlider({
auto:false
})

Add current slide body class on slide change

I'm using slidesjs to create a slideshow on my site, this is working fine but I want to add a incremented class to the body tag e.g. slide-1 at load and then when the slide changes slide-2 etc until the slide fully rotates and it goes back to slide-1
My current code is;
<script>
$(function(){
$('#feature-slideshow').slides({
preload: true,
preloadImage: '<?php bloginfo('template_url'); ?>/images/loading.gif',
generateNextPrev: false,
effect: 'fade',
play: 5000,
hoverPause: true,
animationStart: function() {
$("body").addClass("slide");
}
});
});
</script>
I have two problems;
1) the I want the initial class set before the slideshow has loaded so that the style which is a background is applied when the page is loaded rather than the slideshow
2) How to increment the slide-x class when the slideshow is transitioned/changed.
Any help would be greatly appreciated
Just add the initial class to body directly (<body class="slide-1">). No need to let JavaScript do this since it will always start at slide 1.
To increment that number you can set the currentClass option so that we can get the index of the current slide with .index().
$(function(){
var slideshow = $("#feature-slideshow");
slideshow.slides({
preload: true,
preloadImage: '<?php bloginfo('template_url'); ?>/images/loading.gif',
generateNextPrev: false,
effect: 'fade',
play: 5000,
hoverPause: true,
currentClass: "current"
animationStart: function() {
var idx = slideshow.children(".current").index();
document.body.className = "slide-"+(idx+1);
}
});
});
Ok managed to get this to work, thanks to Marcus for his help, I just tweaked your code to pickup the correct list 'pagination' which had the current class applied;
$(function(){
var slideshow = $("#feature-slideshow");
slideshow.slides({
preload: true,
preloadImage: '<?php bloginfo('template_url'); ?>/images/loading.gif',
generateNextPrev: false,
effect: 'fade',
play: 5000,
hoverPause: false,
currentClass: "current",
animationStart: function() {
var idx = $('ul.pagination').children(".current").index();
document.body.className = "slidebg-"+(idx+1);
}
});
});
I had to apply slidebg-3 to the body tag as for some reason when the slideshow cycles it includes the first list
Works great though apart from removing all other body classes, I suppose I could add it as an ID as I'm not using one of those
Anyway hope this helps someone else!

Categories