I have stacked 5 images (vertically scrollable). I would like to replace each of these images with a slideshow using only HTML and CSS

Web Development Front-End
1

Below, I have stacked five, vertically scrollable, images.

I would like to replace each of these images with five stacked, horizontally scrollable slideshows, using just HTML and CSS (No JavaScript).

Does anyone know how that can be done?

Thanks!!

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>All about Nothing</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>
        <section class="blur-container SlideShow-1">
        </section>
        <section class="blur-container SlideShow-2">
        </section>
        <section class="blur-container SlideShow-3">
        </section>
        <section class="blur-container SlideShow-4">
        </section>
        <section class="blur-container SlideShow-5">
        </section>
    </div>
</body>
</html>

CSS Code:

section {
  height: 100vh;
  display: flex;
  position: relative;
}

.blur-container {
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;

  &::before,
  &::after {
    top: 0px;
    left: 0px;
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
  }
}

.SlideShow-1 {
  background: url('https://arthur.io/img/art/jpg/000017344d60348e7/monika-bielskyte/untitled-27/large-2x/monika-bielskyte--untitled-27.webp');
}

.SlideShow-2 {
  background: url('https://arthur.io/img/art/jpg/000017344d60398be/monika-bielskyte/untitled-29/large-2x/monika-bielskyte--untitled-29.webp');
}

.SlideShow-3 {
  background: url('https://arthur.io/img/art/jpg/0017344d60a261291/monika-bielskyte/untitled-63/large-2x/monika-bielskyte--untitled-63.webp');
}

.SlideShow-4 {
  background: url('https://arthur.io/img/art/jpg/00017344d603531b3/monika-bielskyte/untitled-19/large-2x/monika-bielskyte--untitled-19.webp');
}

.SlideShow-5 {
  background: url('https://arthur.io/img/art/jpg/000017344d60398be/monika-bielskyte/untitled-29/large-2x/monika-bielskyte--untitled-29.webp');
}
2

I would use <figure></figure> not section, but it really doesnā€™t matter, except maybe for purists. Without some sort of engine running in the background, the best you can hope for is what user interaction with the pointer device or keyboard is available. On that note the option is to have a row or column of thumbnails and relate them to the larger image which can be exposed in the figure viewport. This is not a slideshow, if the definition of one means it runs on its own steam. CSS is not dynamic like that and cannot just be turned on and off, or given to run a continuous loop. Just so weā€™re clear on that.

1 Like
3

Itā€™s entirely possible to create a slideshow with CSS and HTML only. A little hacky, maybe.
One way you can achieve that:

For the automatic slide effect

  • Wrap your div in another element, e.g. <main>
  • Set the main element to overflow: hidden;
  • Set the inner div to a width of 100% times the amount of child elements (here: 500%), display flex; and position: relative;
  • Set the sections to flex-grow: 1; and remove the background-attachment: fixed property
  • Append the first slide image to an ::after pseudo element of the last section for a smooth loop effect
  • Create a css animation that changes the left property from 0 to -500%. With several stops if you want the images to pause, e.g.:
