[solved]Problems with a css only image slider

HTML & CSS
1

So I saw this css only image slider in a SP article a couple weeks ago, and I thought it was a nice effect. The only issue I had with it was it required all the images to be the same size. So I tried to alter it to make it so I could use different sized images and it still work. So I added divs around the images, set the css (or so I thought) to block off the divs and not the images, adding a simple black background to it.

I did ask the question in the article comments, but since it’s not a new article, the author may not be as quick to return and respond, so I thought I’d post here as well…

I used different sized images, but I corrected the numbers in the css accordingly, but there’s something else wrong with it since the image slides aren’t going to width of the images, but rather some other random distance.

Here is the html I changed it to (I may change it to use a list, but for now, I’ll stick with this as it’s close to the original article)

<section class="slideshow">
  <div class="slideshow-container slide">
    <div class="container">
    <img src="http://placeimg.com/710/456/any"/>
    </div>
    <div class="container">
      <p> I work with text too! And I'm just testing length here and stuff it's cool you know because that's important to do I guess hey did I ever tell you about that time that I did that stuff with the thing</p>
    </div>
    <div class="container">
    <img src="http://placeimg.com/700/456/any"/>
    </div>
    <div class="container">
    <img src="http://placeimg.com/710/456/any"/>
    </div>
  </div>
</section>

and here’s the css

/* start of slideshow styles*/
.slideshow { width: 710px; margin: 0 auto; padding: 0; overflow: hidden; border: solid 1px #EEEDEC; background-color: #000; }
.slideshow-container { width: 3550px; height: 456px; font-size: 0; transition: 1s ease; }
.slideshow-container:hover { animation-play-state: paused; }

.container { width: 710px; height: auto; display: inline-block; font-size: 16px; text-align: center;  margin: 0; padding: 0; }
.container  img{ display: block; margin: 0 auto; }
/*
.slideshow img, .text-container {
  width: 700px;
  height: auto;
  display: inline-block;
  font-size: 16px;
  text-align: center;
  margin: 0 auto;
}
*/
.text-container {
  height: 225px;
  position: relative;
}

.slide {
  animation: slide 24s ease infinite;
}

@keyframes slide {
  0% { transform: translateX(0%); }
  12.5% { transform: translateX(0%); }
  25% { transform: translateX(-25%); }
  37.5% { transform: translateX(-25%); }
  50% { transform: translateX(-50%); }
  62.5% { transform: translateX(-50%); }
  75% { transform: translateX(-75%); }
  87.5% { transform: translateX(-75%); }
  99% { transform: translateX(-75%); }
  100% { transform: translateX(0); }
}

I created a copy of the articles code pen so everyone could play. What blatantly obvious item am I missing here that these containers aren’t sliding the appropriate distance?

2

You have 4 containers of 710px = 2840 not 3550 :smile:

.slideshow-container {
	width: 2840px;
	height: 456px;
}

If you want 5 containers then you will also need to adjust the percentages in the keyframes to match.

3

(once just isn’t enough)

I originally had five in there, but didn’t adjust the percentages. So I went to four, but forgot to adjust the width. sigh

Told you it was blatantly obvious

Back to

1 Like