JQUERY auto Slideshow pausieren?

Hallo

Wie kann ich mittels Button den Auto-slider ausschalten, (if else ?) und zur vorherigen/nächsten Bild sliden

Wie kann ich den das umsetzen?

Die Tutorials von Youtube, WS3 School, stackoverflow und direkt bei jsquery hat mir nicht wirklich weitergeholfen. Hat gerade mal für das Auto-slide gereicht

HTML

          <div id="slideshow-image">
            <div class="ff-home-image-container1">
              <div class="top-left test">
                <div class="ff-home-image-header">
                  FF-Test
                </div>
                <div class='ff-home-image-text'>
                  DER TEST XD
                </div>
              </div>
            </div>
            <div class="ff-home-image-container2">
              <div class="top-centred test">
                <div class="ff-home-image-header">
                  fffftest
                </div>
                <div class='ff-home-image-text'>
                  testen
                </div>
              </div>
            </div>
          </div>

CSS

.ff-home-image-container1 {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 0;
  padding-top: 64.73%;
  background: url("https://www.w3schools.com/w3css/img_lights.jpg") no-repeat center center;
  background-size: cover;
  display: block;
}

.ff-home-image-container2 {   position: relative;   display: inline-block;   width: 100%;   height: 0;   padding-top: 64.73%;   background: url("https://www.w3schools.com/w3css/img_car.jpg") no-repeat center center;   background-size: cover;   display: none; } .top-centred {   top: 2%;   left: 50%;   position: absolute;   transform: translate(-50%, -2%); }

.top-left {
  top: 2%;
  left: 5%;
  position: absolute;
  transform: translate(-5%, -2%);
}
.ff-home-image-header {
  font-size: 4rem;
  font-weight: bold;
  color: rgba(255,0,0,.7);
  font-style: italic;
}
.ff-home-image-text {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  color: rgba(255,0,0,.7);
  font-style: italic;
  margin-top: 0;
  margin-bottom: 0;
}

JQUERY

      $("#slideshow-image > div:gt(0)").hide();
        setInterval(function() {
          $('#slideshow-image > div:first')
            .fadeOut(0)
            .next()
            .fadeIn(2000)
            .end(2000)
            .appendTo('#slideshow-image'),
          $('.test')
            .fadeOut(400)
            .fadeIn(4000)
            .end(2000)
            .appendTo('#slideshow-image');
          },  10000);
HTML, programmieren, we, jq
2 Antworten

Meistgelesene Fragen zum Thema We

Songtechtsuche: Aswad - We are one People (Asterix in Amerika Song)?

1 Antwort

wer kennt gute und günstige hotels in amsterdam?

7 Antworten

Kann man heute noch irgendwo Batterien kaufen?

5 Antworten

Wie kann ich in minecraft mit WorldEdit einen "Rahmen" um das gewählte Feld machen?

2 Antworten

Wie kann ich Outline Bilder selbst machen?

2 Antworten

Türgriff bei Türöffnen kaputt gegangen wie viel kostet wechseln?

1 Antwort

Eskadron Halfter in WE, wie fallen sie aus?

1 Antwort

Kann man nur am Wochenende Rauchen?

9 Antworten

Wie funktioniert @das.liebt.dich?

2 Antworten

We - Neue und gute Antworten