slideshow not repeating

[CPaul]

I have a slideshow that i plan to use as the background for my website, the only issue is that when it gets to the final photo, it does not repeat, meaning it does not return back to the first photo to repeat the cycle, i am unsure of what to do. i will attach my html and my css below 

<div class="page-width">
  <div class="grid">
    <ul class="cb-slideshow">
      <li>
        <span></span>
      </li>
      <li>
        <span></span>
      </li>
      <li>
        <span></span>
      </li>
      <li>
        <span></span>
      </li>
      <li>
        <span></span>
      </li>
      <li>
        <span></span>
      </li>
      <li>
        <span></span>
      </li>
      <li>
        <span></span>
      </li>
      <li>
        <span></span>
      </li>
      <li>
        <span></span>
      </li>
      <li>
        <span></span>
      </li>
      <li>
        <span></span>
      </li>
      <li>
        <span></span>
      </li>
      <li>
        <span></span>
      </li>
      
	</ul>
  </div>
</div>

.cb-slideshow,
.cb-slideshow:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
}
.cb-slideshow:after { 
    content: '';
}
.cb-slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 84s linear infinite 0s; 
}
.cb-slideshow li:nth-child(1) span { 
    background-image: url({{ 'IMG_0195.jpg' | asset_url }}) 
}
.cb-slideshow li:nth-child(2) span { 
    background-image: url({{ 'IMG_0178.jpg' | asset_url }});
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) span { 
    background-image: url({{ 'IMG_0080.jpg' | asset_url }});
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) span { 
    background-image: url({{ 'IMG_0116.jpg' | asset_url }});
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) span { 
    background-image: url({{ 'IMG_0221.jpg' | asset_url }});
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) span { 
    background-image: url({{ 'IMG_0332.jpg' | asset_url }});
    animation-delay: 30s; 
}
.cb-slideshow li:nth-child(7) span { 
    background-image: url({{ 'IMG_0418.jpg' | asset_url }});
    animation-delay: 36s; 
}
.cb-slideshow li:nth-child(8) span { 
    background-image: url({{ 'IMG_0422.jpg' | asset_url }});
    animation-delay: 42s; 
}
.cb-slideshow li:nth-child(9) span { 
    background-image: url({{ 'IMG_0518.jpg' | asset_url }});
    animation-delay: 48s; 
}
.cb-slideshow li:nth-child(10) span { 
    background-image: url({{ 'IMG_0540.jpg' | asset_url }});
    animation-delay: 54s; 
}
.cb-slideshow li:nth-child(11) span { 
    background-image: url({{ 'IMG_0610.jpg' | asset_url }});
    animation-delay: 60s; 
}
.cb-slideshow li:nth-child(12) span { 
    background-image: url({{ 'IMG_0732.jpg' | asset_url }});
    animation-delay: 66s; 
}
.cb-slideshow li:nth-child(13) span { 
    background-image: url({{ 'IMG_0758.jpg' | asset_url }});
    animation-delay: 72s; 
}
.cb-slideshow li:nth-child(14) span { 
    background-image: url({{ 'IMG_0901.jpg' | asset_url }});
    animation-delay: 78s; 
}
@keyframes imageAnimation { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    4% { opacity: 1; animation-timing-function: ease-out; }
    7% { opacity: 1 }
    25% { opacity: 1 }
  	75% { opacity: 1 }
    100% { opacity: 0 }
}
.no-cssanimations .cb-slideshow li span{
	opacity: 1;
}

[tim]

I guess the problem is that your slides are most of the time  opaque, so when the last slide is finally shown, it will stay and "pulse" with the previous one. 

Check my version of your code: https://codepen.io/tairli/pen/PVXYBM -- my slides are transparent most of the time.

[CPaul]

hello, thank you! this has helped somewhat, timing is better but i am using 14 slides and possibly more later, as of right now when it gets to the 14th slide it stays there for longer than the others but it fades out around time when "2" fades to "3" so after initial showing slide "1" never comes back as it is covered by "14", if you would like to see what i mean www.chandlerpaul.com/pages/Gallery youll see what i mean, ill paste the code you let me try (with my adjustments for 14 slides) below. what do you suggest i change? is it timing on the animation? 

