Scaling Issue On Javascript Banner

Hi All

I’m having some trouble with a banner section on the homepage and I’m hoping you may be able to help, I can’t seem to get it to scale down correctly when viewing on a mobile. The font for the main headline remains the same. Ultimately it would be great to scale the whole banner down including the buttons proportionately.

I’ve tried various media queries through CSS and have changed the font from pixels to rem & also tried em but the contents of the banner remain the same size. I’m guessing this is down to something in Javascript? Any advise would be greatly appreciated.

<style>
#banner .tp-caption.wbg,
#banner .wbg {
    background-color: rgba(0, 0, 0, 0.5);
    display: block;
    height: 350px;
    width: 590px;
    border-bottom: 2px solid #ffffff;
}

#banner .littletext p,
#banner .tp-caption.littletext p {
    text-transform: uppercase;
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 28px !important;
}
/* Layer 1 */
#banner .version1title h1,
#banner .tp-caption h1 {
    text-transform: uppercase;
    font-size: 5rem !important;
    line-height: 60px;
    
}
/* Layer 3 */
#banner .version1title1 h1,
#banner .tp-caption h1 {
    text-transform: uppercase;
    font-size: 5rem !important;
    line-height: 60px;

    
}
/* Layer 2 */
#banner .version1title2 h1,
#banner .tp-caption h1 {
    text-transform: uppercase;
    font-size: 5rem !important;
    padding: 8px 0px;
    line-height: 1;

    
    
}

#banner .our_service.our_service2 {
    background: none !important;
    background-color: rgba(255, 255, 255, 0) !important;
    border: 1px solid #a4a4a5 !important;
    color: #ffffff !important;
}

.tp-caption hr {
    border-width: 33px;
}

#banner .our_service {
    background-color: #1e2126;
    border-color: #1e2126;
    color: #ffffff;
}

#rev_slider {
    overflow: hidden;
}

#banner h1 {
    line-height: 80px;
    color: #ffffff !important;
    font-size: 6rem;
    padding-bottom: 0.5em;
    display: inline-block;
    border-bottom: 1px solid transparent;
}

#banner p {
    font-size: 2rem;
    line-height: 36px;
    color: #ffffff;
}

#banner .contact_us,
#banner .our_service {
    width: 155px;
    line-height: 50px;
    color: #fff;
    padding: 0 !important;
    text-transform: uppercase;
    text-align: center;
    font-size: 14px;
    border-radius: 2px;
}

#banner .btn-default {
    padding: 12px 20px !important;
}
/**** RESPONSIVE CSS ****/
        @media (max-width: 665px) {
     .banner-wrapper img {
        width: 100%;
    }
    .car-details li {
        border: 0 none;
        display: inline-block;
        margin: 10px 0;
        padding: 0 12px;
        width: 32.333% !important;
    }
    .testimonial .lead {
        font-size: 14px;
        line-height: 26px;
    }
    .search-tab-nav.nav-tabs > li {
        width: 100%;
        margin: 0 !important;
        border: 0 !important;
    }
    #banner p,
    #banner h1,
    .header-contact {
       scale: 50%;
    }
    .logo-wrapper .navbar-brand {
        margin: 0 auto;
    }
}

