点击事件后，光滑元素未完全显示

时间：2017-03-29 13:53:56

标签： javascript jquery click slick.js

我正在使用光滑的滑块库。在页面加载时，我的滑块包装器设置为display: none。当我单击触发器单击按钮时，它会显示滑块，但第一张幻灯片不显示。然后，当第二张幻灯片显示时，高度不正确。

我阅读了与我分享问题的文章，例如：

https://github.com/kenwheeler/slick/issues/158

这是图书馆：

https://github.com/kenwheeler/slick

我尝试初始化滑块，然后向其添加visibility: visible，但这似乎不起作用。

是否有人看到或知道我必须添加什么才能让第一张幻灯片在被触发后完全显示？

Here is a fiddle which shows the issue I am having. 

$('#trigger').on('click', function() {
	$('#pg-preview-wrap').show();
});
$('#calendar-select').on('init', function() {
  $('#calendar-select').css("visibility", "visible");
  $('.slick-initialized').css("visibility", "visible");
});
$('#calendar-select').slick({
  dots: true,
  infinite: true,
  autoplay: true,
  autoplaySpeed: 7000,
  speed: 800,
  slidesToShow: 1,
  adaptiveHeight: true
});
#pg-preview-wrap {
  display: none;
}

#calendar-select {
  width: 50%;
  margin: 0 auto 70px auto;
  background: #CCC;
  visibility: hidden;
  height: auto;
}

.no-fouc {
  display: none;
}

.slick-initialized {
  visibility: visible;
}

.slick-slide img.checkmark-img {
  display: none;
  width: 40%;
  height: auto;
  z-index: 1;
  cursor: pointer;
}

.slick-slide img.pg-preview-img {
  display: block;
}

.calendar-option img {
  margin: 20px auto;
  cursor: pointer;
  width: 50%;
  height: auto;
  display: block;
}

.calendar-option-push {
  width: 0;
  height: 20px;
  border: none;
  margin: 20px auto;
}

.calendar-option cite {
  text-align: center;
  font-size: 1.25rem;
  margin: auto;
  color: #303030;
  font-family: 'Lato', sans-serif;
  display: block;
}

.slick-prev,
.slick-next {
  background-repeat: no-repeat;
  background-size: 120px 120px;
  height: 120px;
  width: 120px;
}

.slick-prev {
  left: -130px;
  background-image: url("images/arrow-back.png");
}

.slick-prev:hover,
.slick-prev:active,
.slick-prev:focus {
  background-image: url("images/arrow-back.png");
}

.slick-prev:hover,
.slick-prev:active,
.slick-prev:focus,
.slick-next:hover,
.slick-next:active,
.slick-next:focus {
  background-repeat: no-repeat;
  background-size: 120px 120px;
}

.slick-next {
  right: -130px;
  background-image: url("images/arrow-forward.png");
}

.slick-next:hover,
.slick-next:active,
.slick-next:focus {
  background-image: url("images/arrow-forward.png");
}

.slick-prev:before,
.slick-next:before {
  font-size: 0px;
}

.slick-dots {
  margin: 15px 0 20px 0;
}

.white-back {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  background: #FFF;
}
<link href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick-theme.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>
<button id="trigger">Trigger</button>
<div id="pg-preview-wrap">
  <div id="calendar-select">
    <div class="calendar-option">
      <div class="product-wrap">
        <label for="flag-option" class="package-check-toggle">
          <img src='http://s3.amazonaws.com/static.graphemica.com/glyphs/i500s/000/009/448/original/25AE-500x500.png?1275323708' alt='American Flag' class='pg-preview-img'>
          <p class="calendar-option-push"></p>
          <cite>A</cite>
        </label>
        <input type="checkbox" class="option-check" id='flag-option'>
      </div>
    </div>
    <div class="calendar-option">
      <div class="product-wrap">
        <label for="nickel-option" class="package-check-toggle">
          <img src='http://s3.amazonaws.com/static.graphemica.com/glyphs/i500s/000/009/448/original/25AE-500x500.png?1275323708' alt='Brushed Nickel & Black' class='pg-preview-img'>
          <p class="calendar-option-push"></p>
          <cite>B</cite>
        </label>
        <input type="checkbox" class="option-check" id='nickel-option'>
      </div>
    </div>
    <div class="calendar-option">
      <div class="product-wrap">
        <label for="gold-option" class="package-check-toggle">
          <img src='http://s3.amazonaws.com/static.graphemica.com/glyphs/i500s/000/009/448/original/25AE-500x500.png?1275323708' alt='Gold & Black' class='pg-preview-img'>
          <p class="calendar-option-push"></p>
          <cite>C</cite>
        </label>
        <input type="checkbox" class="option-check" id='gold-option'>
      </div>
    </div>
  </div>
</div>

2 个答案:

答案 0 :(得分：1)

可能不是您问题的直接解决方案，您可以在滑块可见后销毁并重新初始化。

