带有滑块的 Jquery 二十二十插件

Question

Created a twenty twenty before after. but I want this before after inside the jquery slider. So that i can view group images of before after

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

Please help me to create this.

Answer 1

This is actually quite straight forward. I have put together a working example for you, enjoy:

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

Using Swiper Slider I tried to use herrbischoff's method, but was unsuccessful I think due to some outdated swiper data. My solution is below and notice a few changes:

• touchRatio: 0 is used to turn off dragging so they can actually use the twentytwenty slider.
• navigation , pagination need to be used as objects
• on: { ... } followed by subobjects of the event name is the new way to access events.
• onSlideChangeStart doesn't exist in the new API data, slideChangeTransitionStart does so I believe it was renamed.

(This is only the script solution, you must add the appropriate html and pull in and js and css to get this to function properly)

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