asked on

Jquery slider [bxslider] - sliding problem

Hello experts,

this is the site I develope - goo.gl/YCMS3q .

Q: Why the slider of references on mobile devices doesn't scroll right? Just try and see please.
* On desktops it's ok [don't look at styling on desktop- it's not done yet].

This is the JS:

$(function() {

//calling the bxslider for testimonials
	$('.bx-clients').bxSlider();
//calling default bxslider for references
	var defaultSlides = $('#autoC').bxSlider();
	var currentSlides = 0;

	var counter = 0;
	//bxslider references switcher
	$('.controls-wrap li').on('click', function() {
		//removing any colored border of controls
		$('.controls-wrap li').removeClass('ctrl-active');
		//add border coler to clicked ctrl li
		$(this).addClass('ctrl-active');
		//set ctrl atribbute to variable
		var ctrlAtr = $(this).attr('data-id');
		//display none to active reference
		
		if (counter === 0) {
			defaultSlides.destroySlider();
			counter = 1;
		}
		else {
			currentSlides.destroySlider();

		}

		$('.references ul.ref-active').removeClass('ref-active').addClass('ref-none');
		$('.references ul#' + ctrlAtr).addClass('ref-active').removeClass('ref-none');
		
		currentSlides = $('#' + ctrlAtr).bxSlider();	
	});
});

Open in new window

Julian Hansen

This is a duplicate question.

https://www.experts-exchange.com/questions/28702764/Jquery-animation-problem.html

Fajer39

ASKER

Julian it's not a duplicated question....it's the same site but very different problem...
* I have TYPO here only- instead of "scroll" it should be "slide"

Julian Hansen

Apologies I have removed the request for attention.

I have tested both but cannot see what you are referring to - slider scrolls left and right and appears to be fine.

Fajer39

ASKER

Try to change the reference -> then slide for the next and you'll see that the slider jumps over 1 image e.g.
THis is because when you selecting different references and the slider is reinitiated, it's not displaying the first li of the ul- that means first image of the set and I don't know why. Give it a try and you'll see.

Julian Hansen

Give it a try and you'll see.

I have several times - slider appears to work as expected I have tried it in several places including online emulators - it seems to work.

Fajer39

ASKER

Well on IOS it shows the last image first instead of the first one, everywhere else works OK. I guess I should set Javascript lazy loading script for those images, because now every browser do it by itself and it seems that safari on mobile doesn't work right.

Any suggestions?

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Fajer39

ASKER

I found that the problem is with bxslider and absolute position slides with infinity loop on. I just turn the infinity loop off and it works as expected.