@media (max-width:480px){
    .tp-caption.white-small .tp-fade .tp-resizeme.start {
      font-size: 15px !important;
    }
<!-- ******************************************
        START SLIDER 
        ********************************************** -->
        <div class="slider-section">
            <div id="banner">
                <div class="rev_slider_wrapper">
                    <!-- START REVOLUTION SLIDER 5.0 auto mode -->
                        <div id="main_slider" class="rev_slider" data-version="5.0">
                            <ul>
                                <li data-index='rs-377' data-transition='curtain-1' data-slotamount='default' data-easein='default' data-easeout='default' data-masterspeed='default' data-thumb='uploads/audi_hero.jpg' data-rotate='0' data-saveperformance='off' data-title='Business Solutions' data-description='' >



                                    <!--************************ MAIN IMAGE 1 INTRO ************************-->
                                    <img src="uploads/audi_hero.jpg"  alt="image"  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg">
                                    <!-- LAYERS -->
                                    <!-- LAYER NR. 1 -->
                                    <div class="tp-caption tp-resizeme  " 
                                        data-x="['left','left','left','left']" data-hoffset="['-2','0','35','0']" 
                                        data-y="['middle','middle','middle','middle']" data-voffset="['-82','-82','-82','-82']"
                                        data-width="none"
                                        data-height="none"
                                        data-transform_idle="o:1;"
                                        data-transform_in="z:0;rX:0deg;rY:0;rZ:0;sX:1.5;sY:1.5;skX:0;skY:0;opacity:0;s:1500;e:Power3.easeInOut;" 
                                        data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                        data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" 
                                        data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
                                        data-start="1000"
                                        data-splitout="none" 
                                        data-responsive_offset="on" 
                                        data-elementdelay="0.05" 
                                        style="z-index: 5;">
                                        <h1>Unleash Your<br> Vehicles Potential</h1>
                                    </div>
                                    <div class="tp-caption tp-resizeme  " 
                                        data-x="['left','left','left','left']" data-hoffset="['0','0','35','0']" 
                                        data-y="['middle','middle','middle','middle']" data-voffset="['22','22','22','22']"
                                        data-width="none"
                                        data-height="none"
                                        data-transform_idle="o:1;"
                                        data-transform_in="z:0;rX:0deg;rY:0;rZ:0;sX:1.5;sY:1.5;skX:0;skY:0;opacity:0;s:1500;e:Power3.easeInOut;" 
                                        data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                        data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" 
                                        data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
                                        data-start="1250"
                                        data-splitout="none" 
                                        data-responsive_offset="on" 
                                        data-elementdelay="0.05" 
                                        style="z-index: 5;">
                                        <img src="uploads/hrslider.png" alt="">
                                    </div>
                                    <!-- LAYER NR. 2 -->
                                    <div class="tp-caption tp-resizeme  " 
                                        data-x="['left','left','left','left']" data-hoffset="['0','0','35','0']" 
                                        data-y="['middle','middle','middle','middle']" data-voffset="['96','96','96','65']" 
                                        data-width="none"
                                        data-height="none"
                                        data-whitespace="nowrap"
                                        data-transform_idle="o:1;"
                                        data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2000;e:Power4.easeInOut;" 
                                        data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                        data-mask_in="x:0px;y:[100%];" 
                                        data-mask_out="x:inherit;y:inherit;" 
                                        data-start="1500" 
                                        data-splitin="none" 
                                        data-splitout="none" 
                                        data-responsive_offset="on" 
                                        style="z-index: 6; white-space: nowrap;">
                                        <p>Our custom road maps are second to none<br> Call us to book, or see your vehicles figures.</p>
                                    </div>
                                    <div class="tp-caption tp-resizeme  "
                                        data-x="['left','left','left','left']" data-hoffset="['0','0','35','0']" 
                                        data-y="['middle','middle','middle','middle']" data-voffset="['199','199','199','169']"
                                        data-transform_idle="o:1;"
                                        data-transform_hover="o:1;rX:0;rY:0;rZ:0;z:0;s:300;e:Power1.easeInOut;"
                                        data-style_hover="c:rgba(0, 154, 238, 1.00);bc:rgba(0, 154, 238, 1.00);cursor:pointer;"
                                        data-transform_in="x:[-100%];z:0;rX:0deg;rY:0deg;rZ:0deg;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2500;e:Power3.easeInOut;" 
                                        data-transform_out="auto:auto;s:1000;e:Power2.easeInOut;" 
                                        data-start="2500" 
                                        data-splitin="none" 
                                        data-splitout="none" 
                                        data-responsive_offset="on">
                                        <a href="+441370700313" class="contact_us btn btn-default">Contact us</a>
                                    </div>
                                    <div class="tp-caption tp-resizeme  "
                                        data-x="['left','left','left','left']" data-hoffset="['193','193','228','193']" 
                                        data-y="['middle','middle','middle','middle']" data-voffset="['199','199','199','169']"
                                        data-transform_idle="o:1;"
                                        data-transform_hover="o:1;rX:0;rY:0;rZ:0;z:0;s:300;e:Power1.easeInOut;"
                                        data-style_hover="c:rgba(255, 255, 255, 1.00);bg:rgba(114, 168, 0, 1.00);cursor:pointer;"
                                        data-transform_in="x:[100%];z:0;rX:0deg;rY:0deg;rZ:0deg;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2500;e:Power3.easeInOut;" 
                                        data-transform_out="auto:auto;s:1000;e:Power2.easeInOut;" 
                                        data-start="2500" 
                                        data-splitin="none" 
                                        data-splitout="none" 
                                        data-responsive_offset="on">
                                        <a class="btn btn-default our_service js-scroll-trigger" href="#seemyfigures">See My Figures</a>
                                    </div>
                                </li>
                                <li data-index='rs-376' data-transition='curtain-1' data-slotamount='default' data-easein='default' data-easeout='default' data-masterspeed='default' data-thumb='uploads/slider_02.jpg' data-rotate='0' data-saveperformance='off' data-title='Business Solutions' data-description='' >




                                    <!--************************ MAIN IMAGE 2 BECOME A DEALER ************************-->
                                    <img src="uploads/astonmartin_hero.jpg"  alt="image"  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg">
                                    
                                    <!-- LAYERS -->
                                    <!-- LAYER NR. 1 -->
                                    <div class="tp-caption" 
                                        data-x="['right','right','right','right']" data-hoffset="['-2','0','35','0']" 
                                        data-y="['middle','middle','middle','middle']" data-voffset="['-82','-82','-82','-82']"
                                        data-width="none"
                                        data-height="none"
                                        data-transform_idle="o:1;"
                                        data-transform_in="z:0;rX:0deg;rY:0;rZ:0;sX:1.5;sY:1.5;skX:0;skY:0;opacity:0;s:1500;e:Power3.easeInOut;" 
                                        data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                        data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" 
                                        data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
                                        data-start="1000"
                                        data-splitout="none" 
                                        data-responsive_offset="on" 
                                        data-elementdelay="0.05" 
                                        style="z-index: 5;">
                                        <h1>Become A Mototech<br>Approved Dealer Today</h1>
                                    </div>
                                    <div class="tp-caption tp-resizeme  " 
                                        data-x="['right','right','right','right']" data-hoffset="['0','0','35','0']" 
                                        data-y="['middle','middle','middle','middle']" data-voffset="['22','22','22','22']"
                                        data-width="none"
                                        data-height="none"
                                        data-transform_idle="o:1;"
                                        data-transform_in="z:0;rX:0deg;rY:0;rZ:0;sX:1.5;sY:1.5;skX:0;skY:0;opacity:0;s:1500;e:Power3.easeInOut;" 
                                        data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                        data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" 
                                        data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
                                        data-start="1250"
                                        data-splitout="none" 
                                        data-responsive_offset="on" 
                                        data-elementdelay="0.05" 
                                        style="z-index: 5;">
                                        <img src="uploads/hrslider1.png" alt="">
                                    </div>
                                    <!-- LAYER NR. 2 -->
                                    <div class="tp-caption tp-resizeme text-right  " 
                                        data-x="['right','right','right','right']" data-hoffset="['0','0','35','0']" 
                                        data-y="['middle','middle','middle','middle']" data-voffset="['96','96','96','65']" 
                                        data-width="none"
                                        data-height="none"
                                        data-whitespace="nowrap"
                                        data-transform_idle="o:1;"
                                        data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2000;e:Power4.easeInOut;" 
                                        data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                        data-mask_in="x:0px;y:[100%];" 
                                        data-mask_out="x:inherit;y:inherit;" 
                                        data-start="1500" 
                                        data-splitin="none" 
                                        data-splitout="none" 
                                        data-responsive_offset="on" 
                                        style="z-index: 6; white-space: nowrap;">
                                        <p>As a Motortech approved dealer<br> we offer full training & remote support 24/7. </p>
                                    </div>
                                    <div class="tp-caption tp-resizeme  "
                                        data-x="['right','right','right','right']" data-hoffset="['0','0','35','0']" 
                                        data-y="['middle','middle','middle','middle']" data-voffset="['199','199','199','169']"
                                        data-transform_idle="o:1;"
                                        data-transform_hover="o:1;rX:0;rY:0;rZ:0;z:0;s:300;e:Power1.easeInOut;"
                                        data-style_hover="c:rgba(0, 154, 238, 1.00);bc:rgba(0, 154, 238, 1.00);cursor:pointer;"
                                        data-transform_in="x:[-100%];z:0;rX:0deg;rY:0deg;rZ:0deg;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2500;e:Power3.easeInOut;" 
                                        data-transform_out="auto:auto;s:1000;e:Power2.easeInOut;" 
                                        data-start="2500" 
                                        data-splitin="none" 
                                        data-splitout="none" 
                                        data-responsive_offset="on">
                                        <a href="+441370700313" class="contact_us btn btn-default">Contact us</a>
                                    </div>
                                    <div class="tp-caption tp-resizeme  "
                                        data-x="['right','right','right','right']" data-hoffset="['193','193','228','193']" 
                                        data-y="['middle','middle','middle','middle']" data-voffset="['199','199','199','169']"
                                        data-transform_idle="o:1;"
                                        data-transform_hover="o:1;rX:0;rY:0;rZ:0;z:0;s:300;e:Power1.easeInOut;"
                                        data-style_hover="c:rgba(255, 255, 255, 1.00);bg:rgba(114, 168, 0, 1.00);cursor:pointer;"
                                        data-transform_in="x:[100%];z:0;rX:0deg;rY:0deg;rZ:0deg;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2500;e:Power3.easeInOut;" 
                                        data-transform_out="auto:auto;s:1000;e:Power2.easeInOut;" 
                                        data-start="2500" 
                                        data-splitin="none" 
                                        data-splitout="none" 
                                        data-responsive_offset="on">
                                        <a href="become-a-dealer.html" class="btn btn-default our_service">Apply Here</a>
                                    </div>
                                </li>
                                <li data-index='rs-379' data-transition='curtain-1' data-slotamount='default' data-easein='default' data-easeout='default' data-masterspeed='default' data-thumb='uploads/hero_shifter.jpg' data-rotate='0' data-saveperformance='off' data-title='Business Solutions' data-description='' >




                                    <!--************************ MAIN IMAGE 3 SHIFT MAPS************************-->
                                    <img src="uploads/hero_shifter.jpg"  alt="image"  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg">
                                    <!-- LAYERS -->
                                    <!-- LAYER NR. 1 -->
                                    <div class="tp-caption" 
                                        data-x="['left','left','left','left']" data-hoffset="['-2','0','35','0']" 
                                        data-y="['middle','middle','middle','middle']" data-voffset="['-92','-92','-92','-92']"
                                        data-width="none"
                                        data-height="none"
                                        data-transform_idle="o:1;"
                                        data-transform_in="z:0;rX:0deg;rY:0;rZ:0;sX:1.5;sY:1.5;skX:0;skY:0;opacity:0;s:1500;e:Power3.easeInOut;" 
                                        data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                        data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" 
                                        data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
                                        data-start="1000"
                                        data-splitout="none" 
                                        data-responsive_offset="on" 
                                        data-elementdelay="0.05" 
                                        style="z-index: 5;">
                                        <h1>Shift Maps<br>Up to 60% <br>faster shift times</h1>
                                    </div>
                                    <div class="tp-caption tp-resizeme  " 
                                        data-x="['left','left','left','left']" data-hoffset="['0','0','35','0']" 
                                        data-y="['middle','middle','middle','middle']" data-voffset="['22','22','22','22']"
                                        data-width="none"
                                        data-height="none"
                                        data-transform_idle="o:1;"
                                        data-transform_in="z:0;rX:0deg;rY:0;rZ:0;sX:1.5;sY:1.5;skX:0;skY:0;opacity:0;s:1500;e:Power3.easeInOut;" 
                                        data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                        data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" 
                                        data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;" 
                                        data-start="1250"
                                        data-splitout="none" 
                                        data-responsive_offset="on" 
                                        data-elementdelay="0.05" 
                                        style="z-index: 5;">
                                        <img src="uploads/hrslider.png" alt="">
                                    </div>
                                    <!-- LAYER NR. 2 -->
                                    <div class="tp-caption tp-resizeme tp-fade" 
                                        data-x="['left','left','left','left']" data-hoffset="['0','0','35','0']" 
                                        data-y="['middle','middle','middle','middle']" data-voffset="['96','96','96','65']" 
                                        data-width="none"
                                        data-height="none"
                                        data-whitespace="nowrap"
                                        data-transform_idle="o:1;"
                                        data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2000;e:Power4.easeInOut;" 
                                        data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;" 
                                        data-mask_in="x:0px;y:[100%];" 
                                        data-mask_out="x:inherit;y:inherit;" 
                                        data-start="1500" 
                                        data-splitin="none" 
                                        data-splitout="none" 
                                        data-responsive_offset="on" 
                                        style="z-index: 6; white-space: nowrap;">
                                        <p>Our shift maps balance the harmony<br> between your ECU & your gearbox</p>
                                    </div>
                                    <div class="tp-caption tp-resizeme  "
                                        data-x="['left','left','left','left']" data-hoffset="['0','0','35','0']" 
                                        data-y="['middle','middle','middle','middle']" data-voffset="['199','199','199','169']"
                                        data-transform_idle="o:1;"
                                        data-transform_hover="o:1;rX:0;rY:0;rZ:0;z:0;s:300;e:Power1.easeInOut;"
                                        data-style_hover="c:rgba(0, 154, 238, 1.00);bc:rgba(0, 154, 238, 1.00);cursor:pointer;"
                                        data-transform_in="x:[-100%];z:0;rX:0deg;rY:0deg;rZ:0deg;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2500;e:Power3.easeInOut;" 
                                        data-transform_out="auto:auto;s:1000;e:Power2.easeInOut;" 
                                        data-start="2500" 
                                        data-splitin="none" 
                                        data-splitout="none" 
                                        data-responsive_offset="on">
                                        <a href="+441370700313" class="contact_us btn btn-default">Contact us</a>
                                    </div>
                                    <div class="tp-caption tp-resizeme  "
                                        data-x="['left','left','left','left']" data-hoffset="['193','193','228','193']" 
                                        data-y="['middle','middle','middle','middle']" data-voffset="['199','199','199','169']"
                                        data-transform_idle="o:1;"
                                        data-transform_hover="o:1;rX:0;rY:0;rZ:0;z:0;s:300;e:Power1.easeInOut;"
                                        data-style_hover="c:rgba(255, 255, 255, 1.00);bg:rgba(114, 168, 0, 1.00);cursor:pointer;"
                                        data-transform_in="x:[100%];z:0;rX:0deg;rY:0deg;rZ:0deg;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2500;e:Power3.easeInOut;" 
                                        data-transform_out="auto:auto;s:1000;e:Power2.easeInOut;" 
                                        data-start="2500" 
                                        data-splitin="none" 
                                        data-splitout="none" 
                                        data-responsive_offset="on">
                                        <a href="#" class="btn btn-default our_service">More Info</a>
                                    </div>
                                </li>
                            </ul>   
                        </div>
                    </div>
                
            </div> 
        </div>

Do you have a link to the actual page so we can see it in action?

Usually for sliders like this you would set all the options that you require in the JS and although I am unfamiliar with the revolution slider I can see that there are lots of options to get to grips with so the documentation would be the first port of call.

It may be that you can over-ride some things with CSS but I’m guessing that you would be fighting the dynamic js that is also applying rules at the same time.

If this is a WordPress site then I believe you have a control panel for plugins like this with all the options available to make it responsive. I did see a number of youtube videos around but there are probably better resources out there.


I find it unlikely that a ‘paid for’ slider (like the revolution slider) will not have responsive options already built in these days (but I may be wrong:)).

