0

I have a page with a carousel on using the infinite-carousel plugin.

When I run the page it crashes my browser and asks if I want to stop the unresponsive script.

In my JS file to call the action I have...

$(document).ready(function(){
    $('#viewport').carousel('#simplePrevious', '#simpleNext');
    $('.gallery-viewport-ext').carousel('.gallery-viewport-ext #simplePrevious', '.gallery-viewport-ext #simpleNext');
    $('.gallery-viewport-int').carousel('.gallery-viewport-int #simplePrevious', '.gallery-viewport-int #simpleNext');
    $('.gallery-viewport-gw').carousel('.gallery-viewport-gw #simplePrevious', '.gallery-viewport-gw #simpleNext');
    $('.gallery-viewport-theroofterrace').carousel('.gallery-viewport-theroofterrace #simplePrevious', '.gallery-viewport-theroofterrace #simpleNext');
    $('.gallery-viewport-photos').carousel('.gallery-viewport-photos #simplePrevious', '.gallery-viewport-photos #simpleNext');
    $('.gallery-viewport-onebedroomapartment').carousel('.gallery-viewport-onebedroomapartment #simplePrevious', '.gallery-viewport-onebedroomapartment #simpleNext');
    $('.gallery-viewport-twobedroomapartment').carousel('.gallery-viewport-twobedroomapartment #simplePrevious', '.gallery-viewport-twobedroomapartment #simpleNext');
    $('.gallery-viewport-externals').carousel('.gallery-viewport-externals #simplePrevious', '.gallery-viewport-externals #simpleNext');

    $('#slider-stage').carousel('#previous', '#next');  
    $('#tab-container').easytabs();

                //Examples of how to assign the ColorBox event to elements
                $(".group1").colorbox({rel:'group1'});
                $(".group2").colorbox({rel:'group2', transition:"fade"});
                $(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});

    // Dropdown, show more text
    $('.useful-links ul li a').on('click', function () {
        $(this).next('p').toggle();   
        return false;  
    });
});

If I remove the 

$('.gallery-viewport-int').carousel('.gallery-viewport-int #simplePrevious', '.gallery-viewport-int #simpleNext');

which starts the action for that page the page then loads.

Has anybody an idea on what could be going wrong? or how I can debug it? 

<section class="gallery-viewport-int">
            <ul style="">
                <li style=""><img alt="image" src="_includes/images/slide-1.jpg"></li>
                <li style=""><img alt="image" src="_includes/images/slide-2.jpg"></li>
                <li style=""><img alt="image" src="_includes/images/slide-3.jpg"></li>
                <li style=""><img alt="image" src="_includes/images/slide-1.jpg"></li>
                <li style=""><img alt="image" src="_includes/images/slide-2.jpg"></li>
                <li style=""><img alt="image" src="_includes/images/slide-3.jpg"></li>
            </ul>
            <a id="simplePrevious"><img alt="Left Arrow" src="_includes/images/larr.png"></a>
            <a id="simpleNext"><img alt="Right Arrow" src="_includes/images/rarr.png"></a>
        </section>
4

0 回答 0