jQuery News Slider - sliding news

News Slider is a small but interesting jQuery JavaScript library plugin that allows you to control the display of a large amount of news on a site with limited space for displaying it.

Example: Reindel

We need to include only two files in the HEAD section of the page: the jQuery library jquery-1.2.3.js and the plugin file jquery.accessible-news-slider.js
')




The JavaScript code of this plugin has certain requirements for the organization of the HTML code for news and its styling, so we will analyze these points in some detail and begin with the HTML code.


...



Every single news item is a DIV element with the class names item and fl. Inside this element may contain images, links, text. You can change the style of these elements, but not change the names of the classes, because the plugin uses them.



All DIV elements containing news are in turn enclosed in a DIV with the names of the classes container and fl.




All this is again enclosed in a div with the name of the class news_items. Used to organize the hide and show the entire contents of the news block.




Elements A contain pictures that control the forward and backward movement of news.


And finally, all this together is again enclosed in a DIV with the name of the class news_slider, because there may be several such news blocks on the page.

This is such a rather complicated hierarchy, but such is the will of the author.

I will not give the entire style sheet, I will only mention those points that need to be addressed.

.fl {
float:left;
display:inline;
}

The fl class selector includes a block in the floating model, shifting it to the left using the float property and changing the representation of the block element using the display property to get the ability to display the DIV elements in a single line horizontally.

.news_slider .item {
/* !

width
margin-right. */
width: 170px;
margin-right: 10px;
}
An important point, because if you do not determine the width of the block of news, JavaScript-code simply can not calculate the distance to move.

.news_slider .news_items {
/* !

.item ((width +
margin-right) * 2) */
position: relative;
width: 360px;
top: 0;
left: 20px;
overflow: hidden;
}

Why exactly? Just like that the author of the plugin found it necessary. The width is determined so that two news items are visible at the same time. In principle, you can fix it with 3 or for example with 1, but then you will have to make corrections to the JavaScript code, since the author stopped at the version of two news, having rigidly defined it in the code.

It remains to analyze only the last stage - the inclusion of the code in the page, which actually causes News Slider.



Here is a small set of options. It is clear that newsHeadline is the headline of the news block, and newsSpeed ​​is the speed at which the news “slides”. It can be still fast and slow, or just an integer.

Ist. # 1 | Ist. # 2