Swiper: Uncaught TypeError: Cannot set property 'control' of undefined

[luhengqi]

@nolimits4web plz help!

I use the loop parameter and it would be wrong, and Thumbs Gallery With Two-way Control can be used.

this is my code:

<div class="swiper-container a">
        <div class="swiper-wrapper">
            <div class="swiper-slide a-slide">
                <div style="width: 100%;height: 100%;">
                    <div style="width: 100%;height: 100%;">
                        <div class="swiper-container gallery-top">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/8)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/9)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/10)"></div>
                            </div>
                            <!-- Add Arrows -->
                            <div class="swiper-button-next swiper-button-white"></div>
                            <div class="swiper-button-prev swiper-button-white"></div>
                        </div>
                        <div class="swiper-container gallery-thumbs">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/8)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/9)"></div>
                                <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/10)"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
        </div>
    </div>
    <script type="text/javascript" src="dist/js/swiper.min.js"></script>
    <script type="text/javascript">
        var swiper = new Swiper('.a', {
            loop: true
        });
        var galleryTop = new Swiper('.gallery-top', {
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            spaceBetween: 10,
            loop:true,
            loopedSlides: 5, //looped slides should be the same
            nested: true
        });
        var galleryThumbs = new Swiper('.gallery-thumbs', {
            spaceBetween: 10,
            slidesPerView: 4,
            touchRatio: 0.2,
            loop:true,
            loopedSlides: 5, //looped slides should be the same
            nested: true,
            slideToClickedSlide: true
        });
        galleryTop.params.control = galleryThumbs;
        galleryThumbs.params.control = galleryTop;
    </script>

[nolimits4web]

You don't see element with "gallery-top" class

[luhengqi]

The code has "gallery-top" elements on it.

[nolimits4web]

Then provide JSfiddle with the issue or live example where it can be replicated

[luhengqi]

thanks for your reply,

the code:
https://jsfiddle.net/v97yka6x/2/

[Mmferry]

I find the same problem with swiper "Cannot set property 'control' of undefined"

[alex-lit]

Same problem like this https://jsfiddle.net/v97yka6x/2/ !

[davidlevy]

+1

[Stormplay]

+1

[amiltonpaglia]

+1

[justincolangelo]

If you inspect the objects stored in those variables they contain an array of Swiper.

console.log(galleryTop);
console.log(galleryThumbs);

/*
(2) [Swiper, Swiper]
(2) [Swiper, Swiper]
*/

Since galleryTop and galleryThumbs are both arrays in this example, the params property does not exist at that level, but in each Swiper object instead. The code example in the documentation doesn't have this issue, though.

Trying something like this

galleryTop[0].params.control = galleryThumbs;
galleryThumbs[1].params.control = galleryTop;

is not the fix overall, but did get things working.

[sadeghbarati]

+1 same issues in v 4.1.6 with

galleryTop.(( controller.control )) =galleryThumbs; :face_with_head_bandage:

and same issues in v 3 with
galleryTop(( .params.control )) = galleryThumbs; :face_with_head_bandage:

i have 4 slider
2 slider in index.html
2 slider in another.html

when i use two-way control for 4 swiperSlider ((( in one js file [script.js] ))) this error happen and dont know how to fix it

[Keey]

Really does not find the items. Error appears on pages where the slider does not exist.
Use the condition.

 if ($(".swiper-container.gallery-top")[0]){
//initialization parameters
}

[slashka]

For the topic-starter's code and for others demos I maked it work. Just surrounded all Swiper's JS code with jQuery (I'm using it with side slideshow):

$(document).ready(function() {
var mainSliderSelector = '.main-slider',
    navSliderSelector = '.nav-slider',
    interleaveOffset = 0.5;

// Main Slider
var mainSliderOptions = {/*...*/}
var mainSlider = new Swiper(mainSliderSelector, mainSliderOptions);
// Navigation Slider
var navSliderOptions = {/*...*/}
var navSlider = new Swiper(navSliderSelector, navSliderOptions);
// Matching sliders
mainSlider.params.control = navSlider;
navSlider.params.control = mainSlider;
});

Hope this helps someone ;)