Editing a carousel involves replacing the placeholder images and text, but it can often be an exercise in frustration because carousels automatically start animating on page load. Learn the secret of halting the automatic animation to allow the carousel to be edited without interruption. Also, explore how to change the interval between animations and how to prevent a carousel from beginning its cycle until the user initiates the first transition.
- [Instructor] In the previous video,…we edited the carousel to display four images…instead of the default three.…Now, it's time to add the images…and captions, but at times this can feel like…a game of whack-a-mole because by default…carousels begin animating as soon…as the page loads, but there is…a simple trick to preserve your sanity.…In the DOM panel, make sure that you've…got the Carousel selected…and then go into Code view.…Let's just scroll down to find that carousel.…
There it is and in the opening div tag insert…your cursor anywhere and type data-interval…equals and then in quotes false.…Then save that.…Close the page…and reload it…and then we go back into Live view…and scroll down and find our carousel.…It's no longer animating.…That data interval equals false turns off…the automatic cycling so you can…now edit it in peace.…
So, to edit the images select the first…placeholder image, then use the element display…to access the Quick Property Editor.…Change the source of the image.…Make sure you're in the correct Site Root,…
- Defining a layout grid
- Inserting and modifying a navigation bar
- Adding a container for the page content
- Inserting a responsive image
- Resizing and duplicating columns
- Inserting fixed-size images
- Inserting cards
- Editing a carousel
Skill Level Intermediate
Design the Web: Responsive SVG Imageswith Chris Converse22m 46s Beginner
Bootstrap 4 Essential Trainingwith Ray Villalobos6h 32m Beginner
Bootstrap 4 Layouts: Responsive Single-Page Designwith Ray Villalobos3h 13m Intermediate
Designing Websites from Photoshop to Dreamweaverwith Sue Jenkins2h 27m Intermediate
What you should know1m 46s
1. Get Started
2. Create the Site Navigation
3. Add a Hero Image
4. Work with Rows and Columns
5. Edit Bootstrap Components
6. Complete the Design
Next steps1m 55s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.