Hi Paul

Thanks for your message and links.

Unfortunately the site is still in dev stage on a local host. It’s a custom site and not Wordpress.

In regards to setting all of the settings in JS I think your right as I’ve modified the css and it did change the fixed size however it doesn’t seem to respond when I change the view in chrome dev tools to iPhone. I tried em and rem but it seems that something is forcing it to maintain the set size in css.

I’ll try having a look at the documentation, (I probably should have started there :man_facepalming:t3:)

I’m quite new to JS so didn’t know if there was something simple that I was missing.

Is there a way of scaling the whole container down instead so that the buttons also scale down proportionally to the other elements?

Things don’t really work that way although its possible for some elements like images etc. Generally the layout is controlled via your media queries at appropriate breakpoints and adjusted as necessary.

It’s not a case of making everything smaller as the screen width changes but of organising the content more efficiently. Indeed it may be that you need bigger buttons on smaller screens so that they have bigger target areas for fat thumbs etc. There is much more to consider than making everything smaller or bigger.

I’ve a feeling that your slider documentation will already have this facility built in from looking at the demos around.

I’ll try and see if I can find some relevant information tomorrow as I have not been online much today. :slight_smile:

1 Like

Thanks Paul.

You make a good point in regards to scaling & large thumbs.

I’ll have a dig through the documentation to see if i can find how it handles scaling & media queries and will post my findings.

