Support » Plugin: Smart Slider 3 » Redux 4.x Compatibility

  • Hey, wanted to bring something to your attention. Redux, used by millions of sites world-wide (and 900,000 WP.org installs) just changed methods for adding Google Fonts on sites which seems to cause an issue in your JS.

    First we followed this method to speed up our font loading and we’re seeing gains of 20%. You should adopt it as well. https://csswizardry.com/2020/05/the-fastest-google-fonts/

    In doing so, our style block looks like this:

    
    <link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900,100italic,200italic,300italic,400italic,500italic,600italic,700italic,800italic,900italic|Source Sans Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic&display=swap&ver=1598030629" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900,100italic,200italic,300italic,400italic,500italic,600italic,700italic,800italic,900italic|Source Sans Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic&display=swap&ver=1598030629" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900,100italic,200italic,300italic,400italic,500italic,600italic,700italic,800italic,900italic|Source Sans Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic&display=swap&ver=1598030629" /><link rel="stylesheet" type="text/css" href="//velmots83.ddns.net/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider.min.css?ver=70fceec4" media="all" /></noscript>
    

    Your JS for whatever reason is doing this:

    
    <link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900,100italic,200italic,300italic,400italic,500italic,600italic,700italic,800italic,900italic|Source Sans Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic&display=swap&ver=1598030629" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900,100italic,200italic,300italic,400italic,500italic,600italic,700italic,800italic,900italic|Source Sans Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic&display=swap&ver=1598030629" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900,100italic,200italic,300italic,400italic,500italic,600italic,700italic,800italic,900italic|Source Sans Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic&display=swap&ver=1598030629" /><link rel="stylesheet" type="text/css" href="//velmots83.ddns.net/wp-content/plugins/smart-slider-3/Public/SmartSlider3/Application/Frontend/Assets/dist/smartslider.min.css?ver=70fceec4" media="all" />
    <style type="text/css">.n2-ss-spinner-simple-white-container {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -20px;
        background: #fff;
        width: 20px;
        height: 20px;
        padding: 10px;
        border-radius: 50%;
        z-index: 1000;
    }
    
    .n2-ss-spinner-simple-white {
      outline: 1px solid RGBA(0,0,0,0);
      width:100%;
      height: 100%;
    }
    
    .n2-ss-spinner-simple-white:before {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        margin-top: -11px;
        margin-left: -11px;
    }
    
    .n2-ss-spinner-simple-white:not(:required):before {
        content: '';
        border-radius: 50%;
        border-top: 2px solid #333;
        border-right: 2px solid transparent;
        animation: n2SimpleWhite .6s linear infinite;
    }
    @keyframes n2SimpleWhite {
        to {transform: rotate(360deg);}
    }</style></noscript>
    

    See it’s wrapping WITHIN the no-script so it never loads. I guess we could add an empty tag here, but could you fix your JS selector so people using Redux 4.1.15 don’t suddenly not have their sliders? If I could fix it on my end I’d do so, but I don’t think what I’m doing is anything odd.

    I’m sure it’s a quick fix, just wanted to bring it to your attention. 🙂

Viewing 11 replies - 1 through 11 (of 11 total)
Viewing 11 replies - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.