Home → RoyalSlider HTML version issues →

multiple sliders second slider doesn't activate

• Edit

pkloss

21 Aug, 2012 12:43 PM

I'm trying to have two sliders on a page, the first one works but the second one will not activate, I'm not sure why. The nebula_slide_TOTAL is contained in the portfolio_slide_TOTAL. The page is at this url: http://www.klossal.com/portfolio/index_organize3.html#portfolio-2 and the script set up is:

<script>            
jQuery(document).ready(function($) {               
    var portfolio_slide_TOTAL = $('#portfolio_slide_TOTAL').royalSlider({
        captionShowEffects: ["moveleft", "fade"],
        directionNavAutoHide: false,
        autoScaleSlider: false,
        imageScaleMode: "fit", // Scale mode of all images. Can be "fill", "fit" or "none"
        imageAlignCenter: true,
        navigateByClick: false,
        keyboardNavEnabled: true,
        controlNavThumbs: true,
        directionNavEnabled: true,
        startSlideId: 1,
        deeplinking: {
            // fullscreen options go gere
            enabled: true,
            prefix: 'portfolio-'
        },
        afterSlideChange: function () {
            xx = this.currSlideId;
            $('#thumb_scroll li').removeClass('library_thumb_active');
            $('#thumb_scroll li').eq(xx).addClass('library_thumb_active');
        },
    }).data('royalSlider');             


    var nebula_slide_TOTAL = $('#nebula_slide_TOTAL').royalSlider({
        keyboardNavEnabled: false,
        arrowsNav: false,
        sliderTouch: false,
        sliderDrag: false,
        imageAlignCenter: true,
        controlNavigation: 'bullets'
    }).data('royalSlider');

    $("#space1_IMAGE").click(function() {
        nebula_slide_TOTAL.goTo(0);
        $('#space2_BORDER').fadeToggle("slow", "linear");
        $('#space1_BORDER').fadeToggle("slow", "linear");
    });

    $("#space2_IMAGE").click(function() {
        nebula_slide_TOTAL.goTo(1);
        $('#space2_BORDER').fadeToggle("slow", "linear");
        $('#space1_BORDER').fadeToggle("slow", "linear");
    });


    });
</script>

1. Support Staff 1 Posted by Dmitry Semenov on 21 Aug, 2012 01:08 PM

   

   Hi,

   1. Nested sliders are not supported yet and may behave incorrectly sometimes, because of touch navigation conflicts.
   2. You should initialize slider that is inside first. As slides are created asynchronously with delay and element that is inside may not be available instantly.
   3. You have too much sliders, use simpler approach. It's extremely hard to do that you're trying to do without any framework.
   4. Don't use images in slider that weight 3MB http://www.klossal.com/portfolio/space_2_header.png

   Hope that helps...

   Dmitry

   • Edit

2. 2 Posted by pkloss on 21 Aug, 2012 01:19 PM

   

   that worked with the nesting, and I'll make the image size smaller.

   What do you mean by a framework? Right now the way I have it set up is www.klossal.com/portfolio and I have it so the content loads in to slides as they appear to make it the page less memory. It seems to work fine on a computer but it was a little sluggish on mobile devices.

   • Edit

3. Support Staff 3 Posted by Dmitry Semenov on 21 Aug, 2012 01:34 PM

   

   If you want everything to be dynamically loaded - jQuery Mobile, Sencha, Kendo UI....

   Or just use simple HTML pages for each project, SEO guy will like it and you'll get rid of all these issues.

   Dmitry

   • Edit

4. Dmitry Semenov closed this discussion on 21 Aug, 2012 01:34 PM.