JSFiddle - React, Tailwind, and code Playground

HTML

<div id="block-views-youtube-videoer-block" class="block block-views last even">

              <h2 class="block-title">Frivilligrådets Videoer</h2>
        
  <div class="view view-youtube-videoer view-id-youtube_videoer view-display-id-block view-dom-id-10215a1e021d6bd2d9d7bbe822f4406c"><ul class="pg-dots-row"><li class="pg-dot"><a href="#" class="pg-link active" data-target="0"></a></li><li class="pg-dot"><a href="#" class="pg-link" data-target="1"></a></li><li class="pg-dot"><a href="#" class="pg-link" data-target="2"></a></li><li class="pg-dot"><a href="#" class="pg-link" data-target="3"></a></li></ul>
        
  
  
      <div class="view-content" style="left: 0px; ">
        <div>
      
  <div class="views-field views-field-field-video">        <div class="field-content"><a href="/frivilligraadet/video/parkeringsvagt" title="Parkeringsvagt" class="video-link"><span class="ytb-video"><img typeof="foaf:Image" src="http://schhh.dk/frivilligraadet/sites/default/files/styles/youtube-thumbnail/public/youtube/ndfbaFMLTdA.png" alt=""></span>
<span class="ytb-title">Parkeringsvagt</span>
<span class="ytb-play"></span></a></div>  </div>  </div>
  <div>
      
  <div class="views-field views-field-field-video">        <div class="field-content"><a href="/frivilligraadet/video/frivillig-fredag-obs-spot" title="Frivillig Fredag OBS Spot" class="video-link"><span class="ytb-video"><img typeof="foaf:Image" src="http://schhh.dk/frivilligraadet/sites/default/files/styles/youtube-thumbnail/public/youtube/441GOMzPn18.png" alt=""></span>
<span class="ytb-title">Frivillig Fredag OBS Spot</span>
<span class="ytb-play"></span></a></div>  </div>  </div>
  <div>
      
  <div class="views-field views-field-field-video">        <div class="field-content"><a href="/frivilligraadet/video/afslutningsevent-frivilligheds%C3%A5ret-og-frivilligr%C3%A5dets-%C3%A5rsm%C3%B8de" title="Afslutningsevent for Frivillighedsåret og Frivilligrådets Årsmøde" class="video-link"><span...

CSS

/*
 * Youtube view
 */
#block-views-youtube-videoer-block {
  float: left;
}
.view-youtube-videoer {
  position: relative;
  width: 690px;
  height: 185px;
  overflow: hidden;
}
.view-youtube-videoer .view-content {
  width: 99000px;
  height: 185px;
  position: absolute;
}
.view-youtube-videoer .views-field-field-video {
  float: left;
}
.view-youtube-videoer .views-field-field-video .video-link {
  position: relative;
  overflow: hidden;
  display: block;
  width: 230px;
  height: 185px;
}
.view-youtube-videoer .views-field-field-video .ytb-title {
  padding: 2px 8px 2px 2px;
  position: absolute;
  top: 122px;
  left: 0;
  color: #000;
  display: block;
  width: 220px;
}
.view-youtube-videoer .views-field-field-video .ytb-video {
  position: absolute;
  top: -23px;
  height: 146px;
  overflow: hidden;
}
.view-youtube-videoer .views-field-field-video .ytb-video img {
  height: 173px;
  width: 230px;
}
.view-youtube-videoer .views-field-field-video .ytb-play {
  position: absolute;
  display: block;
  width: 230px;
  height: 128px;
  background: transparent url('http://schhh.dk/frivilligraadet/sites/all/themes/frivilligraadet/images/play.png') no-repeat 50% 50%;
  opacity: 0.7;
  filter:alpha(opacity=70);
}
.view-youtube-videoer .views-field-field-video .ytb-play:hover {
  opacity: 1;
  filter:alpha(opacity=100);
}
.pg-dots-row {
  display:block;
  height:8px;
  margin:0;
  position: absolute;
  right: 0;
  bottom: 10px;
  z-index: 100;
}
.pg-dot {
  display:inline;
  padding:0 3px;
  vertical-align:top;
}
.pg-dot a {
  display:inline-block;
  height:8px;
  width:8px;
  background-color:#aaa;
  overflow:hidden;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  -o-border-radius:4px;
  border-radius:4px;
}
.pg-dot a.active {
  background-color:#383838;
}
.pg-dot a:hover {
  background-color:#383838;
}

JavaScript

var placeholder = '<div><div class="views-field views-field-field-video"><div class="field-content"><div class="video-link">' +
        '<span class="ytb-video"><img typeof="foaf:Image" src="http://placehold.it/230x173&text=Frivilligr%C3%A5det.dk"></span>' +
        '<span class="ytb-title"></span>'+
    '</div></div></div></div>';
    
    var wrapper = $('#block-views-youtube-videoer-block').find('.view-content');
    
    var count = wrapper.find('.video-link').length;
    var pages = Math.ceil(count / 3);
    
    var fill = pages*3 - count;
    for(i=0; i<fill; i++) {
        wrapper.append(placeholder);
    }
    
    var html = '<ul class="pg-dots-row">{dots}</ul>';
    var elements = '';
    for(i=0; i<pages; i++) {
        if(i==0) {
            var elements = elements + '<li class="pg-dot"><a href="#" class="pg-link active" data-target="' + i + '"></a></li>';
        } else {
            var elements = elements + '<li class="pg-dot"><a href="#" class="pg-link" data-target="' + i + '"></a></li>';
        }
    }
    html = html.replace('{dots}',elements);
    $('#block-views-youtube-videoer-block').find('.view-youtube-videoer').prepend(html);
    
    var current = 0; 
    var pause = false;
    $('.pg-link').bind('click',function(e){
        e.preventDefault();
        shift($(this).attr('data-target'));
        pause = true;
        setTimeout(function () { pause = false; }, 5000);
    });
    function shift(page) {
        if(page!=current) {
            wrapper.animate({
                left: (-690*page)
            });
            $('.pg-link[data-target="'+current+'"]').removeClass('active');
            $('.pg-link[data-target="'+page+'"]').addClass('active');            
            current = page;
        }
    }
    setInterval(function() {
        if(!pause) {
            var page = (current + 1) % pages;
            shift(page);
        }
    }, 5000);