Ищу плагин До/После

[Alexbelkevich]

Здравствуйте! В сети много плагинов, которые работают в принципу, как этот слайдер.

Но вот вопрос:
Может кто-нибудь встречал, чтобы в этот слайдер можно было вставить не картинку, а div с определенными контентом, плюс чтобы он был вертикальным? По ссылке выше плагин имеет возможность вертикального слайдера, но там нельзя вставить div.

Прошу о помощи
Спасибо!

[Rise]

но там нельзя вставить div.

- <div class="img">...</div>
- twentytwenty.css: .twentytwenty-container img на .twentytwenty-container .img плюс width, height, background
- twentytwenty.js: "img:first", "img:last", "img" на ".img:first", ".img:last", ".img"

[Alexbelkevich]

Rise,
Там беда в том получается еще, что если в диве что-то размещаешь, то потом выделить ничего нельзя. Блок сверху видно как-то все перекрывает Блоки кликабельны внутри быть должны..

[рони]

Alexbelkevich,
а убрать то что мешает в плагине кликам?

[Rise]

Alexbelkevich, кликабельны или выделяемы?

[рони]

(function($){

  $.fn.twentytwenty = function(options) {
    var options = $.extend({default_offset_pct: 0.5, orientation: 'horizontal'}, options);
    return this.each(function() {

      var sliderPct = options.default_offset_pct;
      var container = $(this);
      var sliderOrientation = options.orientation;
      var beforeDirection = (sliderOrientation === 'vertical') ? 'down' : 'left';
      var afterDirection = (sliderOrientation === 'vertical') ? 'up' : 'right';
      
      
      container.wrap("<div class='twentytwenty-wrapper twentytwenty-" + sliderOrientation + "'></div>");
      //container.append("<div class='twentytwenty-overlay'></div>");
      var beforeImg = container.find(".img:first");
      var afterImg = container.find(".img:last");
      container.append("<div class='twentytwenty-handle'></div>");
      var slider = container.find(".twentytwenty-handle");
      slider.append("<span class='twentytwenty-" + beforeDirection + "-arrow'></span>");
      slider.append("<span class='twentytwenty-" + afterDirection + "-arrow'></span>");
      container.addClass("twentytwenty-container");
      beforeImg.addClass("twentytwenty-before");
      afterImg.addClass("twentytwenty-after");
      
      var overlay = container.find(".twentytwenty-overlay");
      //overlay.append("<div class='twentytwenty-before-label'></div>");
      //overlay.append("<div class='twentytwenty-after-label'></div>");

      var calcOffset = function(dimensionPct) {
        var w = beforeImg.width();
        var h = beforeImg.height();
        return {
          w: w+"px",
          h: h+"px",
          cw: (dimensionPct*w)+"px",
          ch: (dimensionPct*h)+"px"
        };
      };

      var adjustContainer = function(offset) {
      	if (sliderOrientation === 'vertical') {
      	  beforeImg.css("clip", "rect(0,"+offset.w+","+offset.ch+",0)");
      	}
      	else {
          beforeImg.css("clip", "rect(0,"+offset.cw+","+offset.h+",0)");
    	}
        container.css("height", offset.h);
      };

      var adjustSlider = function(pct) {
        var offset = calcOffset(pct);
        slider.css((sliderOrientation==="vertical") ? "top" : "left", (sliderOrientation==="vertical") ? offset.ch : offset.cw);
        adjustContainer(offset);
      }

      $(window).on("resize.twentytwenty", function(e) {
        adjustSlider(sliderPct);
      });

      var offsetX = 0;
      var offsetY = 0;
      var imgWidth = 0;
      var imgHeight = 0;
      
      slider.on("movestart", function(e) {
        if (((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) && sliderOrientation !== 'vertical') {
          e.preventDefault();
        }
        else if (((e.distX < e.distY && e.distX < -e.distY) || (e.distX > e.distY && e.distX > -e.distY)) && sliderOrientation === 'vertical') {
          e.preventDefault();
        }
        container.addClass("active");
        offsetX = container.offset().left;
        offsetY = container.offset().top;
        imgWidth = beforeImg.width(); 
        imgHeight = beforeImg.height();          
      });

      slider.on("moveend", function(e) {
        container.removeClass("active");
      });

      slider.on("move", function(e) {
        if (container.hasClass("active")) {
          sliderPct = (sliderOrientation === 'vertical') ? (e.pageY-offsetY)/imgHeight : (e.pageX-offsetX)/imgWidth;
          if (sliderPct < 0) {
            sliderPct = 0;
          }
          if (sliderPct > 1) {
            sliderPct = 1;
          }
          adjustSlider(sliderPct);
        }
      });

      container.find(".img").on("mousedown", function(event) {
        //event.preventDefault();
      });

      $(window).trigger("resize.twentytwenty");
    });
  };

})(jQuery);

[Rise]

Alexbelkevich,
- twentytwenty.css:
.twentytwenty-container -webkit-user-select: none; -moz-user-select: none;
.twentytwenty-overlay pointer-events: none;
- twentytwenty.js: // event.preventDefault();

рони, там еще user-select

[рони]

Rise,
ок! ... где-то на форуме были решения на данную тему

[рони]

нажать на белую полосу и переместить вверх/вниз

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
  <style type='text/css'>
body{
  background-color: #A9A9A9;
}
.container {
    width: 500px;
    height: 300px;
     margin: 80px auto;
     position: relative;
      text-align: center;
}
.container a{
  color: #FFFFFF;
}

.container > .top {
    height: 100%; width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: auto;
    background: blue;
}
.container > .bottom {
    height: 100%;  width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: auto;
    background: red;
}
.container > .bar {
    height: 3px;
    position: absolute;
    top: 0px;
    right: 0;
    left: 0;
    background: #FFFFFF;
    cursor: move;
}
  </style>



<script>
window.addEventListener("DOMContentLoaded", function() {
    [].forEach.call(document.querySelectorAll(".container"), function(b) {
        var k = b.querySelector(".bottom"),
            c = b.querySelector(".bar"),
            d, e = b.clientHeight,
            l = b.clientWidth,
            g = function(a) {
                a = a.clientY - d;
                a = Math.min(e, Math.max(0, a));
                f(a)
            },
            f = function(a) {
                k.style.clip = "rect(0," + l + "px," + a + "px,0)";
                c.style.top = a + "px"
            };
        f(e / 2);
        var h = function(a) {
            window.removeEventListener("mousemove", g, !0);
            window.removeEventListener("mouseup", h, !0)
        };
        c.addEventListener("mousedown", function(a) {
            d = a.clientY - c.offsetTop;
            window.addEventListener("mousemove", g, !0);
            window.addEventListener("mouseup", h, !0)
        }, !0)
    })
});
</script>


</head>
<body>
  <div class="container">
    <div class="top"><h2><a href="http://javascript.ru/forum/" title="http://javascript.ru/forum/">forum</a></h2></div>
    <div class="bottom"><h2><a href="http://www.yandex.ru/" title="http://www.yandex.ru/">yandex</a></h2></div>
    <div class="bar"></div>
</div>
  <div class="container">
    <div class="top"><h2><a href="http://javascript.ru/forum/" title="http://javascript.ru/forum/">forum</a></h2></div>
    <div class="bottom"><h2><a href="http://www.yandex.ru/" title="http://www.yandex.ru/">yandex</a></h2></div>
    <div class="bar"></div>
</div>
</body>


</html>

[Alexbelkevich]

Спасибо Вам большое!!!