We Keep Coding

enable vertical scrolling while see the last slide using owl carousel

I disable vertical scrolling on webpage while swiping the carousel horizontally on mobile devices. I'm using the Owl carousel.and I used the solution Disable vertical scrolling while swiping on touch device using owl carousel in my site.it works well but it has a problem and when I see the last side in owl-carousel I can not scroll vertical to anywhere and I have to go back to the prev slide and then it works correctly and I can move on the page. how can solve this issue ? my website is https://khaaspo.com/Product/ProductDeialsInMob?Code=93&Code=93
$(document).ready(function() {
var owl2 = $('.owl-gallery');
owl2.owlCarousel({
rtl: true,
margin: 10,
nav: true,
loop: false,
navSpeed: 1000,
pullDrag: false,
freeDrag: false,
autoplay: false,
onDragged: function () {
$('body').css('overflow', 'auto');
},
onDrag: function () {
$('body').css('overflow', 'hidden');
},
responsive: {
0: {
items: 1
},
400: {
items: 1
},
600: {
items: 1
},
900: {
items: 1
}
},
onTranslate: function () {
$('.owl-item').find('video').each(function () {
this.pause();
this.currentTime = 0;
});
}
});
owl2.on('drag.owl.carousel', function (event) {
document.ontouchmove = function (e) {
e.preventDefault();
}
});
owl2.on('dragged.owl.carousel', function (event) {
document.ontouchmove = function (e) {
return true;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I changed my code like below and it works correctly and I solved my problem.
var owl2 = $('.owl-gallery');
owl2.owlCarousel({
rtl: true,
margin: 10,
nav: true,
loop: false,
navSpeed: 1000,
pullDrag: false,
freeDrag: false,
autoplay: false,
onDragged: function () {
$('body').css('overflow', 'auto');
},
onDrag: function (e) {
var current = e.item.index + 1;
var total = e.item.count;
if (current === total) {
$('body').css('overflow', 'auto');
}
else {
$('body').css('overflow', 'hidden');
}
},
responsive: {
0: {
items: 1
},
400: {
items: 1
},
600: {
items: 1
},
900: {
items: 1
}
},
onTranslate: function () {
$('.owl-item').find('video').each(function () {
this.pause();
this.currentTime = 0;
});
},
});
owl2.on('drag.owl.carousel', function (e) {
var current = e.item.index + 1;
var total = e.item.count;
document.ontouchmove = function (e) {
if (current !== total) {
e.preventDefault();
}
else {
return true;
}
}
});
owl2.on('dragged.owl.carousel', function (event) {
document.ontouchmove = function (e) {
return true;
}
});

JavaScript not triggering events when dynamically loaded

I'm using the Swiper.js library and I have an issue getting the 'slideChange' event to trigger when dynamically loading elements through JavaScript.
Here is where my swipers both horizontal and vertical are initialised:
var swiper = {
initialize : function() {
swiperH = new Swiper('.swiper-container-h', {
slidesPerView: 1,
preloadImages: false,
updateOnImagesReady: true,
lazy: true,
})
.on('slideChange', function () {
console.log('Swiped Horizonally');
});
swiperV = new Swiper('.swiper-container-v', {
direction: 'vertical',
slidesPerView: 1,
preloadImages: false,
updateOnImagesReady: true,
lazy: true,
effect: 'fade',
loop: true,
fadeEffect: {
crossFade: true
},
pagination: {
el: '.swiper-pagination-v',
clickable: true,
},
})
.on('slideChange', function () {
console.log('Swiped Vertically');
});
}
};
The reason why the horizontal's 'slideChange' triggers is because its already in the html file:
<!-- Swiper -->
<div class="dash-container">
<div class="swiper-container swiper-container-h">
<div class="swiper-wrapper" id="swipeData">
</div>
</div>
</div>
Now, the vertical slides are loading through JavaScript and that's where the vertical's 'slideChange' doesn't trigger.
function loadDresses(selectedDresses) {
return new Promise((resolve, reject) => {
$('#swipeData').html('');
for (var i = 0; i < selectedDresses.length; i++) {
var vScroll = '<div class="swiper-slide"><div class="swiper-container swiper-container-v"><div class="swiper-wrapper" style="height: 100%;">';
for (var j = 0; j < selectedDresses[i].images.length; j++) {
vScroll += '<div class="swiper-slide"><img src="' + selectedDresses[i].images[j] + '"/></div>';
}
vScroll += '<div class="swiper-slide" style="display:table;height:100%;width:100%;">';
vScroll += '</div></div></div><div class="swiper-pagination swiper-pagination-v">';
$('#swipeData').append(vScroll).trigger('create');
}
resolve(true);
});
}
The error occurs at this snippet:
.on('slideChange', function () {
console.log('Swiped Vertically');
});
Any ideas? Thanks!
Edit:
I have tried the following to stop it from initialising too early, but still no luck:
loadDresses(dresses).then(function(result) {
var t = setInterval(() => {
swiper.initialize();
clearInterval(t);
}, 5000);
});

And doesn't that help?
var swiper = {
initialize : function() {
swiperH = new Swiper('.swiper-container-h', {
slidesPerView: 1,
preloadImages: false,
updateOnImagesReady: true,
lazy: true,
})
.on('slideChange', function () {
console.log('Swiped Horizonally');
});
swiperV = new Swiper('.swiper-container-v', {
direction: 'vertical',
slidesPerView: 1,
preloadImages: false,
updateOnImagesReady: true,
lazy: true,
effect: 'fade',
loop: true,
fadeEffect: {
crossFade: true
},
pagination: {
el: '.swiper-pagination-v',
clickable: true,
},
on: {
slideChange: function() {
console.log('Swiped Vertically');
}
}
});
}
};

You have some options here:
To keep the flow of your application, you can destroy the slider and reinitialize it.
swiperH.destroy()
then
loadDresses();
swiper.initialize();
OR
you can just mySwiper.update() every time you change your slide manually

The problem is that an element with class swiper-pagination-v is not found during initialization.
You can make condition for class swiper-pagination-v exists.
var swiper = {
initialize : function() {
swiperH = new Swiper('.swiper-container-h', {
slidesPerView: 1,
preloadImages: false,
updateOnImagesReady: true,
lazy: true,
})
.on('slideChange', function () {
console.log('Swiped Horizonally');
});
if ($('.swiper-container-v').length > 0) {
swiperV = new Swiper('.swiper-container-v', {
direction: 'vertical',
slidesPerView: 1,
preloadImages: false,
updateOnImagesReady: true,
lazy: true,
effect: 'fade',
loop: true,
fadeEffect: {
crossFade: true
},
pagination: {
el: '.swiper-pagination-v',
clickable: true,
},
})
.on('slideChange', function () {
console.log('Swiped Vertically');
});
}
}
};

Owl Carohausel onChange triggering only on page change

I am using Owl Carousel 2 with 3 items per page setup. I want to select every second item when the slide event occurs because I am blurring first and second items and making the only second one visible.
I am using this piece of jQuery code to achieve this:
$("#service-slider .active:eq(1)").addClass("myActive");
And this is how i initiate my Owl Carousel:
$("#service-slider").owlCarousel({
loop: true,
margin: 10,
nav: true,
dots: false,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: false,
smartSpeed: 1500,
onChange: activeSelect(),
onDrag: activeSelect(),
onTranslate: activeSelect(),
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 3
}
}
});
$("#service-slider .active:eq(1)").addClass("myActive");
function activeSelect() {
$("#service-slider .active").removeClass("myActive");
$("#service-slider .active:eq(1)").addClass("myActive");
}
var owl = $('#service-slider');
owl.owlCarousel();
owl.on('next.owl.carousel', function (event) {
$("#service-slider .active").removeClass("myActive");
$("#service-slider .active:eq(1)").addClass("myActive");
});
owl.on('prev.owl.carousel', function (event) {
$("#service-slider .active").removeClass("myActive");
$("#service-slider .active:eq(1)").addClass("myActive");
});
It is working fine for the first time but when an item transitioned it is not working; Only working when the whole page changes.
Here is a fiddle: https://jsfiddle.net/iCromwell/mpoxf9rc/1/

user7290573 found a solution. You can use the center option of the Owl Carousel to achieve what I want. His fiddle can be found here: https://jsfiddle.net/y2xhr4dk/
$("#service-slider").owlCarousel({
loop: true,
margin: 10,
nav: true,
dots: false,
center: true,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: false,
smartSpeed: 1500,
responsive: {
0: {
items: 3
},
600: {
items: 3
},
1000: {
items: 3
}
}
});

How can I move each bxSlider slider from opposite side?

I am using three bxSlider based slider. I want to move each slider from opposite side. I have tried and done it for first two round but in the end of second round slide starting to move from same direction of previous slide.
Here is all script which I have tried so far.
I am sorry if the question is not clear, kindly check the fiddle so that you will understand about my issue and thank you in advance for that.
Below is the main script, which is I am trying
jQuery(document).ready( function($) {
let slideOneFirstInterval = true;
let slideTwoFirstInterval = true;
let slideThreeFirstInterval = true;
let slideOne = $('#owlSlide1');
slideOne.bxSlider({
auto : false,
autoControls : false,
stopAutoOnClick : false,
pager : false,
speed : 2000,
infiniteLoop : true,
responsive : true,
slideWidth : 600,
controls : false,
autoStart : false,
randomStart : false,
preloadImages :'all',
onSlideAfter: function($slideElement, oldIndex, newIndex) {
if (slideThreeFirstInterval) {
setTimeout(function() {
//slideTwo.goToNextSlide();
slideThree.goToNextSlide();
console.log('True Statement.. 1');
}, 2000);
slideThreeFirstInterval = false
} else {
setTimeout(function() {
slideThree.goToPrevSlide();
console.log('False Statement.. 1');
}, 2000);
}
},
autoDelay : 0,
});
let slideTwo = $('#owlSlide2');
slideTwo.bxSlider({
auto : false,
autoControls : false,
stopAutoOnClick : false,
pager : false,
speed : 2000,
infiniteLoop : true,
responsive : true,
slideWidth : 600,
controls : false,
autoStart : true,
randomStart : false,
preloadImages :'all',
onSlideAfter: function($slideElement, oldIndex, newIndex) {
if (slideTwoFirstInterval) {
setTimeout(function() {
//slideThree.goToNextSlide();
slideOne.goToPrevSlide();
console.log('True Statement.. 2');
}, 2000);
slideTwoFirstInterval = false
} else {
setTimeout(function() {
//slideThree.goToNextSlide();
slideOne.goToPrevSlide();
console.log('false Statement.. 2');
}, 2000);
}
},
});
let slideThree = $('#owlSlide3')
slideThree.bxSlider({
auto : false,
autoControls : false,
stopAutoOnClick : false,
pager : false,
speed : 2000,
infiniteLoop : true,
responsive : true,
slideWidth : 600,
controls : false,
autoStart : true,
randomStart : false,
autoDelay : 0,
preloadImages :'all',
onSlideAfter: function($slideElement, oldIndex, newIndex) {
setTimeout(function() {
//slideOne.goToNextSlide();
slideTwo.goToPrevSlide();
console.log('True Statement.. 3');
}, 2000);
},
});
setTimeout(function() {
//slideOne.goToNextSlide();
slideTwo.goToNextSlide();
console.log('false Statement.. 3');
}, 3000);
});

Assuming you want everything to slide from left to right as opposed to right to left, just replace all occurrences of goToNextSlide() with goToPrevSlide(). You may need to re-order your images in your HTML but it's easier to do that than tangle with a library.

iScroll 4 - cancel preventDefault()

In the code below I added three comments that should explain what the question is. In short: I'm wondering how to disable e.preventDefault(); when it's already set?
var startY;
myScroll = new iScroll(DOMElement, {
snap: 'li',
bounce: false,
bounceLock: false,
momentum: false,
hScrollbar: false,
vScrollbar: false,
hScroll: true,
vScroll: false,
wheelAction: 'scroll',
onBeforeScrollStart: function(e){
startY = e.pageY;
// By default it's advisable to disable browser's scroll
e.preventDefault();
},
onScrollStart: function(){ },
onScrollMove: function(e){
// But here I want to enable browser's functionality if user
// explicitly demands this (i.e. tries to scroll vertically)
if(startY >= e.pageY+70 || startY <= e.pageY-70){
console.log('test');
//alert('test');
console.log(e);
// However, I don't know how to restore this functionality
// Touch device detects 'test' alert correctly and this is
// where I'm stuck.
}
},
onScrollEnd: function(){ },
onRefresh: function(){ },
onDestroy: function(){ },
});
Any help would be appreciated!

You can control scrolling in onBeforeScrollStart. Prevent scrolling between specific area. If it exceeds, scroll starts. I think this helps:
var startY;
var isStarted = false;
myScroll = new iScroll(DOMElement, {
snap: 'li',
bounce: false,
bounceLock: false,
momentum: false,
hScrollbar: false,
vScrollbar: false,
hScroll: true,
vScroll: false,
wheelAction: 'scroll',
onBeforeScrollStart: function(e){
var y=e.pageY;
if (!isStarted) {
startY = y + 0;
isStarted = true;
}
if(startY < y+70 || startY > y-70){
e.preventDefault();
}
},
onScrollStart: function(){ },
onScrollMove: function(e){ },
onScrollEnd: function(){
isStarted = false;
},
onRefresh: function(){ },
onDestroy: function(){ },
});