The simplest vertical scrolling carousel EVER 🔗 **Source:** [The simplest vertical scrolling carousel EVER](https://www.youtube.com/watch?v=_YlVVcQN1sU) > [!note]+ Document Notes > tags: [WordPress, Elementor, Frontend] > author: [MISSING] > source: YouTube > reference: [https://www.youtube.com/watch?v=_YlVVcQN1sU] > date created: > > # 🏷️ Title: The simplest vertical scrolling carousel EVER > <!-- deep-read:sections start --> ## 🧰 Action Inbox - [H1] Draft container checklist — https://www.youtube.com/watch?v=_YlVVcQN1sU&t=26 #xref - [H2] Provide width presets (5%, 10%, 15%) — https://www.youtube.com/watch?v=_YlVVcQN1sU&t=112 #articleseed - [H5] Add “scroll container” linter step — https://www.youtube.com/watch?v=_YlVVcQN1sU&t=260 #addendum - [H6] Validate identical image counts per column — https://www.youtube.com/watch?v=_YlVVcQN1sU&t=300 #xref - [H7] Expose height control UI (vh/px) — https://www.youtube.com/watch?v=_YlVVcQN1sU&t=391 #articleseed - [H8] Ship mobile breakpoint defaults — https://www.youtube.com/watch?v=_YlVVcQN1sU&t=578 #share - [H9] Note perceived vs real speed in docs — https://www.youtube.com/watch?v=_YlVVcQN1sU&t=597 #addendum - [H10] Offer multi-column patterns library — https://www.youtube.com/watch?v=_YlVVcQN1sU&t=540 #articleseed ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - Elementor Flexbox Container (help page). https://elementor.com/help/flexbox-container/ *(If inaccessible, rely on video instructions.)* - Elementor HTML widget. https://elementor.com/help/html-widget/ *(If inaccessible, rely on video instructions.)* - MDN — CSS viewport units (vh). https://developer.mozilla.org/en-US/docs/Web/CSS/length - MDN — object-fit. https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit - MDN — Media Queries. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries - Video: The simplest vertical scrolling carousel EVER. https://www.youtube.com/watch?v=_YlVVcQN1sU ## 📝 Summary - The video shows a vertical carousel pattern in Elementor. - The layout uses one parent container and three child columns. - A subchild holds images and carries a required class. - JavaScript controls height, image count, and speed. - Mobile styles adjust height with a media query. - Bottom line: keep counts consistent, set height, and add classes. ## 📖 Main Content - The presenter builds a full-height vertical carousel. - A single parent container sets width and height. - Three child containers hold “scrolling” columns. - Each child contains a subchild with images. - The subchild requires a `scroll container` class. - A small script manages height, item count, and speeds. - Columns alternate direction, then reverse at bounds. - Mobile behavior uses a 300px column height override. - Perceived speed differs on small screens, but timing stays constant. - These choices fit Elementor users needing a simple pattern. ### 🗒️ Notes #### ⏱️ [00:00:26](https://www.youtube.com/watch?v=_YlVVcQN1sU&t=26) Structure overview ### [H1] Vertical carousel uses one parent container > [!quote] [The simplest vertical scrolling carousel EVER](https://www.youtube.com/watch?v=_YlVVcQN1sU) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed . > “This all sits inside of one parent container.” A single wrapper simplifies sizing and overflow. [view highlight](https://www.youtube.com/watch?v=_YlVVcQN1sU&t=26) #xref ID:rw_[MISSING] #### ⏱️ [00:01:52](https://www.youtube.com/watch?v=_YlVVcQN1sU&t=112) Column sizing ### [H2] Columns start with 10% width each > [!quote] [The simplest vertical scrolling carousel EVER](https://www.youtube.com/watch?v=_YlVVcQN1sU) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed . > “This child container is set to be 10%.” Use presets; tune per image aspect ratios. [view highlight](https://www.youtube.com/watch?v=_YlVVcQN1sU&t=112) #articleseed ID:rw_[MISSING] #### ⏱️ [00:02:52](https://www.youtube.com/watch?v=_YlVVcQN1sU&t=172) Direction classes ### [H3] Outer columns begin scrolling upward > [!quote] [The simplest vertical scrolling carousel EVER](https://www.youtube.com/watch?v=_YlVVcQN1sU) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed . > “They will start moving up.” Alternate directions for a pleasing cadence. [view highlight](https://www.youtube.com/watch?v=_YlVVcQN1sU&t=172) #xref ID:rw_[MISSING] #### ⏱️ [00:03:12](https://www.youtube.com/watch?v=_YlVVcQN1sU&t=192) Reversal behavior ### [H4] Scroll reverses after showing all images > [!quote] [The simplest vertical scrolling carousel EVER](https://www.youtube.com/watch?v=_YlVVcQN1sU) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed . > “When the images get all the way to the top, they kind of reverse and go back down.” Bidirectional motion avoids dead ends. [view highlight](https://www.youtube.com/watch?v=_YlVVcQN1sU&t=192) #xref ID:rw_[MISSING] #### ⏱️ [00:04:20](https://www.youtube.com/watch?v=_YlVVcQN1sU&t=260) Required class ### [H5] Subchild needs “scroll container” class > [!quote] [The simplest vertical scrolling carousel EVER](https://www.youtube.com/watch?v=_YlVVcQN1sU) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed . > “Ensure that every subchild has the class name of scroll container.” Missing the class breaks motion entirely. [view highlight](https://www.youtube.com/watch?v=_YlVVcQN1sU&t=260) #addendum ID:rw_[MISSING] #### ⏱️ [00:05:00](https://www.youtube.com/watch?v=_YlVVcQN1sU&t=300) Count consistency ### [H6] Keep image counts identical per column > [!quote] [The simplest vertical scrolling carousel EVER](https://www.youtube.com/watch?v=_YlVVcQN1sU) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed . > “Make sure you got a consistent number.” Mismatched counts create gaps and awkward resets. [view highlight](https://www.youtube.com/watch?v=_YlVVcQN1sU&t=300) #xref ID:rw_[MISSING] #### ⏱️ [00:06:31](https://www.youtube.com/watch?v=_YlVVcQN1sU&t=391) Height requirement ### [H7] Code requires an explicit container height > [!quote] [The simplest vertical scrolling carousel EVER](https://www.youtube.com/watch?v=_YlVVcQN1sU) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed . > “You got to set a height.” Use vh or px so bounds and rebound work. [view highlight](https://www.youtube.com/watch?v=_YlVVcQN1sU&t=391) #articleseed ID:rw_[MISSING] #### ⏱️ [00:09:38](https://www.youtube.com/watch?v=_YlVVcQN1sU&t=578) Mobile override ### [H8] Mobile media query sets column height > [!quote] [The simplest vertical scrolling carousel EVER](https://www.youtube.com/watch?v=_YlVVcQN1sU) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed . > “I actually want the column height to only be 300 pixel.” Expose breakpoints for predictable small-screen behavior. [view highlight](https://www.youtube.com/watch?v=_YlVVcQN1sU&t=578) #share ID:rw_[MISSING] #### ⏱️ [00:09:57](https://www.youtube.com/watch?v=_YlVVcQN1sU&t=597) Perception vs reality ### [H9] Perceived speed differs; timing stays constant > [!quote] [The simplest vertical scrolling carousel EVER](https://www.youtube.com/watch?v=_YlVVcQN1sU) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed . > “It is exactly the same speed.” Document timing to reduce confusion. [view highlight](https://www.youtube.com/watch?v=_YlVVcQN1sU&t=597) #addendum ID:rw_[MISSING] #### ⏱️ [00:09:00](https://www.youtube.com/watch?v=_YlVVcQN1sU&t=540) Pattern variations ### [H10] Add more columns and alternate directions > [!quote] [The simplest vertical scrolling carousel EVER](https://www.youtube.com/watch?v=_YlVVcQN1sU) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed . > “You can be as creative as you want.” Provide recipes for common layouts. [view highlight](https://www.youtube.com/watch?v=_YlVVcQN1sU&t=540) #articleseed ID:rw_[MISSING] ## 📚 References - Elementor Flexbox Container. https://elementor.com/help/flexbox-container/ - MDN: CSS length units (vh). https://developer.mozilla.org/en-US/docs/Web/CSS/length - MDN: object-fit. https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit - MDN: Using Media Queries. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries - Video: The simplest vertical scrolling carousel EVER. https://www.youtube.com/watch?v=_YlVVcQN1sU ## 🗣️ Paraphrase - The guide builds a simple vertical carousel using Elementor containers and a small script. - Consistent image counts, clear heights, and required classes keep the effect stable. ## 📰 Newsletter - Want a vertical carousel without heavy plugins? This walkthrough shows a lean Elementor pattern. - Use one container, three columns, and a tuned script. Control height, speed, and image counts. - Add a mobile override and a subtle gradient mask for polish. - References: Elementor container docs and MDN on vh, object-fit, and media queries. ## ✅ Action Items #### DevRel - Publish a starter template with commented JS and CSS. - Record a five-minute “gotchas” clip on counts and height. - Add a CodePen replicator for testing directions and speeds. - Track examples from agencies; feature best patterns. #### OSPO - Document third-party JS license headers in snippets. - Add contribution guidelines for pattern libraries. - Provide review checklists for accessibility and performance. - Create a provenance note for shared demo assets. #### Community - Run a pattern clinic on Elementor layouts. - Collect friction points from beginners and mentors. - Share “before/after” mobile behavior screenshots. - Maintain a gallery of safe speed presets. #### WordPress - Training: add a lab on vh sizing and media queries. - Documentation: note `object-fit: cover` tradeoffs for images. - Accessibility: provide focus and pause guidance for motion. - Performance: recommend image compression and lazy strategies. #### The WPOCC - Microgrant an open demo with tests and docs. - Fund an audit template covering motion and inputs. - Publish a transparency note on demo assets. ### FAIR - Add a policy for demo asset provenance and signatures. - Provide a scorecard for pattern reuse and maintenance. - Ship operator agreements for pattern repositories. ## 🧪 Hypotheses - Consistent image counts reduce visible gaps during reversals. - Explicit vh heights cut layout jumps across devices. - A gradient mask improves perceived smoothness for most users. - Mobile 300px default reduces scroll fatigue. - Direction alternation increases perceived visual balance. ### 📊 Methodology - Run A/B tests comparing equal vs unequal counts. - Measure CLS and scroll stutter with and without explicit height. - Survey users on mask vs no-mask preference. - Track engagement for 300px default vs dynamic vh. - Use eye-tracking to compare direction patterns. ### ❓ Questions - What count range balances smoothness and payload size? - Do fixed px heights outperform vh on tall phones? - Which reversal easing feels least jarring? - How many columns remain readable on tablets? ### 🔮 Future Research - Explore infinite scroll without reversal artifacts. - Add keyboard and pause controls for motion sensitivity. - Integrate IntersectionObserver for smarter timing. - Provide RTL-aware direction presets. ### 💡 Implications - Small, documented patterns beat heavy carousels. - Clear constraints prevent surprise behavior. - Mobile defaults matter more than desktop polish. - Accessibility-first motion improves trust and adoption. ### 🧠 Learning Styles Assessment - Reading level estimate: Grade 9–10, Flesch-Kincaid. #### 👀 Visual learners - Present: container hierarchy visuals implied. - Improve: explicit diagrams of parent/child/subchild. #### 🔊 Aural learners - Present: narrated walkthrough. - Improve: 3-minute audio summary with tips. #### 🗣️ Verbal learners - Present: stepwise explanations. - Improve: a glossary for vh, px, and object-fit. #### 🧩 Kinesthetic learners - Present: hands-on build in Elementor. - Improve: sandbox with adjustable controls. #### 🧠 Logical learners - Present: parameterized speed and counts. - Improve: a decision table for presets. #### 🧑‍🤝‍🧑 Social learners - Present: community sharing invitations. - Improve: peer review prompts and checklists. #### 🧘‍♀️ Solitary learners - Present: self-paced replay. - Improve: reflection questions and quick quizzes. #### 🌿 Naturalistic learners - Present: not applicable. - Improve: none required for this topic. ### 📊 Accessibility Assessment #### Screen reader semantics - Present: headings in this note. - Improve: alt text and labels in the demo. #### Keyboard navigation - Present: default browser controls. - Improve: pause/stop buttons and focus order. #### Contrast and readability - Present: gradient mask option. - Improve: ensure 4.5:1 text contrast near images. #### Text resizing and reflow - Present: responsive containers. - Improve: validate at 200% zoom and reduced motion. #### Media and captions - Present: YouTube captions likely available. - Improve: downloadable transcript with code snippets. #### Forms and interactions - Present: none in demo. - Improve: large targets for pause/controls. #### Standards reference - Map gaps to WCAG 2.2 AA criteria. ### 🌍 DEIB Assessment #### Cultural breadth - Present: platform-agnostic techniques. - Improve: multilingual captions and subtitles. #### Inclusive language - Present: plain phrasing. - Improve: define Elementor-specific terms. #### Neurodiversity support - Present: chunked steps. - Improve: predictable patterns and icon+text labels. #### Representation - Present: neutral technical content. - Improve: inclusive examples and diverse imagery. #### Psychological safety - Present: respectful teaching tone. - Improve: community guidelines for feedback. ### ✅ Logical Validity #### Strong reasoning - [H7] Setting height explains bounds and rebounds. Clear causal link. - [H6] Equal counts prevent gaps. Practical and testable. - [H9] Timing equals speed across devices. Good clarification. #### Fallacies - [H3] “Upward first” may imply necessity. Rephrase as preference. - [H10] “Be creative” is vague. Provide concrete presets. #### Tone of voice - Practical, confident, and instructional. Encourages experimentation. ### 🛡️ DARVO Analysis - Deny: none observed. - Attack: none observed. - Reverse victim/offender: none observed. - The content remains technical and neutral. ## 🎯 Conclusion - The pattern works with minimal code and clear constraints. - Set height, align counts, and apply the required class. - Document mobile overrides and perceived speed differences. - Tag Coverage — #articleseed: 3 • #xref: 2 • #share: 1 • #bmf: 0 • #addendum: 2 ## 🧱 Refactor Appendix (append after 🎯 Conclusion) ### 📚 Literature Split Pad - Purpose: Stage Konik CEE units that become per-source Literature notes. - Split level: **H3**. - Include verbatim quotes under 25 words and a [view highlight] link. ### [H1] Parent container defines carousel height and bounds > [!quote] [The simplest vertical scrolling carousel EVER](https://www.youtube.com/watch?v=_YlVVcQN1sU) by an unnamed author via [[YouTube]]. Published [MISSING]. Accessed . > “You got to set a height.” Two lines: height enables timing and reversal. Note vh vs px tradeoffs. [view highlight](https://www.youtube.com/watch?v=_YlVVcQN1sU#H1) #xref #articleseed ID:rw_[MISSING] ### [H2] Subchild requires scroll container class to work > [!quote] [The simplest vertical scrolling carousel EVER](https://www.youtube.com/watch?v=_YlVVcQN1sU) > “Ensure that every subchild has the class name of scroll container.” Two lines: missing class disables motion entirely. Add linting. [view highlight](https://www.youtube.com/watch?v=_YlVVcQN1sU#H2) #xref ID:rw_[MISSING] --- ### 🔖 Atomic Split Pad (Zettel Candidates) - Purpose: Promote reusable claims into Atomic notes. - Split level: **H4**. - Each item: one idea, present tense, specific, testable. #### [Z1] Equal image counts prevent carousel gaps - Holds when columns share identical counts. - Pointer: 00:05:00. - Links: [[Elementor-Pattern]] [[Carousel-Design]] #### [Z2] vh heights stabilize vertical carousel timing - Holds when container height is explicit. - Pointer: 00:06:31. - Links: [[CSS-Viewport-Units]] [[Elementor-Container]] --- ### ✏️ Fleeting Queue (Extract by Selection) - Purpose: Capture quick actions or sparks for Fleeting notes. - Extraction: **Select one line** → “Refactor: Extract selection to new note (content only).” - Keep each line short and self-contained. - [F1] Build starter template with presets — context/https://www.youtube.com/watch?v=_YlVVcQN1sU #fleeting #inbox - [F2] Add accessibility guidance on motion — context/https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries #fleeting #inbox - [F3] Create troubleshooting guide for class and count — context/https://www.youtube.com/watch?v=_YlVVcQN1sU #fleeting #inbox --- <!-- deep-read:sections end --> ## 📺 Video ![](https://www.youtube.com/watch?v=_YlVVcQN1sU) --- # 📄 Full Transcript *Auto-generated from YouTube captions · timestamps roughly every 30 seconds · [watch on YouTube](https://www.youtube.com/watch?v=_YlVVcQN1sU)* **[00:00]** Adding a vertical scrolling carousel for your images inside Elemental could not be easier. Now, I'm showing you one that is 100 VH, so it's full height of the screen, but you could set this up to be 50 VH or 300 pixels high. And I've refined the code for this to make it even better for your mobile. Let's go and explore how this was built. Believe me, I'm not lying about how simple and easy this is. This all sits inside of one parent container. This parent container has been set to be 100% **[00:31]** in width and 100 VH, but you could have refined it to be 50 VH or 300 pixels high. That's totally okay. So, it doesn't have to be a full height container. So, it might be part of your hero banner or it could be somewhere else on your page. And you have so much control. Now, if anyone watching this says there's a lot of repeated images, that's just because I just repeated the images just to fill out what I was showing over here. But I will talk to you more about that in a moment. This parent container is set as a row and it **[01:02]** is set to wrap as well. You don't have to go for wrap, but I just want to show you that it will still work. I've got everything justified to the left. And I've got a gap of 12. Now, inside of this parent container, we actually have four child containers. We have child one, child two, child three, and we have a text container. That's just this container over here. Currently set to be 36%. You can stick what you want into there. Headline, text editor, call to action, button. It's these three child containers that are important. Now you will also notice that in the parent **[01:33]** container I have a HTML script. We will come back to this because this is important for your gradient uh your number of images, how big it will be and what the speed is. Now let's just focus on the child containers and then we'll go back to that code because it is important. This child container is set to be 10%. child one, child two, and child three. They are all 10%. You can make them wider if you want. You can make it full width if you want, depending on the size of your images. **[02:04]** I've got it set to be 10%, which I think looks pretty okay when you're looking on the screen. So, don't be fooled by thinking 10%'s quite small. It actually works really well. Now, inside of here, we have another sub subchild container. You might think, aren't we overusing containers? To get this effect to work, this is what you got to do. So, let me just backtrack, right? Keep it simple. Parent container. Inside of there, we have a child container. Inside of the child container, we have a subchild. And then inside of the subchild is where **[02:35]** I've gone and added in my images. Now, let's just stay on the child container. This is set to be 10%, you go to the style tab, there's nothing really happening. What I have done, though, is given it a class name. So child container one and child container number three are currently set to be up. So they will start moving up. But child container number two, if we go to the advanced tab, that is set to be down. And what that means is it starts as it's moving downwards. Now you will notice, **[03:07]** and I hope you've picked up on this, the longer you're staring at the screen, is that when the images get all the way to the top, they kind of reverse and go back down. So even though it starts as up, if you've got 20 images, once it's shown all 20, it will then start to come down. And the middle one that was going down, when it is now shown all 20 images, it will reverse back up. Some of you would love an infinite scrolling effect. I could not crack that. And believe me, what I'm going to show you is really easy and simple. Okay, so far **[03:37]** nothing I've shown you should be too difficult to comprehend. We've got three child containers. just give the outer ones the class name of up, the middle one down. But you could have it the other way round and have down on the outer ones and up in the middle because it's going to reverse anyway. Now, inside of each child container, we have a subchild. The subchild is currently just set to be 100%. Because our child container is set to be 10%, but I want the subchild inside to be 100% of the child. So if my child is that big, I **[04:09]** want the subchild inside to be 100% of that particular size. There's no need to set any margins or padding. But what you must do is ensure that every subchild has the class name of scroll container. So if I go to the middle child and I expand on that and I go to the subchild, if you go to the advanced tab again, we have scroll container. If you don't add that, it just won't work. So, oop down in the middle or you could swap it around and then make sure your subchild **[04:41]** inside is a scroll container. Okay, you with me so far? And then inside of each of the subchilds, and I'll just expand on that and show you. And if I do it to this one as well, you'll see we just got loads of images. Now, I have purposely put 10 images into each subchild because our code must relate back to that number. So if you stick five, remember you did five and you got to make it consistent. Don't do five images, five images, and four images. You got to make **[05:11]** sure you got a consistent number. So inside of here, I've got images. And the images are literally just images, right? And I haven't done anything. I've given them a bit of a border radius. So if you want to give your some of your images a border radius, you can control and do that. And there's no class name. There's no margin padding. I've just left it as it is. It's got your child container which is up or down, your subchild which is scroll container and then inside of it I just put in loads of images. Okay, that's what you do. Now then let's go to **[05:42]** the HTML code because this is controlling the magic. This bit of code might look a little bit complex but there's only a few things you need to alter. I'll link to this improved version of a code that I released oh about a year ago now. I've gone and improved it a little bit just to make it better for your mobile experience, but this code is going to serve you really, really well. All you've got to do is make sure you now reflect the values you are using elsewhere. So, when I set up my parent container, I set it up to be **[06:15]** 100 VH. And that is why I've got this value in over here. So, if my parent container was 50 VH, put 50 in there. If your parent container was 400 pixels high, go and stick 400 pixels there. You got to set a height. Otherwise, it needs to know when it starts and ends and rebounds and all of that. I then said my image height is 200. So, if I was to now go and change this to be something like, let's go and pop in 20. You can now see **[06:45]** the images are ridiculously small. We've got this massive space up and below because you got to think logically about if I want this now to be 100 VH and I've got 10 images and I've gone and set them to be 20 pixel or 5VH, is it really going to fill that entire estate? So, I've gone and set them to be 200. Now, I hope you've noticed that there is a bit of a white gradient there above and below and it creates this kind of like masking effect slightly. So it looks like the images are appearing and then **[07:16]** they're fading out. Now if you don't like that, you can get rid of this entire bit over here. And if you do that, you will now get this fullon flat effect. So now it's not fading in and out at the top. It just looks like well basically some people like that effect. The reason why the fade in effect can work for you really well is if I go to my parent container and I now set my background to say be a dark color like this. Can you see how the fade works really, really well? Not so much with **[07:46]** white, but that very much depends on your images. If your images are very faded or saturated, then the white can work well. To be honest, it's all down to your subjective preference over what you want to go for. So, we've covered the top bit. Now, the middle bit over here is where we control the speed. So, the ones that start off as going up, it will take them 25 seconds to go from the first image to the temp. That might feel slow, but believe me, you don't want to have it like going up and down too quick. Let me explain. If I was to go and set this now, the up to be two. Can **[08:18]** you see it's going to start rebounding and reversing? Now, when it rebounds, it does it in quite a smooth way, but it's going up and down quite a lot. If you were to go for 200, it's now still moving, but a much slower rate. But the one in the middle is moving faster. Why? Cuz it's still 25 seconds. So, I've given you a load of control inside of here. So, you could have your middle one going slower or faster than the outer ones. And don't forget, I added in three child containers. I could, if I want, add in another five and say up, down, **[08:51]** up, down, up, down, up, down, or down, down, down, up. You can be, you know, you can do what you want with this. You can be as creative as you want. That's how cool this is. And then we scroll down over here. This is where I'm setting the image. So this is now setting my width. It's setting my height and my object fit is cover over that. So you could if you want override that in the style tab, but just do it here. So once you drop your images in, the code will handle it and hopefully look good. Now this is where it controls how it's **[09:21]** moving. But again, you do not need to touch that. But the only other thing you might want to touch is the bottom. So even though I've gone and set what it will be for the desktop, I've got a bit of app media down here. And now I'm saying that I actually want the column height to only be 300 pixel. So if we go over to the mobile, you might have something that looks like this. Just bear in mind though, you are still applying 25 seconds from top to bottom. It might look like it's moving quicker, but don't be fooled by that. Look at the **[09:52]** speed of the desktop. It is exactly the same speed. Okay, look. Keep staring at the ones on the outer and the middle. It is the same speed, but because it's smaller, it might look like it's going quicker. So, if you feel like you actually want to make it taller. Well, I'll just show you. Look, let me make it be 30. That's now ridiculously small. If I go and make it be 500, you can now make it bigger. So, you have a bit of control over how big is your estate. You could, if you want, make this be 100 BH as well. So, what we're altering is this **[10:24]** bit over here. On the desktop, it's 100 VH. When we get down to maximum width of 500. So, anything below 500 width, that particular column now is 300 VH. If you want to add in further break points for your tablet, you can do. You might say that's still quite complex. I don't think it is. I think if you just work through that code and change the values I've mentioned about your speed or how big your container is, it is really, really simple because like I said, you got a parent container. You then added in some child containers like what we **[10:56]** have at the moment here. You go and set the width. Give them up, down, or whatever class name you want. It's pretty simple. Up, down, up, down. That's all you have to put in. You got your subchild container, scroll container. You make sure you pop that into every subchild. Then you stick your images in. But you must remember if you've got 10 images inside of there, make sure over here, and I think I forgot to mention it, please make sure that matches. is I'm just going to show you what would happen if I went and changed this to be 15. It will now be **[11:27]** expecting 15 images. So now you're going to get a gap build up because you haven't satisfied it with the number of images. Uh so what you want to do is make sure you go and stick that in. Play with it, make it work for you. I'm in web squadron and I hope you like the codes and things we're developing for your WordPress elemental websites. Like, subscribe, share, and follow. Go and join our YouTube channel for exclusive videos. Please go and check out our courses and guides. And of course, I'll see you soon. Take care. Bye. **[12:04]** [Music]