Neal Grosskopf Dot Com A NG Designs Site

Recent Articles:

• Tracking Outgoing Links in Google Analytics Using Event Tracking and jQuery
• Tracking Internal Website Campaigns With Google Analytics and PHP
• Everything You Need to Know About jQuery's .data() Method
• Google vs. China: How It Will Affect Web Workers
• Don't Like The New Facebook Home Page? Fix It With 5 Lines of CSS

Apr 22

I've been working with JQuery a lot lately, both at work and at home, although my primary specialty is CSS, usually complex CSS. I have so far created several 'JQuery Sliders' as I like to call them. Then the thought occurred to me, could a JQuery Slider be created using only CSS?

My Goals Of This Proof Of Concept

My mission was to create a working example without the aid of JavaScript, using layers in CSS and using CSS3 transitions to give the slider the necessary animation.

HTML Structure

The HTML in it's most basic form consists of a container DIV and a simple unordered list. I also used P elements which could probably be removed depending on hardcore you want to be about extra elements. I did this because I needed to style the LIs differently than the text contained within the LIs such as floating, width etc.

<div id="slider"> <ul> <li> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </li> <li> <p>Sed ut est. Curabitur molestie. Cras pellentesque.</p> </li> <li> <p>Maecenas consequat consequat lectus.</p> </li> <li> <p>In vel lorem quis turpis auctor volutpat.</p> </li> </ul> </div>

I use the following CSS to style the above elements.

#slider, ul, li { height: 300px; } #slider, li { position: relative; width: 500px; } #slider { margin: auto; overflow: hidden; padding: 10px; } li { float: left; }

Positioning Our Slider

Next we need to set our UL which is the container of the slider's LIs. It needs a width set on it which is the width of the LIs X the total number of LIs. If each LI were 500px wide and we had 4 LIs then the total width would be 2000px. I should note that you will also most likely have a margin between each of the LIs which this would need to be accounted for in the above.

ul { list-style-type: none; position: absolute; left: 0px; top: 0px; width: 2000px; }

Next we move our UL element left baed on what LI we want to show in our slider. Look at the example below to see how I accomplish this. Each color block represents a LI. The block positioned over the black area represents the current visible LI.

Adding Persistence To Our Slider With :Target

By far the most complicated part of this proof-of-concept is accomplishing all of this without the assistance of variables that JavaScript allows us to use. CSS variables are not yet a true reality (although one could argue that CSS Counters are a form of CSS Variables). To overcome this obstacle I used the CSS3 :target pseudo selector. The :target pseudo selector works with URL fragments like below:

<a href="#page-anchor">go to page anchor</a> <div id="page-anchor"></div>

Using CSS we can actually style the page-anchor DIV if our page's URL contains #page-anchor like so: http://www.example.com/page.html#page-anchor.

#page-anchor:target { background: red; }

Using :Target To Mimic Variables & Selectively Show Content

Since I do not have variables available to use I need to use the URL fragments to selectively show my LEFT and RIGHT arrows. If I didn't do this I wouldn't know which LI slide to move to next and I wouldn't know which slide LI I need to show. This would quickly defeat my ul { left: -500px } method. What I did was wrap my entire slider in 4 :target hooks which simulate variables:

<!-- :target hooks --> <div id="a1"> <div id="a2"> <div id="a3"> <div id="a4"> <!-- 1 --> <a href="#a2" class="up2 default">2</a> <a href="#a2" class="up2">2</a> <!-- 2 --> <a href="#a1" class="down1">1</a> <a href="#a3" class="up3">3</a> <!-- 3 --> <a href="#a2" class="down2">2</a> <a href="#a4" class="up4">4</a> <!-- 4 --> <a href="#a3" class="down3">3</a> </div> <!-- End #a4 --> </div> <!-- End #a3 --> </div> <!-- End #a2 --> </div> <!-- End #a1 -->

Using Our :Target Hooks To Postion Our UL

I then use the following CSS to move our UL left 0px, -500px etc.

#a1:target ul { left: 0px; } #a2:target ul { left: -500px; } #a3:target ul { left: -1000px; } #a4:target ul { left: -1500px; }

I next use these same hooks to hide/show the appropriate LEFT/RIGHT arrows:

#a1:target .up2, #a2:target .down1, #a2:target .up3, #a3:target .down2, #a3:target .up4, #a4:target .down3 { display: block; }

Giving Our Slider Animation

If you were to test out the demo up to this point you would notice that when you click the LEFT/RIGHT arrows, it would automatically switch to the next slide rather abruptly. To fully achieve our JQuery-like slider we need to use CSS3 Transitions which was originally proposed by the Webkit team and has since been adopted into canon by the W3C. What this means is, at the moment the animations will only work in Safari, but Opera and Firefox will not be far behind to implement this exciting new CSS feature.

To achieve the CSS animation we need to first define what CSS property we want to animate. We can do this by stating '-webkit-transition: left'. Next we state the amount of milliseconds we would like the transition to occur over by adding '.3s'. Finally we add linear to the end stating that it is a linear transition. Here is the fully property statement:

ul { -webkit-transition: left .3s linear; }

Demo

To view the final product (which I recommend you use Safari which supports CSS Transitions) view my CSS Only JQuery Slider Emulation Demo >>

Before you comment stating why on earth anybody would ever use this when it can be accomplished so much easier in JavaScript please remember this is just a proof of concept and a test to see if it could be done using only CSS.