带有滑块的Jquery 20 20插件

Question

在之前和之后创建了一个20个20。但我想在jquery滑块中完成之前。这样我就可以查看之前和之后的组图了

​

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

<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>

​

请帮我创建这个。

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用于关闭拖动，以便它们可以实际使用需要用作slider.
• navigation，的objects
• on: { ... }后跟子对象的events.
• onSlideChangeStart事件名称是访问pagination的新方式在新的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>