Coda Sliders
Coda Sliders are another way of displaying large amounts of content in a series of interchangeable panes. This one is particularly interesting because it has Next/Previous Navigation and if Javascript is disabled the result is a particularly graceful degrade. Various animation techniques can be aplied such as vertical scrolling, bouncing text, etc. Opinion only - why do all this when jQuery Tabs can be made to work so beautifully?
Although only containing text here, the panels can be adapted to contain table, images, videos, etc.
Panel 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et libero eget turpis laoreet imperdiet. Donec gravida. Maecenas eget orci. Vivamus tincidunt nibh. Ut vitae nisi id dui pharetra pellentesque. Sed id est. Praesent eu erat a ipsum posuere pulvinar. Pellentesque dui libero, ullamcorper sit amet, viverra ut, euismod ut, leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam et libero. Etiam enim nunc, venenatis vitae, aliquet eget, viverra quis, risus. Nullam enim purus, dignissim vitae, fermentum ac, tempus eget, velit. Curabitur tortor lacus, eleifend faucibus, egestas quis, porttitor eu, nunc. In in neque. In hac habitasse platea dictumst. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque sodales dolor at elit.
Panel 2
Suspendisse ac elit eget enim pharetra dignissim. Aliquam id justo a metus pellentesque aliquet. Nam fringilla, enim sed dictum pharetra, turpis velit facilisis arcu, sed pellentesque diam enim ut nulla. Mauris ac neque. Nam a nisl a nulla pulvinar tincidunt. Praesent odio dolor, tincidunt ut, ultricies vel, sollicitudin sit amet, velit. Aliquam accumsan libero ut massa rutrum pulvinar. Integer auctor pharetra tellus. Morbi dictum egestas dolor. Nullam dapibus, arcu ut dictum facilisis, est tortor faucibus augue, bibendum consectetur tellus felis lobortis quam. Praesent ac justo eu lorem sagittis venenatis. Aliquam erat nunc, facilisis et, dapibus venenatis, porttitor in, mi. Etiam commodo. Donec nunc sapien, laoreet at, placerat sed, imperdiet nec, ligula. Praesent consequat dapibus ante. Vestibulum lectus orci, porttitor ac, imperdiet nec, vestibulum eget, orci. Praesent tortor massa, congue ac, tempus quis, suscipit et, justo.
Panel 3
Phasellus sodales, tellus eget porttitor mollis, pede nisi feugiat nisi, sit amet molestie ipsum pede at pede. Maecenas erat leo, placerat eu, adipiscing ut, malesuada sed, nunc. Ut tincidunt ullamcorper felis. Integer pretium semper nibh. Nam venenatis luctus nibh. Phasellus euismod. Ut nisi dolor, auctor a, gravida vitae, egestas a, tortor. Maecenas pretium cursus mauris. Pellentesque tempor nisl hendrerit est. Suspendisse potenti. Donec et turpis ac dui rhoncus posuere.
Panel 4
In pretium lorem quis metus. Phasellus aliquam dictum lorem. Etiam tincidunt. Cras velit elit, convallis vitae, tristique in, varius ac, nisi. Vestibulum tincidunt, felis at mollis lobortis, quam diam adipiscing ipsum, id commodo neque pede sed augue. Duis nec nibh ut purus consectetur ultrices. Curabitur accumsan ornare odio. Vivamus facilisis odio a neque vulputate dignissim. Suspendisse iaculis quam ut eros. Sed nisi. Vivamus leo. Mauris consectetur mollis nunc.
Panel 5
In diam. Fusce hendrerit, turpis eu dictum hendrerit, augue massa suscipit lectus, non condimentum sapien sem tincidunt ante. Vivamus eu ipsum. Maecenas hendrerit adipiscing ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ante libero, venenatis dapibus, congue eu, sagittis sed, sem. In quis lectus vitae justo feugiat lobortis. Aenean commodo condimentum risus. Donec mauris. Nam eget arcu. Suspendisse sed neque. Integer velit urna, fermentum sed, laoreet in, feugiat in, nisi. Vestibulum ac lorem et arcu varius auctor. Nullam lobortis quam. Donec a ante ut felis ornare consectetur.
Panel 6
Etiam faucibus adipiscing augue. Nam congue nunc eget odio. Praesent elit diam, consectetur nec, rhoncus vitae, venenatis et, eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in diam vitae nisl lacinia rutrum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dignissim turpis eget nibh. Proin dictum feugiat nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lectus. Cras pharetra metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Mauris nulla arcu, sodales et, ullamcorper nec, gravida vel, nisl. Return to Panel 1
Panel 7
Aliquam non libero dignissim justo scelerisque dictum. Vivamus dapibus imperdiet elit. Suspendisse urna risus, vulputate ac, dapibus et, dictum hendrerit, libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Cras viverra arcu ac nunc. Sed tincidunt aliquam nibh. Duis mattis. Aliquam condimentum dolor posuere elit. Sed metus tellus, blandit vitae, mollis fringilla, pretium a, mi. Nam ultricies euismod elit. Aenean et ipsum. Curabitur non felis sed sapien molestie consequat. Pellentesque justo enim, imperdiet tristique, dignissim nec, adipiscing et, dolor. Curabitur a sapien. Proin molestie, justo in varius convallis, lectus risus laoreet dui, eu vestibulum tortor tellus in augue. Praesent tincidunt urna at metus.
Acknowledgements
This work relies heavily on the development work by Niall Doherty and is adapted from the article 'Coda Slider Effect' at jQuery for Designers .