Roundabout Carousel

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 class="block left">
  <ul class="carousel text">
    <li>
      <h3>Что такое конфликт интересов? Возможные подходы к определению в нормативных правовых актах.</h3>
      <p>В Рабочих материалах рассматриваются основные подходы к определению понятия «конфликт интересов», применяемые в России и в зарубежных странах, проводится детальный анализ отдельных элементов определения, оказывающих наибольшее влияние на правоприменительную практику, предлагаются возможные направления совершенствования соответствующего российского законодательства.</p>
    </li>
    <li>
      <h3>Служебные разоблачения и защита заявителей: опыт США, Великобритании и Канады</h3>
      <p>В аналитическом докладе рассматриваются подходы к организации системы служебных разоблачений – механизмов, позволяющих государственным служащим и работникам сообщать о замеченных ими правонарушениях и обеспечивающих защиту заявителей – в США, Великобритании и Канаде. На основе изученного опыта зарубежных стран предлагаются рекомендации по разработке соответствующего законодательства. </p>
    </li>
  </ul>
</div><div class="block right">
  <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 class="arrow left" style="background-image: url(https://anticor.hse.ru/assets/calendar_left-646ef1c69cdcd833b924885b3a923cb6cab280d518dc932afae0f9389df4e0fc.png);"></div>
  <div class="arrow right" style="background-image: url(https://anticor.hse.ru/assets/calendar_right-06898161bb2a49d327ba2bb78da12da9df37a381872aa555f6d62d71e658603f.png);"></div>
</div>

CSS

div.block {
  display: inline-block;
  width: 50%;
  position: relative;
}
ul.carousel {
  list-style-type: none;
  height: 300px;
  position: relative;
}
ul.carousel li {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}
img.image {
  height: 300px;
}
div.arrow {
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  width: 20px;
  height: 20px;
  top: 50%;
  margin-top: -20px;
  cursor: pointer;
  z-index: 2;
}
div.arrow.right {
  right: 10px;
}
div.arrow.left {
  left: 10px;
}

JavaScript

$( function() {
	jQuery.extend(jQuery.roundaboutShapes, {
  	tearDrop2: function( r, a, t ) {
    	return {
				x: Math.sin( r + a ) - 0.5,
				y: -Math.sin( r/2 + t ),
				z: (Math.cos( r + a ) + 1 ) / 2,
				scale: ( Math.sin( r + Math.PI / 2 + a ) / 2 ) + 0.5
			};
		}
  } );
	$( "ul.carousel.text" ).roundabout( {
    minOpacity: 0.1,
    minScale: 0.1,
    responsive: true
	} );
	$( "ul.carousel.image" ).roundabout( {
    autoplay: true,
    autoplayDuration: 5000,
    autoplayPauseOnHover: true,
    minOpacity: 0.1,
    minScale: 0.1,
    responsive: true,
    btnNext: $("div.arrow.right"),
    btnPrev: $("div.arrow.left"),
    // shape: "lazySusan"
    // shape: "theJuggler"
    // shape: "figure8"
    // shape: "waterWheel"
    // shape: "square"
    // shape: "conveyorBeltLeft"
    // shape: "conveyorBeltRight"
    // shape: "goodbyeCruelWorld"
    // shape: "diagonalRingLeft"
    // shape: "diagonalRingRight"
    // shape: "rollerCoaster"
    // shape: "tearDrop" /* !!! */
    // shape: "tickingClock"
    // shape: "flurry"
    // shape: "nowSlide"
    // shape: "risingEssence"
    shape: "tearDrop2"
	} ).on( "animationStart", function() {
  	$( "ul.carousel.text" ).roundabout( "animateToNextChild" );
  } );
} );