JSFiddle - React, Tailwind, and code Playground

by Fiddel

HTML

<script src="http://dotdotdot.frebsite.nl/js/jquery.dotdotdot-1.2.1.js"></script>
<div class="brick" style="word-wrap: break-word;"><div style="background-image:url(images/assets/280/dummy_280x360_03.jpg);"></div><p>Optimale Bildabmessungen: 280×172. Zum Testen von Zeilenhöhen und Umbrüchen ist dieser Text ein wenig länger. Zum Testen von Zeilenhöhen und Umbrüchen ist dieser Text ein wenig länger. Zum Testen von Zeilenhöhen und Umbrüchen ist dieser Text ein wenig länger. Zum Testen von Zeilenhöhen und Umbrüchen ist dieser Text ein wenig länger. Zum Testen von Zeilenhöhen und Umbrüchen ist dieser Text ein wenig länger. Zum Testen von Zeilenhöhen und Umbrüchen ist dieser Text e [...]</p></div>

CSS

div {
    width: 300px;
    height: 220px;
    padding-bottom: 20px;
    border: 1px solid #ccc;
      box-sizing: border-box;
}

div>div[style*='background-image'] {
    width:20px; 
    height:70px; 
    background-color:red}

JavaScript

// OGE 2015
// Haupt-JS

(function ($) {
	$(document).ready(function () {

		var bodyHeight = $("body").height();

		// ----------------------------------------------------------------------
		// Teaser mit Swiper (start)
		// Definition Teaser (start)
		var ulLength;
		var aktuellePos = 0;
		var aktuellePosNext = 0;
		var MenueNext; // Weil Punkte-Menü andere Zählung hat, beginnend mit 1
		var blMausKlick = false;
		var $ItemsInterval = null;

		TeaserToggeln(0, 1, false); // Lade erstes Bild und erstes Menü
		// Definition Teaser (end)

		// Klick auf das Bild 
		jQuery("#items").click(function (event) {

			aktuellePos = $("ul#toggle > li.selected").index();
			ulLength = $("ul#toggle").children().length;

			if (event.pageX > jQuery(this).offset().left + ($(this).width() / 2)) {
				aktuellePosNext = aktuellePos + 1;
				MenueNext = aktuellePosNext + 1;
				if (aktuellePosNext == ulLength) {
					aktuellePosNext = 0;
					MenueNext = 1;
				}

			} else if (event.pageX > jQuery(this).offset().left) {
				aktuellePosNext = aktuellePos - 1;
				MenueNext = aktuellePos;

				if (aktuellePosNext < 0) {
					aktuellePosNext = ulLength - 1
					MenueNext = ulLength;
				}
			}
			TeaserToggeln(aktuellePosNext, MenueNext, true);
			TeaserHeaderSpan();
		});

		// Klick auf die Quadrate
		$("ul#toggle li").click(function (e) {
			if ($ItemsInterval) {
				clearInterval($ItemsInterval);
			}
			aktuellePosNext = $(this).index();
			MenueNext = $(this).index() + 1;
			TeaserToggeln(aktuellePosNext, MenueNext, true);
			TeaserHeaderSpan();
			StartIntervall();

			return false;

		});

		// Autoplay Teaser (start)
		$('#items').ready(function () {
			StartIntervall();
		});
		function StartIntervall() {
			if (!$('#items').hasClass('SmartEditStop')) {
				$ItemsInterval = setInterval(function () {
					ulLength = $("ul#toggle").children().length;
					TeaserToggeln(aktuellePosNext, "", "");
					TeaserHeaderSpan();
					aktuellePosNext++;
					if (aktuellePosNext ==...