Question

我正在使用此图像滑块：https://github.com/sachinchoolur/lightslider

我将滑块放在隐藏的div中，当打开div时，包含图像的滑块中的ul的高度为0px，直到调整窗口大小为止。这是检查元素时看到的内联CSS。

调整大小之前： <ul id="content-slider" class="content-slider" style="width: 40px; transform: translate3d(-40px, 0px, 0px); height: 165px; padding-bottom: 0%;"

调整大小后： <ul id="content-slider" class="content-slider" style="width: 3112px; transform: translate3d(-778px, 0px, 0px); height: 165px; padding-bottom: 0%;">

这似乎是一个常见的问题，并且有一些解决方案，例如将autoWidth设置为false，但它已经是错误的。也建议添加此内容，但我不确定在哪里：

$.each($(".light-slider"), function(i, instance){
    $(instance).imagesLoaded(function(){
        $(instance).lightSlider();
    });
});

这是与以下代码https://github.com/sachinchoolur/lightslider/blob/master/src/js/lightslider.js一起使用的js文件

功能：

<script type="text/javascript" src="js/libs/jquery.min.js"></script>
<script src="js/lightslider.js"></script> 

/* show and hide content */
$('document').ready(function() {
  $('#show5').click( function() {
    var $div = $('#' + $(this).data('href'));
  $('#project-one').not($div).hide();
    $div.slideToggle();
  });

  $('#show6').click( function() {
    var $div = $('#' + $(this).data('href'));
  $('#project-one').not($div).hide();
    $div.slideToggle();
  });
}); 


/* image slider */
$(document).ready(function() {
$("#content-slider").lightSlider({
    loop:true,
    keyPress:true

});
$('#image-gallery').lightSlider({
    gallery:true,
    item:1,
    thumbItem:9,
    slideMargin: 0,
    speed:500,
    auto:true,
    loop:true,
    onSliderLoad: function() {
        $('#image-gallery').removeClass('cS-hidden');
    }  
});
});

HTML：

<div id="projects-container" class="row">
 <div class="w-33 ml-100 mp-100 project" id="first-project">
  <img class="project-image" src="img/proj-temp.jpg" alt="" title="" id="show5" data-href="project-one" >
 <h4>Title</h4>
 <a class="learn-more" id="show6" data-href="project-one">Explore <span>This Project</span></a>
 <div class="panel" id="project-one">

    <div class="project-gallery-container w-100">
     <div class="item">
      <ul id="content-slider" class="content-slider">
       <li>
        <h3>1</h3>
       </li>
       <li>
        <h3>2</h3>
       </li>
       <li>
        <h3>3</h3>
       </li>
       <li>
        <h3>4</h3>
       </li>
       <li>
        <h3>5</h3>
       </li>
       <li>
        <h3>6</h3>
       </li>
      </ul>
     </div>
    </div>
   </div>                        
 </div>
</div>

CSS：

#projects-container .panel {
    display:none;
 }
.project {
    margin-left: 2%!important;       
    transition: .5s;
 }
.panel .w-100 {
    padding:0!important;
 }
.project-gallery-container ul {
    list-style: none outside none;
    padding-left: 0;
    margin: 0;
 }
.content-slider li{
    background-color: #333;
    text-align: center;
    color: #FFF;
 }
.content-slider h3 {
    margin: 0;
    padding: 70px 0;
 }

.lSSlideOuter {
    overflow: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}
.lightSlider:before, .lightSlider:after {
    content: " ";
    display: table;
}
.lightSlider {
    overflow: hidden;
    margin: 0;
}
.lSSlideWrapper {
    max-width: 100%;
    overflow: hidden;
    position: relative;
}
.lSSlideWrapper > .lightSlider:after {
    clear: both;
}
.lSSlideWrapper .lSSlide {
    -webkit-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    -webkit-transition: all 1s;
    -webkit-transition-property: -webkit-transform,height;
    -moz-transition-property: -moz-transform,height;
    transition-property: transform,height;
    -webkit-transition-duration: inherit !important;
    transition-duration: inherit !important;
    -webkit-transition-timing-function: inherit !important;
    transition-timing-function: inherit !important;
}
.lSSlideOuter .lSPager.lSpg {
    margin: 10px 0 0;
    padding: 0;
    text-align: center;
}
.lSSlideOuter .lSPager.lSpg > li {
    cursor: pointer;
    display: inline-block;
    padding: 0 5px;
}
.lSSlideOuter .lSPager.lSpg > li a {
    background-color: #222222;
    border-radius: 30px;
    display: inline-block;
    height: 8px;
    overflow: hidden;
    text-indent: -999em;
    width: 8px;
    position: relative;
    z-index: 99;
    -webkit-transition: all 0.5s linear 0s;
    transition: all 0.5s linear 0s;
}
.lSSlideOuter .lSPager.lSpg > li:hover a, .lSSlideOuter .lSPager.lSpg > li.active a {
    background-color: #428bca;
}
.lSSlideOuter .media {
    opacity: 0.8;
}
.lSSlideOuter .media.active {
    opacity: 1;
}
.lSAction > a {
    width: 32px;
    display: block;
    top: 50%;
    height: 32px;
    background-image: url('../img/controls.png');
    cursor: pointer;
    position: absolute;
    z-index: 99;
    margin-top: -16px;
    opacity: 0.5;
    -webkit-transition: opacity 0.35s linear 0s;
    transition: opacity 0.35s linear 0s;
}
.lSAction > a:hover {
    opacity: 1;
}
.lSAction > .lSPrev {
    background-position: 0 0;
    left: 10px;
}
.lSAction > .lSNext {
    background-position: -32px 0;
    right: 10px;
}
.lSSlideOuter.lSrtl {
    direction: rtl;
}
.lSSlideOuter .lightSlider, .lSSlideOuter .lSPager {
    padding-left: 0;
    list-style: none outside none;
}
.lSSlideOuter .lightSlider > *,  .lSSlideOuter .lSGallery li {
    float: left;
}
.lightSlider.lsGrabbing > * {
  cursor: move;
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: -o-grabbing;
  cursor: -ms-grabbing;
  cursor: grabbing;
}

当我将滑块移到隐藏的div之外时，无需调整大小即可正常工作。

Answer 1

我只是遇到了完全相同的问题...多亏了您的帖子，我发现调整窗口大小确实可以使图库出现！因此，我手动触发了一个调整大小事件：

var triggerResize = function(){
  window.dispatchEvent(new Event('resize'));
}

图像光滑块的高度为0px，直到窗口调整大小

1 个答案: