Hero Carousel Sizing [approved]
This page is a demo utilizing the default hero carousel in Atlas with an innovation component to manipulate the CSS of the hero carousel. There are no external scripts or coding, ONLY CSS.
❌ Using Atlas As-Is
The hero carousel below has NOT been manipulated by CSS and this is the default styling of Atlas.
This is the title for Slide 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras placerat dui non libero cursus tristique.
This is the title for Slide 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras placerat dui non libero cursus tristique.
- Slide 1
- Slide 2
✅ Using an Innovation Component
This hero carousel has an id of "custom-hero-carousel". The hero carousel below has been manipulated by CSS in the innovation component at the bottom of this page. Only hero carousels contain the text "custom-hero-carousel" in their id are affected.
This is the title for Slide 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras placerat dui non libero cursus tristique.
This is the title for Slide 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras placerat dui non libero cursus tristique. Vestibulum porttitor diam a augue iaculis molestie. Sed est nisl, mollis ac mollis laoreet, tincidunt nec erat. Cras vitae mauris interdum, iaculis ex non, posuere enim.
- Slide 1
- Slide 2
What has been done?
- The min-height of the image has been reduced from 100vh
- On small screens, the height has been adjusted to 80vh/ 80% of the height of the viewport instead of 100%
- The arrow background has changed from gray to black
- The carousel indicators have subtle animation
CSS Breakdown:
Alternative Multi-image Layout
- Slide 1
- Slide 1