A simple HTML/CSS based content well with inertial scrolling suitable for integrating into a CMS to create a dynamic scrolling div that's touch-friendly and desktop compatible.
Tested for compatibility Chrome, Safari, FF, IE8+, Android and mobile Safari.
Example: http://bl.ocks.org/tvachon/11263018
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <head> | |
| <style> | |
| body {font-family: helvetica, arial, sans-serif;} | |
| a {text-decoration: none;} | |
| .window { | |
| margin-top: 12px; | |
| overflow-y: hidden; | |
| overflow-x: hidden; | |
| -webkit-overflow-scrolling: touch; | |
| position: relative; | |
| margin-bottom: 20px; | |
| background-color: #f5f5f5; | |
| border: 1px solid #e3e3e3; | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| border-radius: 4px; | |
| -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); | |
| -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); | |
| box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); | |
| /* fixes scrolling in IE */ | |
| padding-left: 0; | |
| padding-right: 0; | |
| } | |
| .ie8 .window { /* assumes you are using conditional classes for IE fixes (http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/) */ | |
| padding-top: 0; | |
| padding-bottom: 0; | |
| } | |
| .slider-frame-wrapper{ | |
| overflow: hidden; | |
| overflow-x: scroll; | |
| } | |
| .slider-frame { | |
| overflow: visible; | |
| margin-bottom: 0; | |
| white-space: nowrap; | |
| } | |
| .ie8 .slider-frame { | |
| margin: 20px 0; | |
| } | |
| .slider-panel { | |
| max-width: 270px; /* width of each individual items */ | |
| display: inline-block; | |
| vertical-align: top; | |
| margin-right: 40px; | |
| white-space: normal; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- =Slider Module= --> | |
| <div class="well window"> | |
| <div class="slider-frame-wrapper"> | |
| <ul class="slider-frame"> | |
| <li class="slider-panel"><div>Overline</div><h2><a href="#" alt="alt text">Headline text here</a></h2></li> | |
| <li class="slider-panel"><div>Overline</div><h2><a href="#" alt="alt text">Headline text here</a></h2></li> | |
| <li class="slider-panel"><div>Overline</div><h2><a href="#" alt="alt text">Headline text here</a></h2></li> | |
| <li class="slider-panel"><div>Overline</div><h2><a href="#" alt="alt text">Headline text here</a></h2></li> | |
| <li class="slider-panel"><div>Overline</div><h2><a href="#" alt="alt text">Headline text here</a></h2></li> | |
| <li class="slider-panel"><div>Overline</div><h2><a href="#" alt="alt text">Headline text here</a></h2></li> | |
| <li class="slider-panel"><div>Overline</div><h2><a href="#" alt="alt text">Headline text here</a></h2></li> | |
| <li class="slider-panel"><div>Overline</div><h2><a href="#" alt="alt text">Headline text here</a></h2></li> | |
| <li class="slider-panel"><div>Overline</div><h2><a href="#" alt="alt text">Headline text here</a></h2></li> | |
| <li class="slider-panel"><div>Overline</div><h2><a href="#" alt="alt text">Headline text here</a></h2></li> | |
| </ul><!-- .slider-window-frame --> | |
| </div><!-- .slider-window-frame-wrapper --> | |
| </div><!-- .well .window --> | |
| <!-- =End Slider Module= --> | |
| </body> | |
| </html> |