jquery - 如何修复 Slider Pro 错误？

Question

请帮我修复 slider (或剧透)中的错误..

一般来说， slider 本身工作正常，但是当我将它隐藏在剧透中时 - 当它被部署时，它是倾斜的，但浏览器窗口值得稍微调整大小 - slider 对齐 - 可能是什么问题？ (

也许问题不在 slider ，而在扰流板？

$(document).ready(function($) {
  $('#example3').sliderPro({
    width: 960,
    height: 500,
    fade: true,
    arrows: true,
    buttons: false,
    fullScreen: true,
    shuffle: true,
    smallSize: 500,
    mediumSize: 1000,
    largeSize: 3000,
    thumbnailArrows: true,
    autoplay: false
  });
});





jQuery('.spoiler > .head').on('click', function(e) {
  jQuery(this).parent('div.spoiler').children('.cont').stop().slideToggle(300).toggleClass('active');
  jQuery(this).toggleClass('active');
  e.preventDefault();
});

* {
  padding: 0;
  margin: 0;
}

body {
  font-family: Arial;
  padding: 20px;
}

.spoiler {
  position: relative;
  margin: 20px 0;
}

.spoiler>.head {
  padding: 14px 20px;
  position: relative;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  color: #000;
  background: #dcf3f8;
}

.spoiler>.cont {
  display: none;
  border-top: 1px solid #fff;
  padding: 14px 20px;
  width: 100%;
}

.spoiler>.head:before {
  content: "\f054";
  font-family: FontAwesome;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  color: #1db4c1;
  right: 20px;
  transition: 0.3s all;
}

.spoiler>.head.active:before {
  transform: translateY(-50%) rotate(-90deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://bqworks.com/slider-pro/js/jquery.sliderPro.min.js"></script>
<link href="https://bqworks.com/slider-pro/css/examples.css" rel="stylesheet" />
<link href="https://bqworks.com/slider-pro/css/slider-pro.min.css" rel="stylesheet" />
<div class="spoiler">
  <div class="head">
    Open / Close spoiler
  </div>
  <div class="cont">






    <div id="example3" class="slider-pro">
      <div class="sp-slides">
        <div class="sp-slide">
          <img class="sp-image" src="https://upload.wikimedia.org/wikipedia/commons/c/c0/Blank.gif" data-src="http://bqworks.com/slider-pro/images/image1_medium.jpg" data-small="http://bqworks.com/slider-pro/images/image1_small.jpg" data-medium="http://bqworks.com/slider-pro/images/image1_medium.jpg"
            data-large="http://bqworks.com/slider-pro/images/image1_large.jpg" data-retina="http://bqworks.com/slider-pro/images/image1_large.jpg" />

          <p class="sp-layer sp-white sp-padding" data-horizontal="50" data-vertical="50" data-show-transition="left" data-show-delay="400">
            Lorem ipsum
          </p>

          <p class="sp-layer sp-black sp-padding" data-horizontal="180" data-vertical="50" data-show-transition="left" data-show-delay="600">
            dolor sit amet
          </p>

          <p class="sp-layer sp-white sp-padding" data-horizontal="315" data-vertical="50" data-show-transition="left" data-show-delay="800">
            consectetur adipisicing elit.
          </p>
        </div>

        <div class="sp-slide">
          <img class="sp-image" src="https://upload.wikimedia.org/wikipedia/commons/c/c0/Blank.gif" data-src="http://bqworks.com/slider-pro/images/image2_medium.jpg" data-small="http://bqworks.com/slider-pro/images/image2_small.jpg" data-medium="http://bqworks.com/slider-pro/images/image2_medium.jpg"
            data-large="http://bqworks.com/slider-pro/images/image2_large.jpg" data-retina="http://bqworks.com/slider-pro/images/image2_large.jpg" />

          <h3 class="sp-layer sp-black sp-padding" data-horizontal="40" data-vertical="40" data-show-transition="left">
            Lorem ipsum dolor sit amet
          </h3>

          <p class="sp-layer sp-white sp-padding" data-horizontal="40" data-vertical="100" data-show-transition="left" data-show-delay="200">
            consectetur adipisicing elit
          </p>

          <p class="sp-layer sp-black sp-padding" data-horizontal="40" data-vertical="160" data-width="350" data-show-transition="left" data-show-delay="400">
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </p>
        </div>

        <div class="sp-slide">
          <img class="sp-image" src="https://upload.wikimedia.org/wikipedia/commons/c/c0/Blank.gif" data-src="http://bqworks.com/slider-pro/images/image3_medium.jpg" data-small="http://bqworks.com/slider-pro/images/image3_small.jpg" data-medium="http://bqworks.com/slider-pro/images/image3_medium.jpg"
            data-large="http://bqworks.com/slider-pro/images/image3_large.jpg" data-retina="http://bqworks.com/slider-pro/images/image3_large.jpg" />

          <p class="sp-layer sp-white sp-padding" data-position="centerCenter" data-vertical="-50" data-show-transition="right" data-show-delay="500">
            Lorem ipsum dolor sit amet
          </p>

          <p class="sp-layer sp-black sp-padding" data-position="centerCenter" data-vertical="50" data-show-transition="left" data-show-delay="700">
            consectetur adipisicing elit
          </p>
        </div>

        <div class="sp-slide">
          <img class="sp-image" src="https://upload.wikimedia.org/wikipedia/commons/c/c0/Blank.gif" data-src="http://bqworks.com/slider-pro/images/image4_medium.jpg" data-small="http://bqworks.com/slider-pro/images/image4_small.jpg" data-medium="http://bqworks.com/slider-pro/images/image4_medium.jpg"
            data-large="http://bqworks.com/slider-pro/images/image4_large.jpg" data-retina="http://bqworks.com/slider-pro/images/image4_large.jpg" />

          <p class="sp-layer sp-black sp-padding" data-position="bottomLeft" data-vertical="0" data-width="100%" data-show-transition="up">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </p>
        </div>

        <div class="sp-slide">
          <img class="sp-image" src="https://upload.wikimedia.org/wikipedia/commons/c/c0/Blank.gif" data-src="http://bqworks.com/slider-pro/images/image5_medium.jpg" data-small="http://bqworks.com/slider-pro/images/image5_small.jpg" data-medium="http://bqworks.com/slider-pro/images/image5_medium.jpg"
            data-large="http://bqworks.com/slider-pro/images/image5_large.jpg" data-retina="http://bqworks.com/slider-pro/images/image5_large.jpg" />

          <p class="sp-layer sp-white sp-padding" data-vertical="5%" data-horizontal="5%" data-width="90%" data-show-transition="down" data-show-delay="400">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </p>
        </div>

        <div class="sp-slide">
          <img class="sp-image" src="https://upload.wikimedia.org/wikipedia/commons/c/c0/Blank.gif" data-src="http://bqworks.com/slider-pro/images/image6_medium.jpg" data-small="http://bqworks.com/slider-pro/images/image6_small.jpg" data-medium="http://bqworks.com/slider-pro/images/image6_medium.jpg"
            data-large="http://bqworks.com/slider-pro/images/image6_large.jpg" data-retina="http://bqworks.com/slider-pro/images/image6_large.jpg" />

          <p class="sp-layer sp-white sp-padding" data-horizontal="10" data-vertical="10" data-width="300">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </p>
        </div>

        <div class="sp-slide">
          <img class="sp-image" src="https://upload.wikimedia.org/wikipedia/commons/c/c0/Blank.gif" data-src="http://bqworks.com/slider-pro/images/image7_medium.jpg" data-small="http://bqworks.com/slider-pro/images/image7_small.jpg" data-medium="http://bqworks.com/slider-pro/images/image7_medium.jpg"
            data-large="http://bqworks.com/slider-pro/images/image7_large.jpg" data-retina="http://bqworks.com/slider-pro/images/image7_large.jpg" />

          <p class="sp-layer sp-black sp-padding" data-position="bottomLeft" data-horizontal="5%" data-vertical="5%" data-width="90%" data-show-transition="up" data-show-delay="400">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </p>
        </div>

        <div class="sp-slide">
          <img class="sp-image" src="https://upload.wikimedia.org/wikipedia/commons/c/c0/Blank.gif" data-src="http://bqworks.com/slider-pro/images/image8_medium.jpg" data-small="http://bqworks.com/slider-pro/images/image8_small.jpg" data-medium="http://bqworks.com/slider-pro/images/image8_medium.jpg"
            data-large="http://bqworks.com/slider-pro/images/image8_large.jpg" data-retina="http://bqworks.com/slider-pro/images/image8_large.jpg" />
        </div>

        <div class="sp-slide">
          <img class="sp-image" src="https://upload.wikimedia.org/wikipedia/commons/c/c0/Blank.gif" data-src="http://bqworks.com/slider-pro/images/image9_medium.jpg" data-small="http://bqworks.com/slider-pro/images/image9_small.jpg" data-medium="http://bqworks.com/slider-pro/images/image9_medium.jpg"
            data-large="http://bqworks.com/slider-pro/images/image9_large.jpg" data-retina="http://bqworks.com/slider-pro/images/image9_large.jpg" />

          <p class="sp-layer sp-black sp-padding" data-horizontal="50" data-vertical="50" data-show-transition="down" data-show-delay="500">
            Lorem ipsum dolor sit amet
          </p>

          <p class="sp-layer sp-white sp-padding" data-horizontal="50" data-vertical="100" data-show-transition="up" data-show-delay="500">
            consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>
        </div>

        <div class="sp-slide">
          <img class="sp-image" src="https://upload.wikimedia.org/wikipedia/commons/c/c0/Blank.gif" data-src="http://bqworks.com/slider-pro/images/image10_medium.jpg" data-small="http://bqworks.com/slider-pro/images/image10_small.jpg" data-medium="http://bqworks.com/slider-pro/images/image10_medium.jpg"
            data-large="http://bqworks.com/slider-pro/images/image10_large.jpg" data-retina="http://bqworks.com/slider-pro/images/image10_large.jpg" />
        </div>
      </div>

      <div class="sp-thumbnails">
        <img class="sp-thumbnail" src="http://bqworks.com/slider-pro/images/image1_thumbnail.jpg" />
        <img class="sp-thumbnail" src="http://bqworks.com/slider-pro/images/image2_thumbnail.jpg" />
        <img class="sp-thumbnail" src="http://bqworks.com/slider-pro/images/image3_thumbnail.jpg" />
        <img class="sp-thumbnail" src="http://bqworks.com/slider-pro/images/image4_thumbnail.jpg" />
        <img class="sp-thumbnail" src="http://bqworks.com/slider-pro/images/image5_thumbnail.jpg" />
        <img class="sp-thumbnail" src="http://bqworks.com/slider-pro/images/image6_thumbnail.jpg" />
        <img class="sp-thumbnail" src="http://bqworks.com/slider-pro/images/image7_thumbnail.jpg" />
        <img class="sp-thumbnail" src="http://bqworks.com/slider-pro/images/image8_thumbnail.jpg" />
        <img class="sp-thumbnail" src="http://bqworks.com/slider-pro/images/image9_thumbnail.jpg" />
        <img class="sp-thumbnail" src="http://bqworks.com/slider-pro/images/image10_thumbnail.jpg" />
      </div>
    </div>








  </div>
</div>

Answer 1

$( '#example3' ).sliderPro( 'update' );

它解决了我的问题...更准确地说，方法如下

jQuery('.spoiler > .head').on('click', function(e){
  jQuery(this).parent('div.spoiler').children('.cont').stop().slideToggle(300).toggleClass('active');
  jQuery(this).toggleClass('active');
  $( '#example3' ).sliderPro( 'update' );
  e.preventDefault();
});