Thanks again for your help & advice. Much appreciated.

There seems to be some details here.

https://www.themepunch.com/revsliderjquery-doc/slider-layout/

It seems you can also purchase a tool to help with customisation. That’s the problem with this ‘paid for’ sliders in that they are very complex and have steep learning curves if you want something different from the default.

Thanks Paul. That’s awesome.

Ill compare the markup on there to mine and see if I can modify mine to behave correctly. :crossed_fingers:

I appreciate you taking the time to look this. Thanks mate.

Hey Paul

Do you know if there is anyway to speed the load time of the banner?

I have minified the JS files, reduced image sizes and have yet to Min the CSS.
Currently it takes about 6 seconds from refresh for it to initialise and start rolling.

Thanks in advance.

That seems to be a common problem with those heavy weight sliders.

It seems as though you are doing all the right things and it may be the load is just too heavy.

Have a look in dev tools and see if you can spot which items are taking the most time and see if you can do anything about them. You may have other scripts or actions getting in the way first so you may need to re-order or delay/defer them. Optimisation isn’t really my area apart from reducing code and image sizes etc. Images often seem to be the biggest culprit so sometimes you really need to optimise them as much as possible with the various tools available.

Maybe you could inline a low res placeholder image in the slider to get something on screen quicker?

In the end the resources you need have to load so if you have minified everything and reduced delays then what’s left is what you need to run and it may take time. Try and identify where the hold up is and then see what you can do to offset it in some way.

Sorry I can’t give much more help than generalisations as script performance is not my area :slight_smile: