javascript - get an automatic quote slider to slide

I'm a complete beginner in Javascript and I'm trying to integrate a slider for a website without a plugin, where the background is fixed and only text quotes slide in and out automatically.

I have used Javascript code as a basis, which I have found several times at W3Schools and where the automatic change works perfectly. The only thing I would have liked to add is the slide function. However, I have no idea how to integrate it. Can someone perhaps help me? Here is my link to Codepen: Codepen

var slideIndex = 1;
showSlides(slideIndex);

var timer;

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  if (timer) {
    clearTimeout(timer);
  }

  var x;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (x = 0; x < slides.length; x++) {
    slides[x].style.display = "none";
  }
  for (x = 0; x < dots.length; x++) {
    dots[x].className = dots[x].className.replace(" aktiv", "");
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " aktiv";
  timer = setTimeout(function() {
    plusSlides(1);
  }, 5000);
}

.referenzen {
  height: 500px;
  width: 100%;
  background-image: url(".jpeg");
  background-size: contain;
  background-position: right bottom;
  background-repeat: no-repeat;
  line-height: 250%;
}

.dot,
.slideNav a {
  height: 10px;
  width: 10px;
  float: left;
  display: block;
  margin: 0 10px;
  cursor: pointer;
}

.slideNav {
  width: 200px;
  margin: auto;
  margin-bottom: 50px;
}

.dot {
  background-color: #008b93;
  opacity: 15%;
  border-radius: 10px;
}

.dot.aktiv {
  background-color: #008b93;
  opacity: 100%;
}

@media(min-width: 1000px) {
  .carousel-caption {
    display: block;
    position: absolute;
    text-align: center;
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
    color: #008b93;
    font-size: 30px;
    padding: 100px 300px 0 300px;
  }
}

@media(max-width: 1000px) {
  .carousel-caption {
    display: block;
    position: absolute;
    text-align: center;
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
    color: #008b93;
    font-size: 30px;
    padding: 100px 50px 0 50px;
    overflow: hidden;
    transition: bottom 500ms ease-in;
  }
}

<div class="referenzen">
  <div class="mySlides">
    <div class="carousel-caption">
      <h3>„Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut laaliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.“</h3><br>
      <p>Martha Musterfrau</p>
    </div>
  </div>

  <div class="mySlides">
    <div class="carousel-caption">
      <h3>„ Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit aiam nonumy eirmod tempor invidunt ut, sed diam voluptua. At vero eos “</h3><br>
      <p>Max Mustermann</p>
    </div>
  </div>

  <div class="mySlides">
    <div class="carousel-caption">
      <h3>„et accusam et justo duo dolores et ea rebum. Stet clita kasd guberg ipsum dolor sit aiam nonumy eirmren, no sea takimata sanctus est Lorem ipsum dolor sit amet.“</h3><br>
      <p>Martina Musterfrau</p>
    </div>
  </div>
</div>
<br>

<div class="slideNav" style="text-align:center">
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

I'm a complete beginner in Javascript and I'm trying to integrate a slider for a website without a plugin, where the background is fixed and only text quotes slide in and out automatically.

var slideIndex = 1;
showSlides(slideIndex);

var timer;

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  if (timer) {
    clearTimeout(timer);
  }

  var x;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (x = 0; x < slides.length; x++) {
    slides[x].style.display = "none";
  }
  for (x = 0; x < dots.length; x++) {
    dots[x].className = dots[x].className.replace(" aktiv", "");
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " aktiv";
  timer = setTimeout(function() {
    plusSlides(1);
  }, 5000);
}

.referenzen {
  height: 500px;
  width: 100%;
  background-image: url("https://lektorat-mira.de/wp-content/uploads/2021/12/AdobeStock_175286368-scaled.jpeg");
  background-size: contain;
  background-position: right bottom;
  background-repeat: no-repeat;
  line-height: 250%;
}

.dot,
.slideNav a {
  height: 10px;
  width: 10px;
  float: left;
  display: block;
  margin: 0 10px;
  cursor: pointer;
}

.slideNav {
  width: 200px;
  margin: auto;
  margin-bottom: 50px;
}

.dot {
  background-color: #008b93;
  opacity: 15%;
  border-radius: 10px;
}

.dot.aktiv {
  background-color: #008b93;
  opacity: 100%;
}

@media(min-width: 1000px) {
  .carousel-caption {
    display: block;
    position: absolute;
    text-align: center;
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
    color: #008b93;
    font-size: 30px;
    padding: 100px 300px 0 300px;
  }
}

@media(max-width: 1000px) {
  .carousel-caption {
    display: block;
    position: absolute;
    text-align: center;
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
    color: #008b93;
    font-size: 30px;
    padding: 100px 50px 0 50px;
    overflow: hidden;
    transition: bottom 500ms ease-in;
  }
}

