Question

之前创造了二十二个。但我想在jquery滑块内部之前想要这个。这样我就可以在

之前查看之前的群组图像了

＆＃13;

$(window).load(function() {
  $("#container1").twentytwenty();
});

＆＃13;

<link href="http://www.jqueryscript.net/demo/Stylish-jQuery-Images-Comparison-Plugin-twentytwenty/css/twentytwenty.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script src="http://www.jqueryscript.net/demo/Stylish-jQuery-Images-Comparison-Plugin-twentytwenty/js/jquery.twentytwenty.js"></script>
<script src="http://stephband.info/jquery.event.move/js/jquery.event.move.js"></script>

<div id="container1">
  <img src="http://zurb.com/playground/uploads/upload/upload/29/sample-before.png">
  <img src="http://zurb.com/playground/uploads/upload/upload/28/sample-after.png">
</div>

＆＃13;

请帮我创建。

Answer 1

这实际上很直接。我为你准备了一个工作实例，享受：

$(document).ready(function() {
  //initialize swiper when document ready  
  var mySwiper = new Swiper('.swiper-container', {
    loop: true,
    pagination: '.swiper-pagination',
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    onInit: function() {
      $(".swiper-slide-active .container").twentytwenty();
    },
    onSlideChangeStart: function() {
      $('.swiper-slide-active .container').twentytwenty();
    },
    onlyExternal: true
  })
});

<link href="http://www.jqueryscript.net/demo/Stylish-jQuery-Images-Comparison-Plugin-twentytwenty/css/twentytwenty.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.7/css/swiper.min.css">

  <div class="swiper-container">

    <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide">
        <div class="container">
          <img src="http://zurb.com/playground/uploads/upload/upload/29/sample-before.png">
          <img src="http://zurb.com/playground/uploads/upload/upload/28/sample-after.png">
        </div>
      </div>
      <div class="swiper-slide">
        <div class="container">
          <img src="http://www.catchmyfame.com/jquery/conan_bef_sm.jpg">
          <img src="http://www.catchmyfame.com/jquery/conan_aft_sm.jpg">
        </div>
      </div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.7/js/swiper.jquery.min.js"></script>

  <script src="http://www.jqueryscript.net/demo/Stylish-jQuery-Images-Comparison-Plugin-twentytwenty/js/jquery.twentytwenty.js"></script>
  <script src="http://stephband.info/jquery.event.move/js/jquery.event.move.js"></script>

Answer 2

使用Swiper Slider，我尝试使用herrbischoff的方法，但是由于一些过时的Swiper数据，我认为此方法不成功。我的解决方案如下，并注意一些更改：

touchRatio: 0用于关闭拖动，以便他们可以实际使用二十二十个滑块。
navigation，pagination需要用作对象
on: { ... }后跟事件名称的子对象是访问事件的新方法。
onSlideChangeStart在新的API数据中不存在，slideChangeTransitionStart确实存在，因此我相信它已被重命名。

（这只是脚本解决方案，您必须添加适当的html并插入js和css才能使其正常运行）

<script>
    jQuery(document).ready(function () {
    //initialize swiper when document ready  
    var mySwiper = new Swiper('.swiper-container', {
        touchRatio: 0,

        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
        },

        on: {
            init: function () {
                jQuery(".swiper-slide-active .swiper-container").twentytwenty();
            },
            slideChangeTransitionStart: function () {
                jQuery('.swiper-slide-active .swiper-container').twentytwenty();
            },
        },
    });
});
</script>

Jquery二十二个插件与滑块

2 个答案: