SlideShow problem

Hey, I have been trying to work a slideshow, I have watched many tutorials and books but every time I chanege something to my code nothing happens. Can you help me and tell me how to fix this, please?

Welcome to the forums, @ruizeraani.

We can’t diagnose the prtoblem from an image of part of the code.

Please post the full code you are using - both HTML and CSS. (I’m assuming this is a pure CSS slider; if not, we may need to move the topic to the JavaScript forum.) If you have a live page you can link to, that would be even better.

Yes it is pure CSS.

I had to erase opening brakets in the HTML code*

HTML code:

        <div class="slideshow">
            <figure>
                <img src="flor%20Ali.jpg" alt= "Flower" />
                <img src="polar%20bear.jpg" alt="Polar bear" />
                <img src="forest.jpg" alt="Forest" />
            </figure>
       </div>

CSS code:

.slideshow {
    overflow: hidden;
    position: relative;
    transform: translate3d(0, 0, 0);
}
.slideshow figure img{
    width: 100%;
    float: left;
    animation: 20s slide linear infinite;
}

.slideshow figure{
    position: relative;
    margin: 0;
    left: 0;
    text-align: left;
    font-size: 0;
    transform: translate3d(0,0,0);
}

@keyframe slide {
  0%    { left: 0; }
  100%  { left: -200%; }
}

To format code on the forums, you can highlight your code, then use the </> button in the editor window, or you can place three backticks ``` (top left key on US/UK keyboards) on a line before your code, and three on a line after your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

I’m guessing there are problems with the file names having spaces. i.e.
“polar bear.jpg” - “polar%20bear.jpg”

Try the code using image files that don’t have spaces in the names and see if it works better.

2 Likes

I already change the file names but it is not working.

Can you define “not working”? Are you seeing a broken image link, are you seeing nothing at all, something different? If we’re to provide useful assistance need rather more than you’re giving us to go on.

One that would be useful to know, is ‘are the image files in the same directory as HTML file?’. If not, then the code above won’t work and you’d need to amend the file path in relation to where they have been located.

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