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

Question

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.

Answer 1

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)'