Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Uncaught TypeError: Cannot set property 'control' of undefined

See original GitHub issue

@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>

Issue Analytics

State:
Created 7 years ago
Comments:13 (2 by maintainers)

Top GitHub Comments

4reactions

Keeycommented, Mar 26, 2018

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
}

0reactions

slashkacommented, Dec 7, 2018

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 😉