CODEWITHSUNDEEP
htmlcssslideshow
santosh
santosh

Reputation: 892

Slideshow using CSS-HTML only showing four slides

I am working with slide, I am using only css and HTML. I am using total six slide but it's showing me only four slides. It's not moving to 5th and 6th. I don't understand where I am making mistake, please correct me.

Issue: https://jsfiddle.net/usm10hfy/

You can see on JsFiddle what issue I am facing. Hope you help, thanks in advance.

<style>
body {
  font-family: Helvetica, sans-serif;
  padding: 5%;
  text-align: center;
}

#slideshow {
  overflow: hidden;
  height: 510px;
  width: 728px;
  margin: 0 auto;
}

.slide-wrapper {
  width: 2912px;
  -webkit-animation: slide 18s ease infinite;
}

.slide {
  float: left;
  height: 510px;
  width: 728px;
}

.slide:nth-child(1) {
  background: #D93B65;
}

.slide:nth-child(2) {
  background: #037E8C;
}

.slide:nth-child(3) {
  background: #36BF66;
}

.slide:nth-child(4) {
  background: #D9D055;
}

.slide:nth-child(5) {
  background: #D9D055;
}

.slide:nth-child(6) {
  background: #D9D055;
}

.slide-number {
  color: #000;
  text-align: center;
  font-size: 10em;
}

@-webkit-keyframes slide {
  20% {margin-left: 0px;}
  30% {margin-left: -728px;}
  50% {margin-left: -728px;}
  60% {margin-left: -1456px;}
  70% {margin-left: -1456px;}
  80% {margin-left: -2184px;}
  90% {margin-left: -2184px;}
}
</style>

<div id="slideshow">
  <div class="slide-wrapper">
    <div class="slide"><h1 class="slide-number">1</h1></div>
    <div class="slide"><h1 class="slide-number">2</h1></div>
    <div class="slide"><h1 class="slide-number">3</h1></div>
    <div class="slide"><h1 class="slide-number">4</h1></div>
    <div class="slide"><h1 class="slide-number">5</h1></div>
    <div class="slide"><h1 class="slide-number">6</h1></div>
  </div>
</div>

Upvotes: 3

Views: 475

Answers (1)

Amaresh S M
Amaresh S M

Reputation: 3010

body {
  font-family: Helvetica, sans-serif;
  padding: 5%;
  text-align: center;
}

#slideshow {
  overflow: hidden;
  height: 510px;
  width: 728px;
  margin: 0 auto;
}

.slide-wrapper {
  width: 4368px; /*change this width */
  -webkit-animation: slide 10s ease infinite;
}

.slide {
  float: left;
  height: 510px;
  width: 728px;
}

.slide:nth-child(1) {
  background: #D93B65;
}

.slide:nth-child(2) {
  background: #037E8C;
}

.slide:nth-child(3) {
  background: #36BF66;
}

.slide:nth-child(4) {
  background: #D9D055;
}

.slide:nth-child(5) {
  background: #D9D055;
}

.slide:nth-child(6) {
  background: #D9D055;
}

.slide-number {
  color: #000;
  text-align: center;
  font-size: 10em;
}

@-webkit-keyframes slide {  /* add keyframe animations to move each slide towards left */
  15% {margin-left: 0px;}
  30% {margin-left: -728px;}
  45% {margin-left: -1456px;}
  60% {margin-left: -2184px;}
  75%{margin-left: -2912px;}
  90%{margin-left: -3640px;}

}

Now it works fine: https://jsfiddle.net/4othdxg7/

Demo:

body {
  font-family: Helvetica, sans-serif;
  padding: 5%;
  text-align: center;
}

#slideshow {
  overflow: hidden;
  height: 510px;
  width: 728px;
  margin: 0 auto;
}

.slide-wrapper {
  width: 8736px;
  -webkit-animation: slide 12s ease infinite;
}

.slide {
  float: left;
  height: 510px;
  width: 728px;
}

.slide:nth-child(1) {
  background: #D93B65;
}

.slide:nth-child(2) {
  background: #037E8C;
}

.slide:nth-child(3) {
  background: #36BF66;
}

.slide:nth-child(4) {
  background: #D9D055;
}

.slide:nth-child(5) {
  background: red;
}

.slide:nth-child(6) {
  background: #D9D055;
}

.slide:nth-child(7) {
  background: #D93B65;
}

.slide:nth-child(8) {
  background: #037E8C;
}

.slide:nth-child(9) {
  background: #36BF66;
}

.slide:nth-child(10) {
  background: #D9D055;
}

.slide:nth-child(11) {
  background: red;
}

.slide:nth-child(12) {
  background: #D9D055;
}

.slide-number {
  color: #000;
  text-align: center;
  font-size: 10em;
}

@-webkit-keyframes slide {
  8% {
    margin-left: 0px;
  }
  16% {
    margin-left: -728px;
  }
  24% {
    margin-left: -1456px;
  }
  32% {
    margin-left: -2184px;
  }
  40% {
    margin-left: -2912px;
  }
  48% {
    margin-left: -3640px;
  }
  56% {
    margin-left: -4368px;
  }
  64% {
    margin-left: -5096px;
  }
  72% {
    margin-left: -5824px;
  }
  80% {
    margin-left: -6552px;
  }
  88% {
    margin-left: -7280px;
  }
  100% {
    margin-left: -8008px;
  }
}
<div id="slideshow">
  <div class="slide-wrapper">
    <div class="slide">
      <h1 class="slide-number">1</h1>
    </div>
    <div class="slide">
      <h1 class="slide-number">2</h1>
    </div>
    <div class="slide">
      <h1 class="slide-number">3</h1>
    </div>
    <div class="slide">
      <h1 class="slide-number">4</h1>
    </div>
    <div class="slide">
      <h1 class="slide-number">5</h1>
    </div>
    <div class="slide">
      <h1 class="slide-number">6</h1>
    </div>
    <div class="slide">
      <h1 class="slide-number">7</h1>
    </div>

    <div class="slide">
      <h1 class="slide-number">8</h1>
    </div>
    <div class="slide">
      <h1 class="slide-number">9</h1>
    </div>
    <div class="slide">
      <h1 class="slide-number">10</h1>
    </div>
    <div class="slide">
      <h1 class="slide-number">11</h1>
    </div>
    <div class="slide">
      <h1 class="slide-number">12</h1>
    </div>

  </div>
</div>

Upvotes: 1

Related Questions