JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<div id="wrapper1">
  <img src="index.files/bg_center1.jpg" alt="" />
  <div id="head">
    <div id="my_scroll">
      <div class="main">
        <div id="1" style="display:block;"><a href="#" class="big-link" data-reveal-id="myModal" data-animation="none"><img src="https://media.gettyimages.com/photos/jacqui-blake-and-carrie-askew-english-pop-band-shampoo-on-stage-at-picture-id467331125" alt="" /><span>
              <p>11111 обвалил акции «Яндекса»</p>Акции «Яндекса» в первые минуты торгов 19 февраля на бирже Nasdaq в США упали более чем на восемь процентов и торгуются в районе 23 долларов за одну ценную бумагу.
            </span></a></div>
        <div id="2"><a href="#" class="big-link" data-reveal-id="myModal" data-animation="none"><img src="https://nowthisiswhatiwouldcallmusic.files.wordpress.com/2018/09/99051735-1024x1024-e1538335284123.jpg" alt="" /><span>
              <p>2222 акции «Яндекса»</p>Акции «Яндекса» в первые минуты торгов 19 февраля на бирже Nasdaq в США упали более чем на восемь процентов и торгуются в районе 23 долларов за одну ценную бумагу.
            </span></a></div>
        <div id="3"><a href="#" class="big-link" data-reveal-id="myModal" data-animation="none"><img src="https://nowthisiswhatiwouldcallmusic.files.wordpress.com/2018/09/99051735-1024x1024-e1538335284123.jpg" alt="" /><span>
              <p>3333 обвалил акции «Яндекса»</p>Акции «Яндекса» в первые минуты торгов 19 февраля на бирже Nasdaq в США упали более чем на восемь процентов и торгуются в районе 23 долларов за одну ценную бумагу.
            </span></a></div>
        <div id="4"><a href="#" class="big-link" data-reveal-id="myModal" data-animation="none"><img src="https://nowthisiswhatiwouldcallmusic.files.wordpress.com/2018/09/99051735-1024x1024-e1538335284123.jpg" alt="" /><span>
              <p>4444 акции «Яндекса»</p>Акции «Яндекса» в первые минуты торгов 19 февраля на бирже Nasdaq в США упали более чем на восемь процентов и торгуются в районе 23 долларов за одну...

CSS

#wrapper1 #my_scroll {
  z-index: 5;
  height: 480px;
  width: 640px;
  position: absolute;
  top: -10px;
  left: 12px;
}

#wrapper1 #bloc_wrap {
  height: 480px;
  width: 640px;
  z-index: 7;
  overflow: hidden;
}

#wrapper1 #wrapper_sl {
  height: 480px;
}

#wrapper1 #wrapper_sl .block {
  width: 150px;
  background: blue;
  border: 2px solid #fff;
  position: absolute;
  margin: -40px 0 0 0;
  z-index: 1;
  height: 108px;
  overflow: hidden;
  transition: all 1.2s linear;
  -webkit-transition: all 1.2s linear;
  -moz-transition: all 1.2s linear;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  zoom: 1;
  border-radius: 15px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

#wrapper1 #wrapper_sl .block img {
  border: 0px solid #FFF;
  height: 108px;
  cursor: pointer;
  margin: 0 0 0 -16px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

#wrapper1 #my_scroll .main {
  position: relative;
}

#wrapper1 #my_scroll .main div {
  display: none;
  background: green;
  position: absolute;
  z-index: 5;
  top: 74px;
  left: 78px;
}

#wrapper1 #my_scroll .main div a {
  display: block;
  position: relative;
  width: 560px;
  height: 350px;
  border: solid 1px #000000;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  overflow: hidden;
  color: #ffffff;
  text-decoration: none;
}

#wrapper1 #my_scroll .main div a .shadow {
  position: absolute;
  top: 0;
  left: 0;
}

#wrapper1 #my_scroll .main div span {
  display: block;
  position: absolute;
  z-index: 7;
  bottom: 0;
  right: 0;
  padding: 10px 15px 13px 145px;
  width: 400px;
  text-align: right;
  background: url(../index.files/img_bg.png) repeat-x top;
  font-size: 13px;
  line-height: 16px;
}

#wrapper1 #my_scroll .main div span p {
  font-size: 18px;
  line-height: 24px;
  margin: 0;
  height: 24px;
  overflow: hidden;
}

#wrapper1 #my_scroll .main div a:hover span p {
 ...

JavaScript

var docheight = $("#my_scroll").outerHeight();
var docwidth = $(window).width();
// Slider "circular motion" Drew - magart.com.ua START
var myDiv = document.getElementById("bloc_wrap");
var ImgDiv = $("#wrapper_sl").find(".block");
var ImgLink = $("#wrapper_sl").find(".block a");
var $size_dug = 230; //radius
var $smes_x = 230;
var $smes_y = docheight - $size_dug - 17;
var $kolvo = 14; //kolichestvo blokov
var $skorost = 200; //cem bolshe tem medlennei (dilitel skorosti)
var $ugol = (2 * Math.PI / $kolvo);  // angle
var $start_pr = 0;
var $global_v = 0;

var main = $('#my_scroll').find('.main');

main.find("div")
	.find("a")
  .append('<img src="index.files/shadow.png" alt="" border="0" class="shadow" />');

$(ImgLink).click(function() {
  var ImgRel = $(this).attr('rel');
  main.find('div').fadeOut(100);
  $('#my_scroll .main ' + ImgRel).fadeIn(250);
});

function sec1() {
  $global_v = $global_v + 10;
  $nowz = (($global_v + $start_pr) / $skorost) + $ugol * 2;
  
  for (var ink = 0, len = $kolvo; ink < len; ink++) {
    uno1 = $(ImgDiv[ink]);
    $rad1 = ((ink + 1) * $ugol + $nowz);
    $deg1 = $rad1 * 360 / (2 * Math.PI) + 270;
    trata = Math.sin(-($rad1)) * $size_dug + $smes_x;
    if (trata > 260) {
      zind = 1;
    } else {
      zind = 10;
    }
    
    uno1.css({
      top: Math.cos($rad1) * $size_dug + $smes_y,
      left: trata,
      zIndex: zind,
      transform: 'skewX(-' + $deg1 + 'deg) rotateX(' + $deg1 + 'deg)',
      '-moz-transform': 'skewX(-' + $deg1 + 'deg) rotateX(' + $deg1 + 'deg)',
      '-webkit-transform': 'skewX(-' + $deg1 + 'deg) rotateX(' + $deg1 + 'deg)'
    });
  };

}

// Slider "circular motion" Drew - magart.com.ua END	

sec1();

var setintr1 = setInterval(sec1, 1100);

$(ImgDiv).mouseenter(function() {
    clearInterval(setintr1);
  })
  .mouseleave(function() {
    setintr1 = setInterval(sec1, 1100);
  });



// Slider "circular motion" Drew - magart.com.ua END