How to stop swiping at last slide? - javascript

I feel bad that I have to ask for help in this forum but the site I downloaded the script from does not have any form of help.
Anyway, I'm using a swiping script from iDangerous Swiper. I can't figure out how to stop the swiping at the last slide or div. Anyway suggestion is much appreciated. I'm using the default swipe.

In the API options section, it says that the default for looping is false...but have you tried explicitly setting it to false?
var mySwiper = new Swiper('.swiper-container', {
speed:750,
loop: false
})
It looks like in their "default" example they are setting loop to true:
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
loop: true,
grabCursor: true,
paginationClickable: true
})
If you simply remove, the loop property it may fix your issue.

From the documentation for iDangerous Swiper, it looks like you should add the noSwipingClass css class to the div for the last slide.
Via: http://www.idangero.us/sliders/swiper/api.php
noSwipingClass
string
'swiper-no-swiping'
'stop-swiping'
CSS class of html element that will be used to prevent swiping when "noSwiping" parameter is set to true.

Related

Disable Locomotive Scroll for a specific page

I'm building a Woocommerce website and I would like to disable Locomotive Scroll on the Checkout page.
I tried this code, but it doesn't work. How could I disable Locomotive for a specific page? My website is not running with Ajax.
const scroll = new LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),
smooth: true,
smoothMobile: true,
getSpeed: true,
getDirection: true
});
window.addEventListener("load", function() {
if ($('.woocommerce-checkout').length) {
scroll.stop();
scroll.destroy();
}
});
Thanks!
You could prevent the initialization of Locomotive Scroll by declaring it within a function like this:
let scroll;
function initLocoScroll() {
if (document.querySelector('.woocommerce-checkout')) return;
scroll = new LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),
smooth: true,
smoothMobile: true,
getSpeed: true,
getDirection: true
});
}
initLocoScroll();
// if you are concerned that JavaScript will be unable to find the element
// because it is loaded before the DOM,
// you could replace the previous line with this one:
// window.addEventListener("load", initLocoScroll);
I don't think the '.length'-property is necessary. The jQuery (or querySelector) statement alone should be enough to determine if the element exists.
Another issue might be that the element you are trying to use to determine whether Locomotive Scroll should be active or not cannot be found. Be sure to check that if the error persists.
I hope this was helpful!

Swiper - Reinitialise once image loaded

Need some clarification regard swiper plugin. Used in other pages, it works fine. Only on particular page, we are updating image manually to change based on user preference. Once Image is changed, we need initalize the Swiper carosuel.
Tried in multiple way with swiper.init() or destroy(true, true). But its not initalize the component. Not sure whether this plugin wont support this logic.
Whether we can init swiper like below and verify in browser console.
var swiper = new Swiper('.swiper-container'){
loop: true,
slidesPerView: 1,
autoplay: 2000
}
setTimeout(function() { swiper.init(); },10000);
Put swiper instance in a function and use that function when you want to init swiper.
function initSwiper() {
new Swiper('.swiper-container'){
loop: true,
slidesPerView: 1,
autoplay: 2000
}
};
initSwiper();

iDangerous Swiper gets out of sync after onSlideClick

I have two Swipers on a page, which are linked and synchronized. Both are looped and show some 60 slides or so (length is dynamic). Both Swipers have pagination and it works fine on both a click on 'next' and 'previous' button (.swipePrev() and .swipeNext()).
The first Swiper is showing just one big image, the second one is a carousel with thumbnails (showing the active one, and two previous and two next slides). When I page on either one, the active index is updated and the active slide is centered in the small one, the big image is updated too.
I now want to add functionality to also update both sliders when I click on a slide in the carousel. I added the following code to the carousel:
onSlideClick: function() {
accoPager.swipeTo(accoPager.clickedSlideIndex);
accoSlider.swipeTo(accoPager.activeIndex);
}
This works fine when I click it once, but on a second click it doesn't work anymore.
Fun thing, after I use the regular pagers (the arrow buttons on either side), or I slide, the events work again. What seems to be happening is that the active index is not updated properly when I use .swipeTo(), but it is corrected when I use .swipeNext() or .swipePrevious().
The initialization of the Swipers is (big one first):
slider= $('#acco-slider-top').swiper({
mode: 'horizontal',
paginationClickable: true,
slidesPerView: 'auto',
loop: true,
loopedSlides: 99,
onTouchEnd: function () {
pagerCarousel.swipeTo(slider.activeIndex);
}
});
pagerCarousel = $('#pager-area .swiper-container').swiper({
mode: 'horizontal',
paginationClickable: true,
slidesPerView: 'auto',
offsetPxBefore: 144,
loop: true,
loopedSlides: 99,
onTouchEnd: function () {
slider.swipeTo(pagerCarousel.activeIndex);
},
onSlideClick: function() {
pagerCarousel.swipeTo(pagerCarousel.clickedSlideIndex);
slider.swipeTo(pagerCarousel.clickedSlideIndex);
}
});
I tried setting the active index, but that doesn't work. When I alert anything in the onSlideClick event I found that the event is still linked to the Swiper, but it gets stopped somewhere in the swiper code.
Does anyone have any issues with this too and what's the best way to proceed? I think it has something to do with the params.onSlideClick _this.allowSlideClick toggles in the Swiper code, but I can't pinpoint what exactly.
EDIT: Not unimportantly, I'm using Swiper 2.4.2+
This should work, hard to say where is the problem without looking at live example. Check this example and how it is done here, maybe it will be helpful http://goo.gl/Nc2M5P

Why is bxslider duplicating my divs

