Stacked cards

by ostapische

HTML

<script src="https://rawgit.com/fredleblanc/roundabout/master/jquery.roundabout.min.js"></script>
<script src="https://rawgit.com/fredleblanc/roundabout-shapes/master/jquery.roundabout-shapes.min.js"></script>
<div style="position: relative;">
<div class="side left">
  <ul class="carousel text">
    <li>
      <h3>Что такое конфликт интересов? Возможные подходы к определению в нормативных правовых актах.</h3>
      <p>В Рабочих материалах рассматриваются основные подходы к определению понятия «конфликт интересов», применяемые в России и в зарубежных странах, проводится детальный анализ отдельных элементов определения, оказывающих наибольшее влияние на правоприменительную практику, предлагаются возможные направления совершенствования соответствующего российского законодательства.</p>
    </li>
    <li>
      <h3>Служебные разоблачения и защита заявителей: опыт США, Великобритании и Канады</h3>
      <p>В аналитическом докладе рассматриваются подходы к организации системы служебных разоблачений – механизмов, позволяющих государственным служащим и работникам сообщать о замеченных ими правонарушениях и обеспечивающих защиту заявителей – в США, Великобритании и Канаде. На основе изученного опыта зарубежных стран предлагаются рекомендации по разработке соответствующего законодательства. </p>
    </li>
  </ul>
</div><div class="side right stacked-cards">
  <ul class="carousel image">
    <li>
      <img class="image" src="https://anticor.hse.ru/assets/working_materials/2_ru.jpg" />
    </li>
    <li>
      <img class="image" src="https://anticor.hse.ru/assets/working_materials/1_ru.jpg" />
    </li>
  </ul>
</div>
</div>

CSS

.stacked-cards {
  position: relative;
}

.stacked-cards ul {
  list-style-type: none;
  position: relative;
  max-width: 60%;
  margin: 0 auto;
  padding-left: 0;
}

.stacked-cards li {
  margin-top: 5px;
  cursor: pointer;
  border-radius: 8px;
  box-shadow: 0 3px 6px 0px #333;
  list-style: none;
  width: 65%;
  position: absolute;
  left: 50%;
  transition: 0.5s ease transform;
}

.stacked-cards li:after {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.stacked-cards li.active:after {
  display: none;
}

.stacked-cards li:not(.active) {
  opacity: 0.5;
}

.stacked-cards li img {
  position: relative;
  display: block;
  max-width: 100%;
  height: auto;
  z-index: 4;
}

.stacked-cards li.active {
  cursor: default;
  box-shadow: 0 5px 10px 0px #333;
  transition: 0.5s ease transform;
}

div.side {
  display: inline-block;
  width: 50%;
  position: relative;
  vertical-align: top;
}

div.side.right {
  width: calc(50% - 40px);
  padding: 0 20px;
}

ul.carousel.text {
  list-style-type: none;
  height: 300px;
  position: relative;
}

JavaScript

// https://github.com/fredleblanc/roundabout/
// https://github.com/junedchhipa/stacked-cards
(function(){bind=function(fn,me){return function(){return fn.apply(me,arguments)}};this.stackedCards=function(){stackedCards.prototype.defaults={layout:"slide",onClick:undefined,transformOrigin:"center"};function stackedCards(options){if(options==null){options={}}this.draw=bind(this.draw,this);this.config=this.extend(options,this.defaults)}stackedCards.prototype.init=function(){this.element=window.document.documentElement;if((ref=document.readyState)==="interactive"||ref==="complete"){this.draw()}else{document.addEventListener("DOMContentLoaded",this.draw)}};stackedCards.prototype.draw=function(){var me=this;var selector=this.config.selector;this.els=document.querySelectorAll(selector+" li");var els=this.els;this.parent=els[0].parentNode;var getItemHeight=els[0].getBoundingClientRect().height;els[0].parentNode.style.height=parseInt(getItemHeight)+"px";var lenAdjust=els.length%2==0?-2:-1;var oneHalf=(els.length+lenAdjust)/2;var activeTransform="translate("+-50+"%, 0%)  scale(1)";this.detectSwipe();Array.prototype.forEach.call(els,function(el){el.style.transformOrigin=me.config.transformOrigin;el.addEventListener("click",function(){var clickedEl=el;var nextCnt=0;var prevCnt=0;do{var next=clickedEl.nextElementSibling;nextCnt=nextCnt+1}while(clickedEl=clickedEl.nextElementSibling);clickedEl=el;do{var prev=clickedEl.previousElementSibling;prevCnt=prevCnt+1}while(clickedEl=clickedEl.previousElementSibling);me.reCalculateTransformsOnClick(nextCnt-1,prevCnt-1);me.loopNodeList(els,function(el){el.classList.remove("active")});el.classList.add("active");el.classList.add(me.config.layout);el.style.zIndex=els.length*5;el.style.transform=activeTransform;if(me.config.onClick!==undefined){me.config.onClick(el)}})});els[oneHalf].click()};stackedCards.prototype.reCalculateTransformsOnClick=function(nextCnt,prevCnt){var z=10;var els=this.nodelistToArray(this.els);
var...