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; }
Solved! Go to the solution
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.
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>
Success.
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;
There is not already a slideshow feature on shopify?
Subject | Author | Latest Post |
---|---|---|
Subject | Author | Posted |
---|---|---|
an hour ago | ||
an hour ago | ||
an hour ago | ||
an hour ago | ||
2 hours ago |