Different slider image for different screen sizes

Hi,
Is it possible to set a different slider image for different screen sizes?

BR

Hello BR,

Please try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    jQuery(function($) {

      var screenSize = 1024;
      if ( matchMedia( 'only screen and (max-width: ' + screenSize + 'px)' ).matches ) {

        // Slide 1
        var img1 = 'http://yoursite.com/path-to-image1.jpg';
        $('.header-slider .slide-item:nth-of-type(1)').css('background-image', img1);
        $('.header-slider .slide-item:nth-of-type(1) .mobile-slide').attr('src', img1);

        // Slide 2
        var img2 = 'http://yoursite.com/path-to-image2.jpg';
        $('.header-slider .slide-item:nth-of-type(2)').css('background-image', img2);
        $('.header-slider .slide-item:nth-of-type(2) .mobile-slide').attr('src', img2);

        // Slide 3
        var img3 = 'http://yoursite.com/path-to-image3.jpg';
        $('.header-slider .slide-item:nth-of-type(3)').css('background-image', img3);
        $('.header-slider .slide-item:nth-of-type(3) .mobile-slide').attr('src', img3);

        // Slide 4
        var img4 = 'http://yoursite.com/path-to-image4.jpg';
        $('.header-slider .slide-item:nth-of-type(4)').css('background-image', img4);
        $('.header-slider .slide-item:nth-of-type(4) .mobile-slide').attr('src', img4);

        // Slide 5
        var img5 = 'http://yoursite.com/path-to-image5.jpg';
        $('.header-slider .slide-item:nth-of-type(5)').css('background-image', img5);
        $('.header-slider .slide-item:nth-of-type(5) .mobile-slide').attr('src', img5);

      }

    });
  1. Update

Regards,
Kharis

Thanks,

I did as described but nothing seems to have changed at all. Still the same image.

Here is the site url https://insolventia.se

Hello there,

Please try this code:

    jQuery(function($) {

      $(document).on( 'load, on-appear', $('.extra-skill'), function(){

        var screenSize = 1024;
        if ( matchMedia( 'only screen and (max-width: ' + screenSize + 'px)' ).matches ) {

          // Slide 1
          var img1 = 'https://insolventia.se/wp-content/uploads/2018/05/slider3mobile.jpg';
          $('.sydney-hero-area #slideshow.header-slider .slide-item:nth-of-type(1)').css('background-image', img1);
          $('.sydney-hero-area #slideshow.header-slider .slide-item:nth-of-type(1) .mobile-slide').attr('src', img1);
        }

      });

    }); 

Regards,
Kharis

Hi thanks once again

Still not working as far as i can tell :confused:
Maybe im doing something wrong.

Sorry for suggested incorrect code. Please try this one:

    jQuery(function($) {

      $(window).on('ready scroll', function() {

        var screenSize = 1024;
        if ( matchMedia( 'only screen and (max-width: ' + screenSize + 'px)' ).matches ) {

          // Slide 1
          var img1 = 'https://insolventia.se/wp-content/uploads/2018/05/slider3mobile.jpg';
          $('.sydney-hero-area #slideshow.header-slider .slide-item:nth-of-type(1)').css('background-image', img1);
          $('.sydney-hero-area #slideshow.header-slider .slide-item:nth-of-type(1) .mobile-slide').attr('src', img1);
        }

      });

    });  

Regards,
Kharis

Nope :smiley:

Must be me doing something wrong. Still cant get it to work hehe

Hello there,

For efficiency reason, please share the working login credentials to my email at kharisblank@gmail.com, to allow me doing it for you. Mention the link to this topic in your email body to signal its a follow up of this reply in the forum.

Regards,
Kharis

I’ve sent you an email with login credentials :slight_smile:

Resolved over email support with this final code:

    (function($){

      if ( $( "#slideshow" ).length ) {

        var screenSize = 1024;
        if ( matchMedia( 'only screen and (max-width: ' + screenSize + 'px)' ).matches ) {

          // Slide 1
          var img1 = 'https://insolventia.se/wp-content/uploads/2018/05/slider3mobile.jpg';
          $('.sydney-hero-area #slideshow.header-slider .slide-item:nth-of-type(1)').css({
            'background-image': 'url(' + img1 + ')'
          });
          $('.sydney-hero-area #slideshow.header-slider .slide-item:nth-of-type(1) .mobile-slide').attr('src', img1);

        }

      }

    })(jQuery);