JSFiddle - React, Tailwind, and code Playground

by vlit

HTML

<link rel="stylesheet" href="https://test.vl-it.ru/media/twentytwenty/css/twentytwenty.css">
<script src="https://test.vl-it.ru/media/twentytwenty/js/jquery.event.move.js"></script>
<script src="https://test.vl-it.ru/media/twentytwenty/js/jquery.twentytwenty.js"></script>
  
  <div class="prfota wr prfot">
    <div class="twentytwenty-container">
      <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
      <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
    </div>
    <div class="twentytwenty-container">
      <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
      <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
    </div>
        <div class="twentytwenty-container">
      <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
      <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
    </div>
        <div class="twentytwenty-container">
      <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
      <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
    </div>
        <div class="twentytwenty-container">
      <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
      <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
    </div>
        <div class="twentytwenty-container">
      <img src="https://wallbox.ru/resize/1600x900/wallpapers/main2/201718/gory-skaly-more-vodopad-poselok.jpg" />
      <img src="https://www.bwallpaperhd.com/wp-content/uploads/2020/07/KallurLighthouse-1600x900.jpg" />
    </div>
        <div...

CSS

.prfota {
  margin: 50px 0 -40px -40px;
}
.prfot > div {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 calc(33.333333% - 40px);
  flex: 0 0 calc(33.333333% - 40px);
  margin: 0 0 40px 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.wr {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.prfota {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

JavaScript

//подгрузить еще по кнопке, если все элемнты подгружены, скрывает кнопку
$(document).ready(function() {
  var list = $(".prfot .twentytwenty-container");
  var numToShow = 6; //сколько показывать элементов
  var button = $("button");
  var numInList = list.length;
  list.hide();
  if (numInList > numToShow) {
    button.show();
  }
  list.slice(0, numToShow).show();
  button.click(function() {
    var showing = list.filter(':visible').length;
    list.slice(showing - 1, showing + numToShow).fadeIn();
    var nowShowing = list.filter(':visible').length;
    if (nowShowing >= numInList) {
      button.hide();
    }
    initTwenty();
  });
});


  $(window).on('load', function() {
   	initTwenty();
  });
  
  // Фото, до и после
  function initTwenty()
  {
     $(".twentytwenty-container").twentytwenty({
      no_overlay: false, // Не показывать наложение было, стало, true скрыть
      move_slider_on_hover: false, // Перемещать ползунок при наведении курсора мыши
      move_with_handle_only: true, // Разрешить пользователю проводить пальцем в любом месте изображения для управления движением ползунка.
      before_label: 'До',
      after_label: 'После'
    });
  }