How to delay the slider?

JavaScript
1

I installed this: http://www.jqueryscript.net/slider/Lightweight-Overlay-Content-Slider-Plugin-For-jQuery.html

And when I refresh the page, the first slide appears. I’d prefer no slide appears upon refresh, and then after X seconds the first slide slides in. I’ve horsed around with this, and searched google, but I haven’t been able to find a solution. Here’s some relevant code:

<ul id="slideshow" class="slides">
  <li data-duration="5000" class="active">
    <div class="slide-content">
      Slide Content 1
    </div>
  </li>
  <li data-duration="3000">
    <div class="slide-content">
      Slide Content 2
    </div>
  </li>
  <li data-duration="1000">
    <div class="slide-content">
      Slide Content 3
    </div>
  </li>
</ul>

ul.slides {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.slides li {
  margin: 0;
  background: rgba(10, 10, 90, 0.5);
  padding: 10%;
  color: #fff;
  font-size: 18rem;
  font-weight: bold;
  display: flex;
  align-content: center;
  justify-content: center;
  opacity: 0;
  position: absolute;
  width: 1000px;
  height: 22%;
  top: 155px;
  right: 0;
  bottom: 0;
  z-index: 8;
  transition: transform 1.4s cubic-bezier(0.01, 1, 0.91, 1) 0.5s;
}
 @media all and (max-width: 1000px) {

ul.slides li { font-size: 20vw; }
}

ul.slides li.active { z-index: 10; }

ul.slides li.active.slide-left { transform: translate3d(100%, 0, 0); }

ul.slides li.active.slide-right { transform: translate3d(-100%, 0, 0); }

ul.slides li.last-active { z-index: 9; }

ul.slides li:first-child {
  left: 0;
  opacity: 1;
}

Any guidance on how to not show a slide upon refresh, and then have it start after X seconds, will be appreciated. (Or help with how to delay/begin each separate slide). Thanks

2

Use setTimeout to initialise the slider.

setTimeout(function() {
  $('#slideshow').dsSlider();
}, 5000);

That will make it start 5 seconds after the page loads. Change the value 5000 for a different number of seconds. (number of seconds * 1000, so milliseconds)

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.