为什么我的插件无法读取属性？

Question

几乎我不会睡觉，直到我解决这个问题我不明白我的错误在哪里。太有趣了..

我想尽快向你解释我做了什么。

我有循环2和lightgallery插件，在我从我的旋转木马中选择任何类别后，我重新生成/再次生成我的旋转木马 - 如果你查看我的例子你就会理解 - 但之后我的光库被破坏了它给了我一个错误，并且在选择任何类别后，lightgallery不再起作用

please click to see my code on codepen too

$(document).ready(function() {
  options = {
          next: "#single-right",
          log: false,
          fx: "fade",
          caption: ".cycle-caption",
          captionTemplate: "{{title}}",
          pauseOnHover: true,
          pager: "#single-pager",
          pagerTemplate: "<img class='lazyload' data-src='{{exthumbimage}}' width='70' height='70'>",
          prev: "#single-left",
          slides: "div[data-hidden='false']"
        }
      function generateSlider(opt) {
        $("#myCarousel").cycle(opt);
      }

  generateSlider(options);
  
  $('#myCarousel').lightGallery({
    selector:"div[data-hidden='false']",
    exThumbImage: "data-exthumbimage",
    loadYoutubeThumbnail: true,
    youtubeThumbSize: 'default',
    loadVimeoThumbnail: true,
    vimeoThumbSize: 'thumbnail_medium',
  });
  
  
  
  $("#filter li").on("click", function() {
        var activeId = $(this).attr("id");
    if (activeId == "show-all") {
      $(".item").attr("data-hidden", "false");
    } else {
      $(".item").attr("data-hidden", "true");
      $("div[data-id = '" + activeId + "']").attr("data-hidden", "false");
    }
    $("#myCarousel").cycle("destroy");
    options['pagerTemplate'] = "<img class='lazyload' data-src='{{children.0.src}}'  width='70' height='70'>"
    generateSlider(options);
    return false;
    });
  
});

.mySlideShow{
  width:700px;
  position:relative;
}
.item img {
  cursor:pointer;
}
#single-pager img{
  margin:3px;
  cursor:pointer;
  width:60px;
  height:60px;
}
#filter{
  position:absolute;
  top:0;
  right:10%;
  z-index:100;
}
#filter li {
  display:inline-block;
  background:rgba(0,0,0,.7);
  color:#FFF;
  cursor:pointer;
  padding:12px;
}
.cycle-caption{
  position:absolute;
  bottom:14%;
  left:0;
  padding:12px;
  background:rgba(0,0,0,.5);
  color:#FFF;
  text-align:center;
  width:100%;
  z-index:100;
}
div[data-hidden='true']{
  display:none;
}

<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/lightgallery/latest/css/lightgallery.css'>
<div class="mySlideShow">
  <div id="myCarousel">
  <div class="item" data-src="http://images.freeimages.com/images/previews/49a/massive-gear-1255802.jpg" data-exthumbimage="http://images.freeimages.com/images/previews/fa7/my-ride-1552678.jpg" data-id="animals" data-hidden="false" data-title="image 1">
      <img class="lazyload" data-src="http://images.freeimages.com/images/previews/f7a/gear-1462890.jpg"/>
  </div>
  <div class="item" data-src="http://images.freeimages.com/images/previews/7ae/autos-1194364.jpg" data-exthumbimage="http://images.freeimages.com/images/previews/5f6/kaputtes-auto-1564173.jpg" data-id="sports" data-hidden="false" data-title="image 2">
      <img class="lazyload" data-src="http://images.freeimages.com/images/previews/20e/some-grill-1450817.jpg" />
  </div>
  
    
  <div class="item" data-src="https://vimeo.com/1084537" data-exthumbimage="http://sachinchoolur.github.io/lightGallery/static/img/thumb-v-y-2.jpg" data-id="natural" data-hidden="false" data-title="this is the video">
      <img class="lazyload" data-src="http://images.freeimages.com/images/previews/c23/cat-1396828.jpg"/>
  </div>
    
  <div id="single-pager">
  </div>
</div>
  <ul id="filter">
    <li id="animals">Animals</li>
    <li id="sports">Sports</li>
    <li id="natural">Natural</li>
    <li id="show-all">All</li>
  </ul>
  <div class="cycle-caption"></div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js'></script>
<script src='https://cdn.jsdelivr.net/g/lightgallery@1.3.5,lg-fullscreen@1.0.1,lg-hash@1.0.1,lg-pager@1.0.1,lg-share@1.0.1,lg-thumbnail@1.0.1,lg-video@1.0.1,lg-autoplay@1.0.1'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lazysizes/3.0.0/lazysizes.min.js'></script>
<script src='https://f.vimeocdn.com/js/froogaloop2.min.js'></script>

错误哪些scipts给了我

lightgallery@1.3.5,lg-fullscreen@1.0.1,lg-hash@1.0.1,lg-pager@1.0.1,lg-share@1.0.1,lg-thumbnail@1.0…:10 Uncaught TypeError: Cannot read property 's' of undefined
    at new c (lightgallery@1.3.5,lg-fullscreen@1.0.1,lg-hash@1.0.1,lg-pager@1.0.1,lg-share@1.0.1,lg-thumbnail@1.0…:10)
    at Function.<anonymous> (lightgallery@1.3.5,lg-fullscreen@1.0.1,lg-hash@1.0.1,lg-pager@1.0.1,lg-share@1.0.1,lg-thumbnail@1.0…:5)
    at Function.each (jquery.min.js:2)
    at b.build (lightgallery@1.3.5,lg-fullscreen@1.0.1,lg-hash@1.0.1,lg-pager@1.0.1,lg-share@1.0.1,lg-thumbnail@1.0…:5)
    at HTMLDivElement.<anonymous> (lightgallery@1.3.5,lg-fullscreen@1.0.1,lg-hash@1.0.1,lg-pager@1.0.1,lg-share@1.0.1,lg-thumbnail@1.0…:5)
    at HTMLDivElement.dispatch (jquery.min.js:3)
    at HTMLDivElement.q.handle (jquery.min.js:3)

Answer 1

您只需要更改脚本文件

谢谢