＆＃13;
＆＃13; 
var options = {
  dots: true,
  infinite: true,
  autoplay: true,
  autoplaySpeed: 7000,
  speed: 800,
  slidesToShow: 1,
  adaptiveHeight: true
}
$('#trigger').on('click', function() {
	$('#pg-preview-wrap').show();
  $('#calendar-select').slick('unslick');
  $('#calendar-select').slick(options);
});
$('#calendar-select').on('init', function() {
  //$('#calendar-select').css("visibility", "visible");
  //$('.slick-initialized').css("visibility", "visible");
});
$('#calendar-select').slick(options);
＆＃13; 
#pg-preview-wrap {
  display: none;
}

#calendar-select {
  width: 50%;
  margin: 0 auto 70px auto;
  background: #CCC;
  height: auto;
}

.no-fouc {
  display: none;
}

.slick-initialized {
  visibility: visible;
}

.slick-slide img.checkmark-img {
  display: none;
  width: 40%;
  height: auto;
  z-index: 1;
  cursor: pointer;
}

.slick-slide img.pg-preview-img {
  display: block;
}

.calendar-option img {
  margin: 20px auto;
  cursor: pointer;
  width: 50%;
  height: auto;
  display: block;
}

.calendar-option-push {
  width: 0;
  height: 20px;
  border: none;
  margin: 20px auto;
}

.calendar-option cite {
  text-align: center;
  font-size: 1.25rem;
  margin: auto;
  color: #303030;
  font-family: 'Lato', sans-serif;
  display: block;
}

.slick-prev,
.slick-next {
  background-repeat: no-repeat;
  background-size: 120px 120px;
  height: 120px;
  width: 120px;
}

.slick-prev {
  left: -130px;
  background-image: url("images/arrow-back.png");
}

.slick-prev:hover,
.slick-prev:active,
.slick-prev:focus {
  background-image: url("images/arrow-back.png");
}

.slick-prev:hover,
.slick-prev:active,
.slick-prev:focus,
.slick-next:hover,
.slick-next:active,
.slick-next:focus {
  background-repeat: no-repeat;
  background-size: 120px 120px;
}

.slick-next {
  right: -130px;
  background-image: url("images/arrow-forward.png");
}

.slick-next:hover,
.slick-next:active,
.slick-next:focus {
  background-image: url("images/arrow-forward.png");
}

.slick-prev:before,
.slick-next:before {
  font-size: 0px;
}

.slick-dots {
  margin: 15px 0 20px 0;
}

.white-back {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  background: #FFF;
}
＆＃13; 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Slick JS</title>
</head>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick-theme.css">
<body>
<button id="trigger">Trigger</button>
<div id="pg-preview-wrap">
  <div id="calendar-select">
    <div class="calendar-option">
      <div class="product-wrap">
        <label for="flag-option" class="package-check-toggle">
          <img src='http://s3.amazonaws.com/static.graphemica.com/glyphs/i500s/000/009/448/original/25AE-500x500.png?1275323708' alt='American Flag' class='pg-preview-img'>
          <p class="calendar-option-push"></p>
          <cite>A</cite>
        </label>
        <input type="checkbox" class="option-check" id='flag-option'>
      </div>
    </div>
    <div class="calendar-option">
      <div class="product-wrap">
        <label for="nickel-option" class="package-check-toggle">
          <img src='http://s3.amazonaws.com/static.graphemica.com/glyphs/i500s/000/009/448/original/25AE-500x500.png?1275323708' alt='Brushed Nickel & Black' class='pg-preview-img'>
          <p class="calendar-option-push"></p>
          <cite>B</cite>
        </label>
        <input type="checkbox" class="option-check" id='nickel-option'>
      </div>
    </div>
    <div class="calendar-option">
      <div class="product-wrap">
        <label for="gold-option" class="package-check-toggle">
          <img src='http://s3.amazonaws.com/static.graphemica.com/glyphs/i500s/000/009/448/original/25AE-500x500.png?1275323708' alt='Gold & Black' class='pg-preview-img'>
          <p class="calendar-option-push"></p>
          <cite>C</cite>
        </label>
        <input type="checkbox" class="option-check" id='gold-option'>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>	
	
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

我无法找到任何reInit方法，否则可能会使用此方法。以下是上述代码的fiddle。

答案 1 :(得分：0)

您需要使用.slick（“ slickRemove”）删除要替换的所有幻灯片，然后使用.slick（“ slickAdd”）添加新幻灯片。下面是一些小例子，

` slickSlider: function () { 
        
    $('#claim_slider').slick({
        infinite: true,                  
        slidesToShow: 6,
        slidesToScroll: 1,
        arrows:true                    
       });             
     }
     
    $(document).ready(function(){
    
      $('.ticket-claims a').on('click', function() {       
        $('#claim_slider').slick("slickRemove");
        $('#claim_slider').slick("slickAdd");
      });
    });    
`
相关问题
最新问题