@keyframes slide {
  0% {
    left: 0%;
  }
  10% {
    left: -100%;
  }
  20% {
    left: -100%;
  }
//...

For the interactiveness

  • Add radio buttons inside the main element ā€“ one for each slide and one for continuing the autoplay.
  • If a radio button for a certain slide is checked, set the animation to animation-play-state: paused; and the animation-delay to the time where your image that should be linked to that radio button would be visible (for this example animation-delay: 1s for the second slide with the animation-duration is set to 10s). You can associate the radio buttons with the general sibling selector: input[value="slide-2"]:checked ~ div.
    (For this it is important that the input fields are inside the main element and not wrapped in another element).
  • When the user clicks on the radio button for continuing the autoplay, set the animation-play-state to running.
2 Likes
4

For reference, Iā€™ve created 2 viewable webpages on github.

This webpage shows the kind of slideshow Iā€™m looking to create:
https://zero-44.github.io/projekt/#slides__1

This page shows staked images that I would like to turn into stacked slideshows.
https://zero-44.github.io/projekt_two/

For the sake of clarity, Iā€™ve created an illustration shown below (fig.2) depicting stacked slideshows.

STACKED SLIDESHOW ILLUSTRATION
STACKED SLIDESHOW ILLUSTRATION415Ɨ829 9.41 KB

The code I used for my slideshow is shown below:

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>All about Nothing</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div>
        <section class="blur-container SlideShow-1">
        </section>
        <section class="blur-container SlideShow-2">
        </section>
        <section class="blur-container SlideShow-3">
        </section>
        <section class="blur-container SlideShow-4">
        </section>
        <section class="blur-container SlideShow-5">
        </section>
    </div>
</body>

</html>

CSS

body {
  height: 100%;
  margin: 0px;
  background: black;
}

section {
  height: 100vh;
  display: flex;
  position: relative;
}

.blur-container {
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
}

&::before,
&::after {
  top: 0px;
  left: 0px;
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
}

.SlideShow-1 {
  background: url("https://tile.loc.gov/storage-services/service/pnp/matpc/15400/15412r.jpg");
}

.SlideShow-2 {
  background: url("https://tile.loc.gov/storage-services/service/pnp/matpc/15900/15966r.jpg");
}

.SlideShow-3 {
  background: url("https://tile.loc.gov/storage-services/service/pnp/matpc/22600/22676r.jpg");
}

.SlideShow-4 {
  background: url("https://tile.loc.gov/storage-services/service/pnp/matpc/16700/16703r.jpg");
}

.SlideShow-5 {
  background: url("https://tile.loc.gov/storage-services/service/pnp/matpc/22200/22216r.jpg");
}
5

Have you tried the instructions I posted? This is how you can create a single slideshow as in your first link. Just with bullets rather than ā€˜previousā€™ and ā€˜forwardā€™ controls. And with the additional option to have autoplay. If you do not need autoplay, it is much simpler: You donā€™t need a css animation, just a left and a transition property. And it is a little more reliable as the animation-delay does not always jump to the right frame across all browsers.

1 Like
6

Thanks MT,

I will look through your suggestions. Iā€™m new to CSS and HTML so it will take me a little bit to understand the suggestions youā€™ve made. But I really appreciate your advise!!

I just added some more details, an illustration, and some website links that help explain what Iā€™m looking for. Not sure if that changes your suggestions, but if you donā€™t mind reviewing the newly added details, Iā€™d really appreciate it.

Again - Thanks!!

1 Like
7

I think I got you. Try my steps and post the updated code if it is not behaving as you expect it to.

1 Like
8

Thanks MTF,

I will take your suggestion and use .

Regarding the continuous loop - Iā€™m not trying to create a continuous loop. Iā€™ve added some additional details to help explain what iā€™m trying to do.

If you donā€™t mind checking them out, Iā€™d be happy to hear what you think.

There is an illustration, some website links showing the kind of slideshow iā€™m hoping to create, and the horizontally scrolled stacking effect i want to use.

Thanks!

1 Like
9

Thanks MT!!

I havenā€™t tried your suggestions yet. I will do that shortly. I just logged in to add the additional info.

I will see what I can do and update everything soon!!

Thanks!

10

Having had another look at the link you posted, I saw that the slider you posted in your first link ā€“ what you want to achieve with css only ā€“ is built already with css only.
So, is zero-44 your account? And did you copy paste that code from another repo? Then you should at least add a link to the origin in the README and mention the source in a comment in the source code, I think.
Why do you want to restructure it? Is there anything you want to ad that cannot be added the way the code is structured?

11

Sorry for the delayed response. Iā€™ve been working overtime to get a couple days off after new year.

Even though I created an account on Github a few years ago, Iā€™m new to using it. Thanks for letting me know to provide links and references to the code Iā€™ve been using.

Unfortunately, I didnā€™t keep the links to the code used above. When I began working on creating my own website, I hadnā€™t been planning to share it in this kind of public way. Now that I know I will be doing that, I will begin to keep track of the Code Iā€™m using and provide links to the sources on my GitHub pages.

Thank you for making me aware of this!!! Itā€™s kinda obvious, and I should have known better.

Iā€™ve just created a new webpage with updated code.

https://zero-44.github.io/projekt_three/

The tutorials I used in creating this site are all noted on my GitHub pages.

Click on: projekt_three

12

Iā€™m a little lost right now: The slider you originally posted is already doing what you wanted, right? So what do you want to do now and what is the matter with the code you posted now?

13

I like the code Iā€™m using in the updated site @ projekt_three.

If you scroll down to ā€œCard 5ā€, there is a slideshow. Currently, that slideshow sits in the middle of the page. I will be increasing the size of this slideshow container to be nearly the same size as the ā€œcardā€ that it sits on. What Iā€™m struggling with now is figuring out how to make this slideshow responsive so that it shrinks and expands depending on the size of the browser. The Stacking Cards shrink and expand, but the slideshow doesnā€™t.

14

I wouldnā€™t call it a slideshow. Itā€™s a container with a horizontal scrollbar.
Just use % rather than px for the containers to make it responsive.

15

I tried using % but it doesnā€™t work properly. I can create a new site with % to show what happens. Iā€™ll post it in an hour and link to it here.

16

You can also check this codepen for reference. Thatā€™s about what you described as what youā€™re aiming for, right?

1 Like
17

yes, that is what Iā€™m trying to achieve. Actually, I did something similar to this where the links to the images are in the CSS rather than the HTML - I can post this as well.

18

But I was hoping to keep the image linked in the HTML rather than the CSS.

19

Iā€™m going to spend some time looking through the link you just posted and trying to understand how I could integrate this option into my site. Iā€™ll post my updates later. Hopefully tomorrow.

Thanks again for all your suggestions and input!!!

1 Like
20

The only real benefit to having the IMG element in the HTML is that it has a better chance of being indexed by the search engines. If you goal is to not have them indexed, then leave them as background images in the CSS.