<div class="referenzen">
  <div class="mySlides">
    <div class="carousel-caption">
      <h3>„Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut laaliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.“</h3><br>
      <p>Martha Musterfrau</p>
    </div>
  </div>

  <div class="mySlides">
    <div class="carousel-caption">
      <h3>„ Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit aiam nonumy eirmod tempor invidunt ut, sed diam voluptua. At vero eos “</h3><br>
      <p>Max Mustermann</p>
    </div>
  </div>

  <div class="mySlides">
    <div class="carousel-caption">
      <h3>„et accusam et justo duo dolores et ea rebum. Stet clita kasd guberg ipsum dolor sit aiam nonumy eirmren, no sea takimata sanctus est Lorem ipsum dolor sit amet.“</h3><br>
      <p>Martina Musterfrau</p>
    </div>
  </div>
</div>
<br>

<div class="slideNav" style="text-align:center">
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

Share Improve this question edited Mar 26 at 13:37 j08691 208k32 gold badges269 silver badges280 bronze badges asked Mar 26 at 12:48 kirschmond88 12 bronze badges

Add a comment |

1 Answer 1

Sorted by: Reset to default 0

You're right to start with vanilla js to learn. You should use let/const instead of the var keyword. Then, you need to wait for the DOM to load before calling your initialisation function using the DOMContentLoaded event.

Here's what I suggest:

let slideIndex = 1;
let firstTime = true;
let timer;

document.addEventListener("DOMContentLoaded", (event) => {
    showSlides(slideIndex);
});

function showSlides(n) {
    if (timer) {
        clearTimeout(timer);
    }
    let x;
    const slides = document.getElementsByClassName('mySlides');
    const dots = document.getElementsByClassName('dot');
    if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (x = 0; x < slides.length; x++) {
        slides[x].style.display = "none";
    }
    for (x = 0; x < dots.length; x++) {
        dots[x].className = dots[x].className.replace(" aktiv", "");
    }
    slides[slideIndex-1].style.display = "block";
    if (!firstTime) {
        slides[slideIndex-1].classList.add('moved');
    }
    firstTime = false;
    dots[slideIndex-1].className += " aktiv";
    timer = setTimeout( function(){ plusSlides(1); }, 5000 );
}

function plusSlides(n) {
    showSlides(slideIndex += n);
}

function currentSlide(n) {
    showSlides(slideIndex = n);
}

.referenzen{
    height: 500px;
    width: 100%;
    background-image: url("https://lektorat-mira.de/wp-content/uploads/2021/12/AdobeStock_175286368-scaled.jpeg");
    background-size: contain;
    background-position: right bottom;
    background-repeat: no-repeat;
    line-height: 250%;
}


.dot, .slideNav a{
    height: 10px;
    width: 10px;
    float: left;
    display: block;
    margin: 0 10px;
    cursor: pointer;
}

.slideNav{
    width: 200px;
    margin: auto;
    margin-bottom: 50px;
}

.dot{
    background-color: #008b93;
    opacity: 15%;
    border-radius: 10px;
}

.dot.aktiv{ background-color: #008b93;
    opacity: 100%;}

.moved {
    animation-duration: 1s;
    animation-name: slide-in;
}

@keyframes slide-in {
    from {
        translate: -150vw 0;
    }

    to {
        translate: 0 0;
    }
}

@media( min-width: 1000px ) {
    .carousel-caption{
        display: block;
        position: absolute;
        text-align: center;
        font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
        color: #008b93;
        font-size: 30px;
        padding: 100px 300px 0 300px;
    }
}

@media( max-width: 1000px ) {
    .carousel-caption{
        display: block;
        position: absolute;
        text-align: center;
        font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
        color: #008b93;
        font-size: 30px;
        padding: 100px 50px 0 50px;
        overflow: hidden;
        transition: bottom 500ms ease-in;
    }
}

<div class="referenzen">
    <div class="mySlides">
        <div class="carousel-caption">
            <h3>„Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut laaliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.“</h3><br>
            <p>Martha Musterfrau</p>
        </div>
    </div>

    <div class="mySlides">
        <div class="carousel-caption">
            <h3>„ Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit aiam nonumy eirmod tempor invidunt ut, sed diam voluptua. At vero eos “</h3><br>
            <p>Max Mustermann</p>
        </div>
    </div>

    <div class="mySlides">
        <div class="carousel-caption">
            <h3>„et accusam et justo duo dolores et ea rebum. Stet clita kasd guberg ipsum dolor sit aiam nonumy eirmren, no sea takimata sanctus est Lorem ipsum dolor sit amet.“</h3><br>
            <p>Martina Musterfrau</p>
        </div>
    </div>
</div><!-- referenzen -->
<br>

<div class="slideNav" style="text-align:center">
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

You can use the slide-in keyframe in the css to customise your animation.

Using CSS animations

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - get an automatic quote slider to slide - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)