I got a problem with swiper slider. I would like my swiper stop on mouse enter and continue on mouseleave. But my console shows me an error --> swiper.stopAutoplay is not a function, but the console log is displayed. And the same with startAutoplay. Does anybody know what am I doing wrong?
<script>
var swiper = new Swiper('.swiper-container', {
loop: true,
speed:2000,
autoplay: {
delay: 3500,
},
pagination: {
el: '.swiper-pagination',
},
});
(function($) {
$('.swiper-container').on('mouseenter', function(e){
console.log('stop autoplay');
swiper.stopAutoplay();
})
$('.swiper-container').on('mouseleave', function(e){
console.log('start autoplay');
swiper.startAutoplay();
})
})(jQuery);
</script>
In version 4.3.5 you must use autoplay.stop and autoplay.start. For example:
var mySwiper = new Swiper('.my-swiper');
$('.my-swiper').hover(function() {
mySwiper.autoplay.stop();
}, function() {
mySwiper.autoplay.start();
});
I'm running 5.1.0.
After console.logging swiper reference i saw that for each tab was specific one created.
So in the loop when i was hiding the tabs just needed to:
swiper[i].autoplay.stop();
And on tab click showing the tab:
swiper[i].autoplay.start();
So thanks to answer above by #nick i was able to get this running.
Related
Every time I ask a question here, no matter how dumb it is, I do always learn something.
Anyway, I'm hoping to get some more good answers to this one.
I'm calling a jquery plugin for a modal on document.ready
<script>
$(document).ready(function() {
// Initialize the plugin
$('#JPO').popup({
absolute: false,
autoopen: true
});
$.fn.popup.defaults.pagecontainer = '#page'
});
</script>
it auto opens a modal but I only want the modal to open after either a user scrolls down 400px, or after being on the page for 5 seconds, or on exit (exit intent).
This is the jquery plugin I'm using: https://dev.vast.com/jquery-popup-overlay/
Thanks so much in advance!
use setTimeout() function.
Read More about setTimeout
Sample Code:
setTimeout(
function()
{
//do something special
}, 5000);
I used a combination of setTimeout, and onmouseleave to create my popup.
<script>
function openPopup(){
$('#JPO').popup({
autoopen: true,
detatch: true,
transition: 'all 1.0s'
});
};
function exitPopup(){
$('#JPO').popup('show');
};
function cookiePopup(){
$('#JPO').popup({
autoopen: false,
detatch: true,
transition: 'all 1.0s'
});
};
$(document).ready(function(){
$('.modal-content').hide();
var dialogShown = Cookies.get('dialogShown');
if (!dialogShown) {
setTimeout(openPopup, {{ section.settings.delay }});
$(document).mouseleave(function(){
setTimeout(exitPopup,1050)
});
Cookies.set('dialogShown', 1, { expires: 1 });
}
else {
setTimeout(cookiePopup, {{ section.settings.delay }});
}
});
</script>
I also used a plugin called js-cookie to make my pop-up less annoying to repeat visitors.
PS. this is for a shopify section, so it does contain some liquid.
Plugins used:
PopUp https://dev.vast.com/jquery-popup-overlay/
Cookies https://github.com/js-cookie/js-cookie/tree/v1.5.1
I'm building wordpress site with swiper slider (https://idangero.us/swiper/) listing portfolio items. What I need is next button that contains title of next slide. Is that possible? Something like this:
rough preesentation
This is code:
var swiperOptions = {
loop: true,
speed: 1000,
}
function portfolioSlider() {
var portfolioSlider = new Swiper('.js-portfolio-slider', swiperOptions);
$(document).on('click', '.js-portfolio-slider__next', function(e) {
e.preventDefault();
portfolioSlider.slideNext();
});
}
portfolioSlider();
See the documentation here: https://idangero.us/swiper/api/#events
portfolioSlider.on('transitionEnd', function() {
var nextTitle = $('.swiper-slide-next').find('.title');
if (nextTitle.length > 0) {
$('.js-portfolio-slider__next').text(nextTitle);
}
})
Should do the trick. The 'swiper-slide-next' should be the class of the next slide in your markup
Use swiper.slides[index + 1].innerText to get the inner content
Please refer to
penvar swiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
console.log(swiper.slides[1].innerText) visit https://codepen.io/harmeet2harry/pen/qvQWyO
I have a product page and for every product is a modal, and for every modal is a owl slider.
When I a product for the first time it shows up well but when I close that product and open another product the owl slider is broken.
I tried (or I feel like I tried) every solution I found on internet but still I can't figure it out.
Here is my jQuery:
var owlCarousel = $('.owl-carousel');
$('.modal').on('shown.bs.modal', function (event) {
owlCarousel.owlCarousel({
loop: true,
items: 1,
margin: 100
});
});
$('.modal').on('hidden.bs.modal', function (event) {
$('.owl-carousel').trigger('destroy.owl.carousel');
});
I hope I explained my problem well!
Note: When I open a second product this error shows up every second I wait
TypeError: null is not an object (evaluating 'this.e._checkVisibile')
On line 620 in owl.carousel.js change this:
Owl.prototype.onThrottledResize = function() {
window.clearTimeout(this.resizeTimer);
this.resizeTimer = window.setTimeout(this.e._onResize, this.settings.responsiveRefreshRate);
};
to this:
Owl.prototype.onThrottledResize = function() {
if(this.e !=null) {
window.clearTimeout(this.resizeTimer);
this.resizeTimer = window.setTimeout(this.e._onResize, this.settings.responsiveRefreshRate);
}
};
worked for me :)
Try checking for the visible owl carousel element and call owlCarousel and destroy events on it.
var owlCarousel;
$('.modal').on('shown.bs.modal', function (event) {
owlCarousel = $('.owl-carousel:visible');
owlCarousel.owlCarousel({
loop: true,
items: 1,
margin: 100
});
});
$('.modal').on('hidden.bs.modal', function (event) {
owlCarousel.trigger('destroy.owl.carousel');
});
I've been trying to figure out how to trigger animations on scroll, and I can't quite get it. Basically, I want to have a class that I can add to my titles that will trigger an animation any time the element with the class is scrolled into view.
I tried using the jQuery Inview plugin, but I couldn't get it to do what I wanted. Then I switched to Waypoints.js and I kind of have it working, but it's not perfect. Right now, the elements animate when I scroll to them for the first time but they do nothing when I scroll up and back down the page. The animations only fire once.
Below is my current code. If anyone can help me figure out a way to get the animations triggering every time the user scrolls past them—and also a way to condense the code so that it fires based on class and not ID—that would be really excellent. (Right now, I have separate function for each element.)
PS: I'm using animate.css, wow.js, textillate.js for the animations.
HTML
<h1 class="lettering wow fadeInDown" id="l1" data-in-effect="flipInY">Yo. Check it out.</h1>
jQuery
$(function () {
var l1 = $("#l1");
var waypoint = new Waypoint({
element: document.getElementById('l1'),
handler: function() {
l1.textillate({ in: { effect: 'flipInY' } });
},
offset: 'bottom-in-view',
});
});
Thanks for your help!
EDIT: I have found a partial solution that triggers the animations every time you scroll past them. However, I can only seem to get it to work with ids. I'd rather be able to target a class than have to write a separate function for each new title. Any ideas on how to modify the following code so that it works for a class of .lettering?
// Animate #l1
$(function () {
var animatel1 = $('#l1').textillate({
autoStart: false,
in: { effect: 'flipInY' },
out: { effect: 'fadeOut', sync: true, }
});
var l1 = $("#l1");
var inview = new Waypoint.Inview({
element: $('#l1'),
enter: function(direction) {
},
entered: function(direction) {
animatel1.textillate('in')
},
exit: function(direction) {
animatel1.textillate('out')
},
exited: function(direction) {
}
})
});
Having it work with a class is a matter of looping through your array of elements. I see you're using jQuery, so it can help you with a bit of the boilerplate:
$(function () {
$('.your-class').textillate({
autoStart: false,
in: { effect: 'flipInY' },
out: { effect: 'fadeOut', sync: true, }
});
$('.your-class').each(function() {
new Waypoint.Inview({
element: this,
entered: function(direction) {
$(this.element).textillate('in')
},
exit: function(direction) {
$(this.element).textillate('out')
}
});
});
});
This is what worked for me. Needed to wrap everything in an .each() function. Replace lettering with your class name and you should be good to go.
$('.lettering').each(function() {
var animatelettering = $('.lettering').each(function(){
$(this).textillate({
autoStart: false,
in: { effect: 'flipInY' },
out: { effect: 'fadeOut', sync: true, }
});
});
new Waypoint.Inview({
element: this,
enter: function(direction) {
},
entered: function(direction) {
animatelettering.textillate('in')
},
exit: function(direction) {
animatelettering.textillate('out')
},
exited: function(direction) {
}
});
});
I'm using iDangerous Swiper library to display a mobile swipe touch gallery in conjunction with Jquery Mobile framework.
It works fine except that if I leave the index page (where the gallery is) and then come back, the pagination widget doesn't work properly. It still appears (I can see the bullets), and it's still clickable, i.e. if I "touch" a bullet the gallery swipes to the correspondent slide and the bullet becomes "active", but it doesn't work the reverse way, in other words it doesn't respond to slide changes: if I swipe through the slides the current active bullet does not update.
this is the initialization code:
$( document ).on( "pageshow", "#index-page", function( event ) {
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
paginationClickable: true,
slidesPerView: 'auto'
});
});
The page are linked with jquery mobile's data-ajax="true" attribute to preserve the global scope.
It help me pagination swiper idangerous jquery mobile
$(document).one("pageshow", "#page1", function (e) {
var swiper = new Swiper('.swiper-container', {
paginationClickable: true,
hashnav: true,
pagination: '.swiper-pagination',
hashnav: true });
function reinitSwiper(swiper) {
setTimeout(function () {
swiper.reInit();
}, 500);
}
});
Issue:
Initializing the swiper twice.
Solution:
Define a global variable "swiper" outside the "pageshow" event. The global variable "swiper" will be "undefined" on loading the gallery first time. When you leave the page and come back, global variable "swiper" will not be "undefined". Then do not initialize again.
<script>
var swiper;
$(document).on("pageshow", "#page1", function (e) {
if (swiper == undefined) {
swiper = new Swiper('.swiper-container', {
pagination: '.pagination',
paginationClickable: true,
slidesPerView: 'auto'
});
}
});
</script>