We Keep Coding

Making 2 SwiperJS scripts work together - 2nd one not working when other init script is added to same page

Having trouble making 2 swiperJS Sliders work together.
The conflict seems to be in the for each, or the JS column in codepen / the external script file that initializes the slider.
Anyone have any ideas on how i can get them both to work together? For example, if you take the script from the 2nd one, and put it into the script column in slider one you'll see it breaks it. Or, if you do the opposite, it breaks it too.
It doesn't look like it's a matter of them both being called .swiper-container because the 2nd one ID's the swiper with #swiper1
SLIDER 1: Codepen
SLIDER 2: Codepen
The JS that makes this one work is:
(function () {
'use strict';
const mySwiper = new Swiper('#swiper1', {
loop: true,
autoplay: 4000,
slidesPerView: '1',
centeredSlides: true,
a11y: true,
keyboardControl: true,
grabCursor: true,
// pagination
pagination: '.swiper-pagination',
paginationClickable: true,
// navigation arrows
nextButton: '#js-prev1',
prevButton: '#js-next1' });
})();
any help would be appreciated!
If you look at both Codepen's it'd be most helpful i'm thinking.
slider 1 works great and i dont want to mess with that one as it's telling it to show a certain amount of slides per view.

Here is complete working example https://jsfiddle.net/710x569p/ As i told you in another answer don't use same selector and exclude #swiper1 from .swiper-container
var mySwiper = new Swiper('.swiper-container:not(#swiper1)'

How to use jQuery Lazy with AJAX?

I am using jQuery Lazy to load images in a page progressively. When the images are called with AJAX, they do do not load. Please, how to use this Plugin with AJAX?
I tried:
$(function() {
$('.lazy').lazy({
placeholder: "data:image/gif;base64,R0lGODlhEALAPQAPzl5uLr9Nrl8e7...",
effect: "fadeIn",
effectTime: 2000,
threshold: 0
});
});
However it is not working. Some time back, when I had that challenge with Colorbox, the solution was to call for body click, like:
$("body").on("click", ".photos", function(event){
$(".photos").colorbox({rel:'photos', transition:"fade"});
});
That made the trick to enable colorbox to work with an AJAX call - but with Lazy there is no body click, so even though I did:
$(function() {
$('body .lazy').lazy({
placeholder: "data:image/gif;base64,R0lGODlhEALAPQAPzl5uLr9Nrl8e7...",
effect: "fadeIn",
effectTime: 2000,
threshold: 0
});
});
So, how to use jQuery Lazy with AJAX?

Please think about how jQuery (and Lazy) work. There is not kind of auto detection of new elements (expect somebody builds it on its own). So, if you load new elements via AJAX you need to tell jQuery/Lazy that there are new elements.
In case of Lazy, there are some public functions you can use of an instance. In your case, you would need to use addItems and update.
With addItems, you can add new elements to an existing instance of Lazy. So the plugin knows that he has to handle these elements too. With update, you can force Lazy to do a single update of the current viewport, without using scroll or resize event.
So, that means, you have to slightly update your code:
var instance = $('.lazy').lazy({
chainable: false, // tell lazy to return its own instance
placeholder: "data:image/gif;base64,R0lGODlhEALAPQAPzl5uLr9Nrl8e7...",
effect: "fadeIn",
effectTime: 2000,
threshold: 0
});
Afterwards you need to use the two public functions, mentioned above, after the AJAX request got finished. I don't know how you load the new elements, but there might be a callback or something where you could execute these.
instance.addItems('.jquery-selector-for-new-items-only');
instance.update();
If you have the new elements already as jQuery object, you can use addItems with them too. So instead of a selector, just add the object:
instance.addItems($('.jquery-object'));
instance.update();
And that's it ...

How to stop cubeslider slideshow on mouseleave?

I am using a Cube Slider 3d plugin for a slideshow and I have it starting on 'mouseenter' using jQuery, which works fine. I want it to stop on 'mouseleave' and cannot get it to work. Been unable to find anything to guide me in the right direction. Please see the code below. It is the code I use to start. As you can see, there is an autoplay option, which I set to 'true'. Logic would tell me to set the value to false on mouseleave, but that does not work and seems a bit redundant to use cubeslider() again. I have also tried jQuery method stop() and thought about trying to use setInterval() and clearInterval() with it somehow. With using a jQuery plugin it doesn't seem like much additional jQuery/JavaScript would be needed. I could be wrong as I've been neglecting jQuery/JavaScript for another focus and probably need a refresher on many JavaScript concepts. Any help is appreciated. Thanks
$('#cubeSlide').mouseenter(function() {
$('#cubeSlide').cubeslider({
cubesNum: {rows:1, cols:1},
orientation: 'h',
autoplay: true,
autoplayInterval: 500,
perspective: 1200,
mode3d: 'auto',
arrows: false,
navigation: false,
addShadow: false,
});
});

Multiple bootstrap carousels with different settings

There are multiple carousels in my page and they all work the same way.
I'd like to make one of them have different settings though (interval), but I can't make it happen.
Here is the fiddle.
I'd like to have "#slideshow" carousel work with interval/auto slide set to active, and the rest of them to have interval/auto slide disabled.
jQuery('.carousel').each(function () {
jQuery(this).carousel({
interval: false
});
jQuery('#slideshow').carousel({
interval: 3000
});
});

Just get rid of most of the jQuery you've written and leave only this:
$('#slideshow').carousel({
interval: 3000
});
FIDDLE
My solution is simply a fork of your code with the unneeded jQuery removed.
Also, note that you can simply type $ instead of jQuery all the time.
Finally, you forgot to choose a version of jQuery in your Fiddle. :P

bootstrap carousel auto sliding when window is not active

This is the website i'm working on. The problem is even tough i used interval:false and pause:true, whenever i inspect the code or switch to another the main slider starts auto-sliding. How can i stop it for good?
$(document).ready(function () {
$('.carousel').carousel({
pause: true,
interval: false
});
This is the javascript concerning the said item.

try to remove data-ride="carousel" from the carousel HTML container and only use class="carousel"
then use interval: false only you don't need to use pause option
$(function() {
$('.carousel').carousel({
interval: false
});
});