Image Slider - разные картинки для мобильного и рабочего стола

Question

Я использую SlidesJS . Слайдер изображений работает нормально для рабочего стола, но теперь я хочу загрузить другой набор изображений для мобильных устройств. Я заглянул на форум SlidesJS и его веб-сайт, но я не вижу там подсказки, я также посмотрел различные вопросы по SO, но ни один из них не работает. Поскольку slidesJS предоставляет код по умолчанию, подобный этому

Javascript

 <!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
  <script>
    $(function() {
      $('#gallery-slides').slidesjs({
        width: 800,
        height: 450,
        play: {
          active: true,
          auto: true,
          interval: 4000,
          swap: true
        }
      });
    });

  </script>

HTML

<div id="gallery-slides">
 <img src="images/nearby_page_concept.jpg" >
 <img src="images/location_gif2-min.gif" >
 <img src="images/smart_search_page.jpg" >
 <img src="images/privacy_control_concept.jpg" >
 <img src="images/messaging_page_concept.jpg" >
 <img src="images/user_search_page_concept.jpg" >   

 </div>

CSS

#gallery-slides {
      display: none
    }



    #gallery-slides .slidesjs-navigation {
      margin-top:5px;
    }

    a.slidesjs-next,
    a.slidesjs-previous,
    a.slidesjs-play,
    a.slidesjs-stop {
      background-image: url(../images/btns-next-prev.png);
      background-repeat: no-repeat;
      display:block;
      width:12px;
      height:18px;
      overflow: hidden;
      text-indent: -9999px;
      float: left;
      margin-right:5px;
    }

    a.slidesjs-next {
      margin-right:10px;
      background-position: -12px 0;
    }

    a:hover.slidesjs-next {
      background-position: -12px -18px;
    }

    a.slidesjs-previous {
      background-position: 0 0;
    }

    a:hover.slidesjs-previous {
      background-position: 0 -18px;
    }

    a.slidesjs-play {
      width:15px;
      background-position: -25px 0;
    }

    a:hover.slidesjs-play {
      background-position: -25px -18px;
    }

    a.slidesjs-stop {
      width:18px;
      background-position: -41px 0;
    }

    a:hover.slidesjs-stop {
      background-position: -41px -18px;
    }

    .slidesjs-pagination {
      margin: 7px 0 0;
      float: right;
      list-style: none;
    }

    .slidesjs-pagination li {
      float: left;
      margin: 0 1px;
    }

    .slidesjs-pagination li a {
      display: block;
      width: 13px;
      height: 0;
      padding-top: 13px;
      background-image: url(../images/pagination.png);
      background-position: 0 0;
      float: left;
      overflow: hidden;
    }

    .slidesjs-pagination li a.active,
    .slidesjs-pagination li a:hover.active {
      background-position: 0 -13px
    }

    .slidesjs-pagination li a:hover {
      background-position: 0 -26px
    }

    #gallery-slides a:link,
    #gallery-slides a:visited {
      color: #333
    }

    #gallery-slides a:hover,
    #gallery-slides a:active {
      color: #9e2020
    }

    .gallery-navbar {
      overflow: hidden
    }

     #gallery-slides {
      display: none
    }

    .containerslides {
      margin: 0 auto
    }

Я попробовал другой подход, чтобы сделать слайдеризмените изображение на мобильном устройстве, например,

Вместо имени <img src="xyz.jpg"> укажите имя класса и объявите разные изображения с помощью медиазапросов в css

Попробовал if else оператор javascript в HTML

Мне также нужно выяснить, могу ли я изменить изображение, тогда мне также нужно изменить высоту и ширину слайдов JS по умолчанию в SlidesJS.

Пожалуйста, объясните мне, как изменить разные изображения для экрана разных размеров для слайдера изображений. .

Обратите внимание, что я не хочу загружать изображения всех разных разрешений, когда я их не показываю. Влияет на производительность сайта.

Answer 1

Вы можете использовать jquery, если вы загружаете нужные изображения через javascript, это будет загружать только определенную часть кода, таким образом, не влияя на производительность сайта

jQuery

<script>if (window.matchMedia("(max-width: 480px)").matches) {
        $.getScript("mobile.js");
    } else { 
        $.getScript("Desktop.js");
    }
    </script>

mobile.js / Desktop.js - хранит расположение / расположение всех изображений для отображения на мобильном устройстве или в настольном компьютере, соответственно:

JS

var _img1 = document.getElementById('id1');
var _img2 = document.getElementById('id2');
var _img3 = document.getElementById('id3');

var newImg = new Image;
newImg.onload = function() {
    _img1.src = 'https://whateversource';
    _img2.src = 'https://whateversource';
    _img3.src = 'https://whateversource';
    wherever you want to return it goes here
}

HTML

<div id="gallery-slides">
 <img id="id1">
 <img id="id2">
 <img id="id3"> 
 </div>

Наслаждайтесь:)