A responsive Slider with CSS3 and JavaScript- Prototyping a responsive slider for tablet and desktop with CSS3 and JavaScript.
Publié par Claire Sosset 
Manage the layout, in portrait and landscape mode :
With media queries, we can easily manage a responsive layout using some breakpoints like 480px, 968px, 1024px...
In this exemple of media queries, we can add specific styles when the browser is largest or egal to 768px.
@media only screen and (min-width: 768px) {
/* Style adjustments for viewports 768px and over go here */
}
We can also add specific css styles when the viewport is in landscape or portrait mode.
@media only screen and (max-width: 768px) and (orientation:portrait) {
}
These exemples are applied in the desktop and tablet version, but sometimes, we want target only a device.
In our responsive slider, the previous and next buttons are useless in the tablet version.
Media queries permit us easily to target the device by its dimensions.
For that it's simple just replace the "max-width" by "max-device-width" :
@media only screen and (max-device-width: 768px) {
.prev-next-item { display:none;}
}
Replace the desktop navigation with the use of touch events for the tablet:
In Javascript, there are some equivalents between mouse events and touch events.
mousedown = touchstart
mousemove = touchmove
mouseup = touchend
The only test we have to do is to detect when the user use a touch device :
if ('ontouchstart' in window) {
//code
}
Conclusion
So, by combining CSS3 and JavaScript we can easily adapt our content to mobile device.
check the demo here : http://www.octaveoctave.com/html5/demo/responsive-slider (iPad or computer)
For further informations :
- Developing for Multi-Touch Web Browsers : http://www.html5rocks.com/en/mobile/touch.html
- Responsive web design : http://www.alistapart.com/articles/responsive-web-design/