My designer put a bxslider to scroll through 3 divs nicely on my page.
When the page runs, in the html I see it generates 6 divs on the page. It shows div 3, div2, div1, div3, div2, div1.
Just because the duplicated fields on my page now mess up my programing.
Is that neccesary, and is there any way I can touch the code that it shouldn't duplicate my divs?
The page is full of complex code , with an ajax passing the data-serialize to a post form.
Becuase it's all duplicated, now all fields are coming through as 'value,value'. Therefore it's not giving me accurate respones, and well as undefined when it's supposed to be numeric.
My form posts looks like this:
function submitCart () {
$.post(
"scripts/savecart.asp",
$("#form1").serialize()
);}
How could I add that not bx- to it?
As commented in the source code of bxSlider:
if infinite loop, prepare additional slides
So I was able to fix this by adding infiniteLoop: false to the config object:
$(".js-slider").bxSlider({
infiniteLoop: false
});
BxSlider duplicates elements to allow infinite scrolling, etc. For example, say you only have two elements in your slider. Element one might be sliding out on the left, but also sliding in on the right. Therefore, duplicates are required.
If this is a problem, you can usually interact with the duplicates using their bx-clone classes. If you could clarify the actual problem, we could probably give more specific advice.
Update: To eliminate cloned elements from your set, try something like:
$('.bxslider li:not(.bx-clone)')....
I had such problem with bx-clone
I want to use it for an image gallery. So I had a thumbnail image slider and for slider I used bx-slider and on each click on small image , that image in bigger size must show in a div , But on bx-clone clicked nothing happened
I solved that problem with this :
var slider = $('.bxslider').bxSlider({
minSlides: 4,
maxSlides: 4,
slideWidth: 92,
moveSlides: 1,
pager: false,
slideMargin: 10,
onSliderLoad: function(){
$('li.bx-clone').click(function() {
/** your code for bx clone click event **/
});
}
});
Adding to #antongorodezkiy's answer, there is a way to have infiniteLoop: false and still get a non-stopping slide changing: using the onSlideAfter event of the last slide you can, after a few seconds, go back to the first slide and re-start the auto mode:
var pauseTime = 4000; //Time each slide is shown in ms. This is the default value.
var timeoutId;
var slider = $('.bxslider').bxSlider({
auto: true,
infiniteLoop: false,
pause: pauseTime,
onSlideAfter: function ($slideElement, oldIndex, newIndex) {
if (newIndex === slider.getSlideCount() - 1) { //Check if last slide
setTimeout(
function () {
slider.goToSlide(0);
slider.startAuto(); //You need to restart the "auto" mode
},
pauseTime //Use the same amount of time the slider is using
);
}
else { //In case the user changes the slide before the timeout fires
clearTimeout(timeoutId);
slider.startAuto(); //Doesn't affects the slider if it's already on "auto" mode
}
}
});
The difference between this solution and the infiniteLoop: true option is that instead of smoothly transitioning back to the first slide as if it was the next, the slider quickly "rewinds" until reaching the first slide.
for above query: Is it possible to keep having the infinite loop, but remove the clones?
try using below code: if more than 1 item infiniteloop: true else :false
infiniteLoop: ($j("...selector...").length < 2) ? false : true,
Just to answer here, so if some one is struggling and cannot fix the duplication issue. I was facing the same problem that all of my HTML from my page was duplicating inside the first slide under the image tag like bellow:
<img src="public/admin/scr3.png" ><div>..... all of my page HTML...</div></img>
I just found that I was writing the image tag not properly
Meaning my code was something like this for image tag
<img src="public/admin/scr3.png" >
I just replaced my image tag with valid HTML like bellow:
<img src="public/admin/scr3.png" />
and it fixed the content duplication issue.
Hope it will help someone.
Cheers!
I´m not sure if it´s the same issue I was facing, but here´s my case:
My code was using bx slider together with fancybox. And it was duplicating my slides. The solution was to put the secodary code (fancy box), which was generated in my image loop, inside the tag. That did it for me.

pass window width to iosSlider when hidden

I'm making a site that makes use of the iosSlider plugin. I have a few sliders inside of a jquery accordion so some of them start out "display:none" when the page first loads. As a result the sliders inside the accordions are not getting the proper screen width. When you open one of the hidden accordions the slider inside is tiny.
I was curious if there was a better method to solving this issue then the one I am currently using. Right now I am simply destroying the slider and recalling it but this looks ugly and I'm sure there is probably a better approach to solving this.
Any input would be great, thanks
Current code:
$(".acheader").click(function(e) {
//e.preventDefault();
e.stopPropagation();
acords.slideUp();
$(".menuarrow").attr('src','/themes/images/arrow_down.png');
var image = $(this).find(".menuarrow");
if(image.attr('src') === "/themes/images/arrow_down.png"){
image.attr('src','/themes/images/arrow_up.png');
}
if ($(this).next().is(":hidden")) {
$(this).siblings(".accontent").slideToggle(100);
$('.iosSlider2').iosSlider('destroy');
$('.iosSlider2').iosSlider({
snapToChildren: true,
desktopClickDrag: true,
keyboardControls: true,
navNextSelector: $('.next'),
navPrevSelector: $('.prev'),
onSlideChange: slideChange2
});
}
else image.attr('src','/themes/images/arrow_down.png');
});
EDIT: this is for a mobile site so there are no static widths I can refer to. The sliders parents inherit their widths from their parents.. etc.
Taking a look at the iosSlider docs, under public methods, it looks like there is an update command which should resize it. Use $('.iosSlider2').iosSlider('update'); instead of destroying. Does that help?

Categories