Die jQuery + Swiper-Komponente realisiert den Umschalteffekt der gleitenden Jahresregisterkarte in der Zeitleiste

<div Klasse="Swiper-Containerbox">
    <div Klasse="swiper-wrapper Hauptzeitleiste">
      <div Klasse="swiper-slide Zeitleiste fd-active-line">
        <a href="javascript:void(0);" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" class="timeline-content">
          <div Klasse="Zeitleiste-Jahr">
            <span>2019</span>
          </div>
        </a>
        <div Klasse="xians"></div>
      </div>
      <div Klasse="swiper-slide timeline">
        <a href="javascript:void(0);" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" class="timeline-content">
          <div Klasse="Zeitleiste-Jahr">
            <span>2018</span>
          </div>
        </a>
        <div Klasse="xians"></div>
      </div>
      <div Klasse="swiper-slide timeline">
        <a href="javascript:void(0);" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" class="timeline-content">
          <div Klasse="Zeitleiste-Jahr">
            <span>2017</span>
          </div>
        </a>
        <div Klasse="xians"></div>
      </div>
      <div Klasse="swiper-slide timeline">
        <a href="javascript:void(0);" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" class="timeline-content">
          <div Klasse="Zeitleiste-Jahr">
            <span>2016</span>
          </div>
        </a>
        <div Klasse="xians"></div>
      </div>
      <div Klasse="swiper-slide timeline">
        <a href="javascript:void(0);" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" class="timeline-content">
          <div Klasse="Zeitleiste-Jahr">
            <span>2015</span>
          </div>
        </a>
        <div Klasse="xians"></div>
      </div>
      <div Klasse="swiper-slide timeline">
        <a href="javascript:void(0);" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" rel="externes Nofollow" class="timeline-content">
          <div Klasse="Zeitleiste-Jahr">
            <span>2014</span>
          </div>
        </a>
        <div Klasse="xians"></div>
      </div>
    </div>
  </div>
  <ul Klasse="Ereignisliste">
    <div>
      <h3 id="2012">2019</h3>
      <img src="./img/lh.jpg" alt="">
    </div>
    <div Stil="Anzeige: keine;">
      <h3 id="2012">2018</h3>
      <img src="./img/lhls.jpg" alt="">
    </div>
    <div Stil="Anzeige: keine;">
      <h3 id="2011">2017</h3>
      <img src="./img/lkss.jpg" alt="">
    </div>
    <div Stil="Anzeige: keine;">
      <h3 id="2011">2016</h3>
      <img src="./img/luhu.jpg" alt="">
    </div>
    <div Stil="Anzeige: keine;">
      <h3 id="2011">2015</h3>
      <img src="./img/luhuwhite.jpg" alt="">
    </div>
    <div Stil="Anzeige: keine;">
      <h3 id="2011">2014</h3>
      <img src="./img/lhls.jpg" alt="">
    </div>
  </ul>
  </div>

<script src="js/jquery.min_v1.0.js" type="text/javascript"></script>
  <script src="js/swiper-bundle.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="css/swiper-bundle.min.css" rel="externes nofollow" >

.Seite {
  Breite: 100 %;
}
 
.Hauptzeitleiste {
  Schriftfamilie: „Roboto“, serifenlos;
  Breite: 200px;
  Position: relativ;
  schweben: links;
}
 
.main-timeline:nach {
  Inhalt: '';
  Anzeige: Block;
  klar: beides;
}
 
.main-timeline:vor {
  /* Inhalt: '';
  Höhe: berechnet (100 % + 80 Pixel);
  Breite: 0px;
  Rand: 2px durchgezogen #0870C5;
  transformieren: übersetzenX(-50%);
  Position: absolut;
  links: 114px;
  oben: 0px; */
}
 
.Hauptzeitleiste .Zeitleiste {
  Breite: 4%;
  /* Polsterung: 140px 70px 0 25px; */
  Rand: 0 50px 0 0;
  schweben: links;
  Position: relativ;
}
 
.Hauptzeitleiste .Zeitleisteninhalt {
  /* Polsterung: 15px 15px 15px 40px;
  Rand: 2px durchgezogen #00A79B; */
  Rahmenradius: 15px 0 15px 15px;
  Anzeige: Block;
  Position: relativ;
}
 
