JSFiddle - React, Tailwind, and code Playground

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 
</head>

<body>
<div id="right-col"></div>
    
<div id="backbutton">&lt;</div>
    
<div id="slideshow">
    
    <ul class="themen">
        <li class="thema">VW - VR6-Motor</li>
        <li class="thema">VW - Scirocco</li>
        <li class="thema">VW - Golf VII</li>
    </ul>
    
    <ul class="slideshow">
        <li class="bilder">
            <ul>
                <li>
                    <a href="#nogo">
                        <img width="443" height="350" src="http://s4ty-testarea.s4.ohost.de/jQuery-board/images/001.jpg"/>
                    </a>
                </li>
            </ul>
        </li>                   
        <li class="bilder">
            <ul>
                <li>
                    <a href="#nogo">
                        <img width="443" height="350" src="http://s4ty-testarea.s4.ohost.de/jQuery-board/images/002.jpg"/>
                    </a>
                </li>
                <li>
                    <a href="#nogo">
                        <img width="443" height="350" src="http://s4ty-testarea.s4.ohost.de/jQuery-board/images/003.jpg"/>
                    </a>
                </li>
                <li>
                    <a href="#nogo">
                        <img width="443" height="350" src="http://s4ty-testarea.s4.ohost.de/jQuery-board/images/004.jpg"/>
                    </a>
                </li>                
            </ul>
        </li>
        
        <li class="bilder">
            <ul>
                <li>
                    <a href="#nogo">
                        <img width="443" height="350" src="http://img1.auto-motor-und-sport.de/VW-Golf-VII--19-fotoshowImageNew-4b921cfc-625710.jpg"/>
       ...

CSS

#slideshow {
    border: 1px solid #999;
    margin: 1.5em 0;
    height:350px;
    width:443px;
    overflow: hidden;
    position: relative;
}
#slideshow .bilder, #slideshow .bilder li  { 
    opacity: 0;
    position: absolute;
}
#slideshow li.current  { opacity: 1 }

#slideshow .thema { display: none; }

#backbutton:hover, #forbutton:hover { cursor: pointer; }

JavaScript

(function( $ ){

    $.fn.slideshow = function( options ) {
    
        var prefs = $.extend( {
            aniSpeed: 1000
        }, options);
        
        var slideshow = $('#slideshow'),
            images = slideshow.find('.bilder'),
            themes = slideshow.find('.themen'),
            btnNext = $('#forbutton'),
            btnPrev = $('#backbutton'),
            nextImage = [],
            prevImage = [],
            currentImage = [];
        
        images
            .first()
            .animate({opacity: 1}, prefs.aniSpeed)
            .addClass('active')
            .find('li:first')
            .addClass('current');
        
        themes
            .find('.thema:first')
            .show()
            .addClass('active');
    
        
        currentImage = $('#slideshow').find('.current'); 
        
        btnNext.click(function () {
            var imagesIndex = slideshow.find('.slideshow .active li').index();
            if(currentImage.index() >= imagesIndex-1) {
        
                var n =  slideshow.find('li.active').next().length;

                if(n != 0) {
                    slideshow 
                        .find('li.active')
                        .removeClass('active')
                        .next()
                        .addClass('active')
                        .animate({opacity: 1}, prefs.aniSpeed)
                        .find('li:first')
                        .addClass('current')
                        .animate({opacity: 1}, prefs.aniSpeed);  
                    
                    refreshCurrentImage();
                    
                }
                
            } else { 
                
                nextImage = currentImage
                    .animate({opacity: 0}, prefs.aniSpeed)
                    .removeClass('current')
                    .next();
                
                nextImage
                    .animate({opacity: 1}, prefs.aniSpeed)
                   ...