.grid {
  position: relative;
  width: 100%;
  height: 300px;
  border: 1px dashed;
}
.cb-slideshow,
.cb-slideshow:after {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0;
  right: 0;
  z-index: 0;
}
.cb-slideshow li {
  display: unset;
}
.cb-slideshow li span {
  bottom: 0;
  right: 0;
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0;
  z-index: 0;
  font-size: 48px;
  text-align: center;
  display: block;
  padding: 100px;
  background: white;

  animation: imageAnimation 78s linear infinite 0s;
}
.cb-slideshow li:nth-child(1) span {
  background: red;
 }
.cb-slideshow li:nth-child(2) span {
  animation-delay: 6s;
  background: blue;
}
.cb-slideshow li:nth-child(3) span {
  animation-delay: 12s;
  background: silver;
}
.cb-slideshow li:nth-child(4) span {
  animation-delay: 18s;
  background: goldenrod;
}
.cb-slideshow li:nth-child(5) span {
  animation-delay: 24s;
  background: orange;
}
.cb-slideshow li:nth-child(6) span {
  animation-delay: 30s;
  background: yellow;
}
.cb-slideshow li:nth-child(7) span {
  animation-delay: 36s;
  background: blue;
}
.cb-slideshow li:nth-child(8) span {
  animation-delay: 42s;
  background: red;
}
.cb-slideshow li:nth-child(9) span {
  animation-delay: 48s;
  background: grey;
}
.cb-slideshow li:nth-child(10) span {
  animation-delay: 54s;
  background: yellow;
}
.cb-slideshow li:nth-child(11) span {
  animation-delay: 60s;
  background: orange;
}
.cb-slideshow li:nth-child(12) span {
  animation-delay: 66s;
  background: red;
}
.cb-slideshow li:nth-child(13) span {
  animation-delay: 72s;
  background: white;
}
.cb-slideshow li:nth-child(14) span {
  animation-delay: 78s;
  background: blue;
}
@keyframes imageAnimation {
  0%    { opacity: 0; }
  5%    { opacity: 1; }
  20%   { opacity: 1; }
  25%   { opacity: 0; }
  /* 20% visibility cycle for 5 slides; 25% for blending */
  100%  { opacity: 0; }
}
.no-cssanimations .cb-slideshow li span {
  opacity: 1;
}

<div class="page-width">
  <div class="grid">
    <ul class="cb-slideshow">
      <li>
        <span>1</span>
      </li>
      <li>
        <span>2</span>
      </li>
      <li>
        <span>3</span>
      </li>
      <li>
        <span>4</span>
      </li>
      <li>
        <span>5</span>
      </li>
      <li>
        <span>6</span>
      </li>
      <li>
        <span>7</span>
      </li>
      <li>
        <span>8</span>
      </li>
      <li>
        <span>9</span>
      </li>
      <li>
        <span>10</span>
      </li>
      <li>
        <span>11</span>
      </li>
      <li>
        <span>12</span>
      </li>
      <li>
        <span>13</span>
      </li>
      <li>
        <span>14</span>
      </li>
    </ul>
  </div>
</div>

[tim · Accepted solution]

For my  5 slides i make each slide visible for 20% of time (actually 25, so they blend into each other):

@keyframes imageAnimation {
  0%    { opacity: 0; }
  5%    { opacity: 1; }
  20%   { opacity: 1; }
  25%   { opacity: 0; }
  /* 20% visibility cycle for 5 slides; 25% for blending */
  100%  { opacity: 0; }
}

So for your 14 slides  this is too long, that's why you can't see first slide anymore. So  i'd be looking at 100% / 14 :

@keyframes imageAnimation {
  0%    { opacity: 0; }
  1%    { opacity: 1; }
  7%    { opacity: 1; }
  8%    { opacity: 0; }
  /* 7.1% visibility cycle for 14 slides; 8% for blending */
  100%  { opacity: 0; }
}

Plus, the animation time should be 6 * 14 = 84, not 78 -- this is even more important

    animation: imageAnimation 84s linear infinite 0s;

[Andriano]

There is not already a slideshow feature on shopify?