.Hauptzeitleiste .Zeitleisteninhalt:hover {
  Textdekoration: keine;
}
 
.fd-active-line .timeline-content:nach {
  Inhalt: '';
  Hintergrundfarbe: #00A79B;
  Höhe: 18px;
  Breite: 15px;
  Position: absolut;
  rechts: -43px;
  oben: 27px;
  /* Clip-Pfad: Polygon (100 % 0, 0 0, 0 100 %); */
}
 
.Hauptzeitleiste .Zeitleistenjahr {
  Farbe: #fff;
  Hintergrundfarbe: #00A79B;
  Schriftgröße: 24px;
  Schriftstärke: 900;
  Textausrichtung: zentriert;
  Zeilenhöhe: 80px;
  Höhe: 80px;
  Breite: 80px;
  Randradius: 50 %;
  Position: absolut;
  rechts: -120px;
  oben: -40px;
}
 
.main-timeline .timeline-year:nach {
  Inhalt: '';
  Höhe: 100px;
  Breite: 100px;
  Rand: 8px durchgezogen #00A79B;
  Rahmenfarbe links: transparent;
  Randradius: 50 %;
  transformieren: verschiebeX(-50 %), verschiebeY(-50 %), drehen(-20 Grad);
  Position: absolut;
  links: 50%;
  oben: 50 %;
}
 
.Hauptzeitleiste .Zeitleistensymbol {
  Farbe: #fff;
  Hintergrundfarbe: #00A79B;
  Schriftgröße: 35px;
  Textausrichtung: zentriert;
  Zeilenhöhe: 50px;
  Höhe: 50px;
  Breite: 50px;
  Randradius: 50 %;
  transformieren: verschiebeY(-50%);
  Position: absolut;
  oben: 50 %;
  links: -25px;
  Übergang: alle 0,3 s;
}
 
.Hauptzeitleiste .Titel {
  Farbe: #222;
  Schriftgröße: 20px;
  Schriftstärke: 900;
  Texttransformation: Großbuchstaben;
  Buchstabenabstand: 1px;
  Rand: 0 0 7px 0;
}
 
.Hauptzeitleiste .Beschreibung {
  Farbe: #222;
  Schriftgröße: 15px;
  Buchstabenabstand: 1px;
  Textausrichtung: Blocksatz;
  Rand: 0 0 5px;
}
 
.main-timeline .timeline:n-tes-Kind(gerade) .timeline-Inhalt {}
 
.main-timeline .timeline:n-tes-Kind(gerade) .timeline-Inhalt:nach {
  transformieren: Y-Drehung (180 Grad);
  rechts: auto;
  links: 123px;
}
 
.main-timeline .timeline:n-tes-Kind(gerade) .timeline-Jahr:nach {
  transformieren: verschiebeX(-50 %), verschiebeY(-50 %), drehen(200 Grad);
}
 
.main-timeline .timeline:n-tes-Kind(gerade) .timeline-Symbol {
  links: auto;
  rechts: -25px;
}
 
.timeline:n-tes-Kind(4n+2) .timeline-Inhalt,
.timeline:n-tes-Kind(4n+2) .timeline-Jahr:nach {
  Rahmenfarbe: #9E005D;
}
 
.timeline:n-tes-Kind(4n+2) .timeline-Jahr:nach {
  Rahmenfarbe links: transparent;
}
 
.timeline:n-tes Kind(4n+2) .timeline-Inhalt:nach,
.timeline:n-tes-Kind(4n+2) .timeline-Symbol,
.timeline:n-tes-Kind(4n+2) .timeline-Jahr {
  Hintergrundfarbe: #9E005D;
}
 
.timeline:n-tes-Kind(4n+3) .timeline-Inhalt,
.timeline:n-tes-Kind(4n+3) .timeline-Jahr:nach {
  Rahmenfarbe: #f24f0e;
}
 
.timeline:n-tes-Kind(4n+3) .timeline-Jahr:nach {
  Rahmenfarbe links: transparent;
}
 
.timeline:n-tes Kind(4n+3) .timeline-Inhalt:nach,
.timeline:n-tes-Kind(4n+3) .timeline-Symbol,
.timeline:n-tes-Kind(4n+3) .timeline-Jahr {
  Hintergrundfarbe: #f24f0e;
}
 
