Frontend meetup 2013 08-06
โข
1 likeโข558 views
The document describes how to build an inline-block carousel component in HTML and CSS. It explains how to structure the component with sections and lists, and style the list items as inline-blocks to create a line box effect for the carousel items. JavaScript can then be added to enable navigation between items by animating the position of the list to slide left and right. The document provides the full code for the component and encourages making it interactive by adding event handlers with plain JavaScript.
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to Frontend meetup 2013 08-06
Similar to Frontend meetup 2013 08-06 (20)
Recently uploaded
Recently uploaded (20)
Frontend meetup 2013 08-06
- 1. How I Learned to Stop Worrying and Love the inline-block by Robert Szaloki
- 6. The code <!DOCTYPE html> <html lang="en-us"> <head>...</head> <body> <section data-component="carousel"> <button data-carousel-nav="prev">⟨</button> <button data-carousel-nav="next">⟩</button> <ol> <li></li> <li></li> <li></li> โฆ </ol> </section> <hr> โฆ
- 7. The code <!DOCTYPE html> <html lang="en-us"> <head>...</head> <body> <section data-component="carousel"> <button data-carousel-nav="prev">⟨</button> <button data-carousel-nav="next">⟩</button> <ol> <li></li> <li></li> <li></li> โฆ </ol> </section> <hr> โฆ position:relative position:absolute; top:0; bottom:0; height:40px; margin:auto 0; width:40px; โฆ margin:0 40px;
- 11. Almost... <!DOCTYPE html> <html lang="en-us"> <head>...</head> <body> <section data-component="carousel"> <button data-carousel-nav="prev">⟨</button> <button data-carousel-nav="next">⟩</button> <ol> <li></li> <li></li> <li></li> โฆ </ol> </section> <hr> โฆ margin:0 40px; white-space:nowrap; overflow:hidden; transition:all 0.3s ease-in-out;
- 12. How will it move? <ol> width text-indent:-[<ol> width]px
- 14. Debug mode
- 15. But why? โ the <li> elements are now inline elements, so they create a line box
- 16. Line box? Line of text! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac gravida sapien. Nullam tristique congue pharetra. Nullam fringilla pulvinar ipsum in adipiscing. Donec porttitor justo tortor. Sed risus ipsum, porta ac dui vitae, faucibus bibendum purus. Integer congue scelerisque tristique. Line boxes <div> Lorem ipsum dolor sit amet, <b>consectetur adipiscing elit. Aenean ac</b> gravida sapien. Nullam tristique congue pharetra. <i>Nullam fringilla pulvinar ipsum in adipiscing.</i> Donec porttitor justo tortor. Sed risus ipsum, porta ac dui vitae, faucibus bibendum purus. Integer congue scelerisque tristique. </div>
- 17. Height of a line box inline-block <img> Text the tallest in the line or the line-height value vertical-align:top;
- 18. But why? โ the <li> elements are now inline elements, so they create a line box โ vertical-align:baseline means, the elements in a line box should align with the parents baseline
- 19. vertical-align โ baseline: align to the parents baseline โ top: top of the line โ middle: Aligns the middle of the element with the middle of lowercase letters in the parent. (???) โ <value> โ <percentage> โThe baseline of an 'inline-block' is the baseline of its last line box in the normal flowโ
- 20. But why? โ the <li> elements are now inline elements, so they create a line box โ vertical-align:baseline means, the elements in a line box should align with the parents baseline โ since the <p> is not in the rendering flow (because itโs floating) the current baseline is the baseline of the buttonโs text. โ only the inline blocks are in the parent, so they will align nicely
- 21. Uhm, wait! MIND THE GAP
- 22. <ol>n t <li>...</li>n t <li>...</li>n t <li>...</li>n </ol> I see white spaces! MIND THE GAP white spaces
- 23. HTML is data โ you are not programming in HTML โ itโs not a poem, itโs a structured, linked, semantic data โ donโt add white spaces, just for formatting โ the DOM is your target, not the View Source
- 25. Add interaction - Javascript Letโs see the code!
- 26. Add interaction - Javascript โ use event delegation โ use Event.currentTarget and Event.target โ use jQuery, but you donโt need jQuery plugins โ define behaviours