Simple Content Slider using jQuery

Today I tried a content slider, with fixed pagination. I implemented this for something, which I would say after it is released. I could have simply used a plug-in, but due to some technical issues, and I too wanted to learn something, so I did it on my own.

I started with the HTML Markup, starting with two ULs. One holds the pagination and the other, content for the slides.

Starting with this HTML Markup, I moved on to the CSS and positioned the layout elements.

HTML
    [*][url=0] [*][url=1][/url] [*][url=2][/url] [*][url=3][/url] [*][/url]
    [*] [img]slides/background1.png[/img]

    Heading 1

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s!.
    [*] [img]slides/background2.png[/img]

    Heading 2

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s!.
    [*] [img]slides/background3.png[/img]

    Heading 3

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s!.
    [*] [img]slides/background4.png[/img]

    Heading 4

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s!.
    [*] [img]slides/background5.png[/img]

    Heading 5

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s!.
I had somewhat a hard time fixing the issues caused by our ancient Internet Explorer 7 and slightly modern Internet Explorer 8 browsers, so I had to meddle with their proprietary form of hacking and fixed them! The final CSS came this way:

CSS
.slider {padding: 0; height: 150px; position: relative; overflow: hidden;}
.slider .content-slides {position: absolute; top: 0; left: 0;}
.slider .content-slides li {width: 270px; height: 150px; position: relative; float: left;}
.slider .content-slides li img {width: 270px; height: 150px; display: block;}
.slider .content-slides li .desc {position: absolute; font-size: 90%; background: #999; background: rgba(0, 0, 0, 0.5); left: 0; top: 0; width: 100%; overflow: hidden; padding: 0 0 5px;}
.slider .content-slides li .desc * {color: #fff; width: 200px; margin: 5px 10px; line-height: 1.1em;}
.slider .content-pagination {text-align: right; position: absolute; bottom: 10px; right: 10px; z-index: 5;}
.slider .content-pagination li {float: none; display: inline; font-size: 0.75em; padding: 0.25em;}
.slider .content-pagination li a {width: 7px; height: 7px; border-radius: 7px; background-color: #ccc; overflow: hidden; line-height: 10px; font-size: 1px; text-indent: -999em; display: inline-block; *display: inline; *zoom: 1;}
.slider .content-pagination li.active-marker a,
.slider .content-pagination li a:hover {background-color: #08c; color: #fff;}
And yeah, the width and height of background images are fixed and they were 270px × 150px.

Now comes the really interesting part, which took me about an hour! The JavaScript rocks in consuming time like anything! 😀 I have to admit that I took a kind of low quality approach in my JavaScript, as I was concerned only about this 5 Content always with pagination and not scalable in future kind of a slider.

Replies

You are reading an archived discussion.

Related Posts

Hello everyone, my name is Decio, I´m from Argentina. I am studying Telecommunications Engineer, I´m doing the last subjects. Well I was googling and I found your forum, I hope...
i wanted to create some spy-bot which can fly with the rc plane modules and also walk on land. i want to introduce a pin-out system to attach and eject...
Name: Mohd Farkhan Bin Yahya Location: Johor bahru, Johor Malaysia *Occupation:Student In Robotics Automation sector (Recent) Work Experience: Automation Engineer, head Specialist Engineer *Hobbies & Interests: Product design and development...
Facebook is not just a social networking site anymore; it provides a detailed insight on a person’s life and the events that are of importance to him/her. Facebook has now...
Dear All, Will you please tell me whether tubelight get switched ON if it is started with reduced voltage (say 200V)? What are the effects(advantages OR disadvantages) of doing so?...