Блог

Я использую адаптивный слайдер отhttp://sachinchoolur.github.io/lightslider /, в котором реализован JS и немного CSS. Отлично работает!

Моя проблема: у меня есть 3 поля содержимого, которые отображаются как обычные поля при ширине экрана выше 1024 пикселей — рядом друг с другом. Пока все хорошо…

Я хочу запускать скрипт слайдера только тогда, когда размер экрана меньше 1024 пикселей, и выгружать его, когда размер экрана увеличивается. Но он запускается всегда, и я также застрял при выгрузке скрипта при изменении размера экрана…

Я попытался сделать несколько вещей, но не смог этого добиться. Мой JS не самый лучший tbh…

Мой текущий скрипт следующий:

 <script>
jQuery(document).ready(function() {
                    jQuery("#content-slider").lightSlider({
                            loop:true,
                            keyPress:true,
                            item: 1,
                            enableTouch:true,
                            enableDrag:true,
                            freeMove:true,
                            swipeThreshold: 40, 
                            onSliderLoad: function ($el) {
                                jQuery(window).on('load', function () {
                                        var windowSize = jQuery(window).width();
                                        if(windowSize <= 1024){     
                                            console.log("kleiner 1024");
                                        } else if (windowSize > 1024) { 
                                            console.log("größer 1024");                                     
                                            $el.lightSlider = null;
                                            return false;
                                        }
                                });
                                jQuery(window).on('resize', function () {
                                        var windowSize = jQuery(window).width();
                                        if(windowSize <= 1024){     
                                            console.log("kleiner 1024");
                                        } else if (windowSize > 1024) { 
                                            console.log("größer 1024");                                     
                                            $el.lightSlider = null;
                                            return false;
                                        }
                                });                             
                        }
                    });     
}); 
    </script>
  

У слайдера есть несколько опций для настройки, показанных здесь, в разделе «Воспроизведение с настройками». Я подумал, что было бы разумно использовать функцию «onSliderLoad» и затем проверить размер экрана. В моем скрипте строка с «$ el.lightSlider = null;» — я пробовал выгружать, уничтожать, false и так далее, Но я не могу избавиться от слайдера при изменении размера экрана… не уверен, что это вообще возможно…

Параметры слайдера, подобные упомянутым здесь:

         onSliderLoad: function (el) {},
        onBeforeSlide: function (el) {},
        onAfterSlide: function (el) {},
        onBeforeNextSlide: function (el) {},
        onBeforePrevSlide: function (el) {}
  

Также кажется, что событие загрузки не запускается, поскольку я не вижу свой console.log…

Был бы признателен за любую помощь! Спасибо и с наилучшими пожеланиями

Вы не можете выгружать скрипты

Когда скрипт загружен / выполнен, определения функций добавляются к глобальному объекту window. Если вы не присвоите переменной, то удалите ее.

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

  $('#responsive').lightSlider({
        item:4,
        loop:false,
        slideMove:2,
        easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
        speed:600,
        responsive : [
            {
                breakpoint:800,
                settings: {
                    item:3,
                    slideMove:1,
                    slideMargin:6,
                  }
            },
            {
                breakpoint:480,
                settings: {
                    item:2,
                    slideMove:1
                  }
            }
        ]
    });  
  

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

 class LSWrapper {
  constructor() {
    this.markup = $('#lightSlider').parent().html();
    this.isInit = false;
  }
  init() {
    if (this.isInit) return false;
    this.isInit = true;
    $('#lightSlider').lightSlider({
      gallery: true,
      item: 1,
      loop: true,
      slideMargin: 0,
      thumbItem: 9
    });
  }
  destroy() {
    if (!this.isInit) return false;
    this.isInit = false;
    $('#lightSlider').parent().html(this.markup);
    $(".lSGallery").remove();
  }
}

var slideshow = new LSWrapper();

document.getElementById('init').onclick = () => slideshow.init();
document.getElementById('destroy').onclick = () => slideshow.destroy();  

 .demo {
  width: 420px;
}

ul {
  list-style: none outside none;
  padding-left: 0;
  margin-bottom: 0;
}

li {
  display: block;
  float: left;
  margin-right: 6px;
  cursor: pointer;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/js/lightslider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/css/lightslider.min.css" />

<button id=init>Create</button>
<button id=destroy>Destroy</button>


<div class="demo">
  <ul id="lightSlider">
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-1.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" />
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-2.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg" />
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-3.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-3.jpg" />
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-4.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-4.jpg" />
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-5.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-5.jpg" />
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-6.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-6.jpg" />
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-7.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-7.jpg" />
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-8.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-8.jpg" />
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-9.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-9.jpg" />
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-10.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-10.jpg" />
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-11.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-12.jpg" />
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-13.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-13.jpg" />
    </li>
  </ul>
</div>