.timeline:n-tes-Kind(4n+4) .timeline-Inhalt,
.timeline:n-tes-Kind(4n+4) .timeline-Jahr:nach {
  Rahmenfarbe: #0870C5;
}
 
.timeline:n-tes-Kind(4n+4) .timeline-Jahr:nach {
  Rahmenfarbe links: transparent;
}
 
.timeline:n-tes Kind(4n+4) .timeline-Inhalt:nach,
.timeline:n-tes-Kind(4n+4) .timeline-Symbol,
.timeline:n-tes-Kind(4n+4) .timeline-Jahr {
  Hintergrundfarbe: #0870C5;
}
 
@media screen und (max-width:767px) {
  .main-timeline:vor {
    Anzeige: keine;
  }
 
  .Hauptzeitleiste .Zeitleiste {
    Breite: 100 %;
    Polsterung oben: 80px;
    Polsterung rechts: 12px;
    Rand unten: 20px;
  }
 
  .main-timeline .timeline:n-tes-Kind(gerade) {
    Polsterung links: 10px;
    Polsterung oben: 80px;
    Rand unten: 20px;
  }
 
  .Hauptzeitleiste .Zeitleisteninhalt,
  .main-timeline .main-timeline .timeline:n-tes-Kind(gerade) .timeline-Inhalt {
    Hintergrundfarbe: #fff;
    Polsterung oben: 25px;
  }
 
  .Hauptzeitleiste .Zeitleisteninhalt:nach {
    Anzeige: keine;
  }
 
  .Hauptzeitleiste .Zeitleistenjahr {
    Schriftgröße: 24px;
    Zeilenhöhe: 70px;
    Höhe: 70px;
    Breite: 70px;
    rechts: 0;
    oben: -65px;
  }
 
  .main-timeline .timeline-year:nach {
    Anzeige: keine;
  }
 
  .main-timeline .timeline:n-tes-Kind(gerade) .timeline-Jahr {
    links: 3px;
  }
}
 
@media screen und (max-width:567px) {
  .Hauptzeitleiste .Titel {
    Schriftgröße: 18px;
  }
}
 
.swiper-container {
  Breite: 205px;
  Höhe: 500px;
  schweben: links;
}
 
.swiper-slide {
  Textausrichtung: zentriert;
  Schriftgröße: 18px;
  Hintergrund: #fff;
 
  /* Folientext vertikal zentrieren */
  Anzeige: -webkit-box;
  Anzeige: -ms-flexbox;
  Anzeige: -webkit-flex;
  Anzeige: Flex;
  -WebKit-Box-Pack: Mitte;
  -ms-flex-pack: Mitte;
  -webkit-justify-content: zentrieren;
  Inhalt ausrichten: zentriert;
  -webkit-box-align: zentriert;
  -ms-flex-align: zentriert;
  -webkit-align-items: zentrieren;
  Elemente ausrichten: zentrieren;
}
 
@media (maximale Breite: 760px) {
  .swiper-button-next {
    rechts: 20px;
    transformieren: drehen (90 Grad);
  }
 
  .swiper-button-prev {
    links: 20px;
    transformieren: drehen (90 Grad);
  }
}
.event_list img {
  Breite: 880px;
  Höhe: 470px;
  Objekt-Passung: Abdeckung;
}
.xians {
  Breite: 3px;
  Höhe: 100%;
  Hintergrund: #0870C5;
  Position: absolut;
  links: 82px;
  z-Index: -1;
}

 <Skript>
    $(Funktion () {
      $(".main-timeline .timeline").klick(Funktion () {
        var TAG = $(this).geschwister().länge;
        if (TAG >= 1) {
          var index = $(dieser).index()
          $(diese).addClass('fd-active-line').geschwister().removeClass('fd-active-line')
          $(diese).parent().parent().siblings('.event_list').children().eq(index).show().siblings().hide()
        }
      })
      var swiper = neuer Swiper('.swiper-container', {
        Folien pro Ansicht: 4,
        Richtung: 'vertikal',
        Navigation:
          nächstesEl: '.swiper-button-next',
          vorheriges: '.swiper-button-prev',
        },
        An: {
          Größe ändern: Funktion () {
            swiper.changeDirection(getDirection());
          }
        }
      });
    });
  </Skript>