Close

Image Carousel

This is an example of a bootstrap web form with an image carousel feature, designed using JavaScript, CSS, bootstrap framework 4 and HTML. The images and bootstrap styles are imported to the code with their URLs, whereas the carousel feature had been implemented using JavaScript. The body of the form is given a background color of #eaeaea and height and width as 100%. The carousel is given a max-width and a max-height of 900px, and 550px. Carousel item image has the styles of width as 60%, height as 100%, align-self as flex-end, transform as translateX (100%), and transition as 0.6s all ease-in-out. The title of the item has the styles of margin as 15px 0 0 0, font-family as 'Playfair Display', serif, font-size as 44px, line-height as 45px, letter-spacing as 3px, font-weight as 700, color as #2C2C2C, transform as translateY(25%), and a transition of 0.6s all ease-in-out. The subtitle of the item is again given a style set of font-family as 'Open Sans', sans-serif, letter-spacing as 3px, font-size as 10px, text-transform as uppercase to automatically convert the text to uppercase, color as #7E7E7E, font-weight as 700, transform as translateY(25%), and transition as 0.4s all ease-in-out. The cursor style is set as pointer for the arrow button to get the hand cursor effect. Source: https://codepen.io/Jpozo/pen/eYmMgPG

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Several Related Snippets

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.