JSFiddle - React, Tailwind, and code Playground

HTML

<section>

                <div>

                    <div class="slideShow">


                        <div class="slides clearfix">

                            <div class="slide align_left">
                                <img src="http://placehold.it/325x200/f2c1d0/000000/" />
                                <div class="slidetext align_left">
                                    <h4>Events</h4>
                                    <p>
                                        Besuchen Sie gemeinsam mit
                                    </p>
                                </div>
                            </div>

                            <div class="slide">
                                <img src="http://placehold.it/325x200/a2b1c0/000000/" />
                                <div class="slidetext align_left">
                                    <h4>Meetings</h4>
                                    <p>
                                        Profitieren Sie von Trainings
                                    </p>
                                </div>
                            </div>

                            <div class="slide">
                                <img src="http://placehold.it/325x200/f2c1d0/000000/" />
                                <div class="slidetext align_left">
                                    <h4>Online-Portal</h4>
                                    <p>
                                        Erhalten Sie mit
                                    </p>
                                </div>
                            </div>

                        </div><!-- / .slides -->


                    </div><!-- / .gallery -->


                    <div class="slideMenu">
                        <ul class="menuList">
                            <li class="menuItem"><a href="#">ONE</a></li>
                            <li class="menuItem"><a href="#">TWO</a></li>
                            <li class="menuItem"><a...

CSS

.slideShow {
  width: 325px;
  overflow: hidden;
 }

  .slideShow .slides {
    height: 290px;
    width: 325px;
    overflow: hidden; }
    .slideShow .slides .slide {
      float: left; }
      .slideShow .slides .slide .slidetext {
        font-size: 0.9em;
        margin: 0.625em 0 0; }
        .slideShow .slides .slide .slidetext p {
          margin: 0;
          pading: 0;
          width: 325px; }

/* thumbs */
.slideMenu {
  margin: 1.25em 0 0;
  width: 325px;
  float: right;
  text-align: center; }

.menuList li {
  display: inline-block;
  overflow: hidden; }
  .menuList li a {
    display: block;
    width: auto;
    height: 24px;
     }
  .menuList li.act a {
    background-position: -113px -54px;
    cursor: default; }

JavaScript

var totalWidth=0;
    var positions = new Array();

    $('.slides .slide').each(function(i){

        positions[i]= totalWidth;
        totalWidth += $(this).width();
    });

    $('.slides').width(totalWidth);

    $('.slideMenu ul li a').click(function(e){
        
        var pos = $(this).parent().prevAll('.menuItem').length;

        $('.slides').stop().animate({marginLeft:-positions[pos]+'px'},450);

        e.preventDefault();
    });