A responsive, vertical news slider with jQuery and CSS3

A vertical news slider with jQuery and CSS3 – a nice and clean content slider, built with jQuery and CSS3.

Vertical news slider made using jQuery and CSS3

This solution is a responsive, jQuery-based vertical news slider. It displays headlines on the left along with a preview image and brief description on the right. Nice transition effects when switching the headlines.

jQuery and CSS3 - vertical news slider solution
jQuery and CSS3 – vertical news slider solution

Setup and customizations

To install, just include the CSS file along with jQuery and the vertical.news.slider.js or vertical.news.slider.min.js files. Then define the structure (see the demo).

Also, the expanded JavaScript file has lots of comments in it to indicate what everything does, so we can fiddle around with those if we want to change anything.

Note: use jQuery 1.8 or newer.

License: MIT

Demo:

http://javascript-html5-tutorial.net/demos/vertical-news-slider-master

GitHub:

https://github.com/impressivewebs/vertical-news-slider

See also:

vTicker – jQuery vertical news ticker

JCoverflip – jQuery image slider

Awesome CSS and jQuery slide in panel

AnythingSlider – a powerful and responsive jQuery slider plugin

Accelerometer-enabled and responsive jQuery slider plugin

Sly scrolling plugin – a lightweight, one directional slider

Enjoy!

Share:Share on Facebook6Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1