Auto Generation of Rules For Pure CSS Slider

This something I have been playing around with lately. I was wondering if there is a way to generate the rules to both position and offset the the view pane and individual slides. Right now the rules have to be explicitly defined based on the number of slides. That isn’t very practical, unless the CSS is generated using an application side language, which is possible. However, I was wondering if any clever souls have a solution, as I can not think of one. I was thinking counter would work, but that seems to only be for auto generated content.

thanks


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Untitled</title>
	<meta name="generator" content="BBEdit 9.6">
	
	<style type="text/css">
	
		ul {
			list-style: none;
			padding: 0;
			margin: 0;
		}
	
		#view-pane {
			width: 500px;
			height: 300px;
			overflow: hidden;
		}
	
		#view-pane ul {
			position: relative;
			
			width: 100%;
			height: 100%;
		}
		
		#view-pane li {
			position: absolute;
			top: 0;
			left: 0;
			
			width: 100%;
			height: 100%;
			
			background-color: red;
		}
		
		#view-pane li:nth-child(2) {
			left: 100%;
			background-color: blue;
		}
			
		#view-pane li:nth-child(3) {
			left: 200%;
			background-color: yellow;
		}
		
		#view-pane li:nth-child(4) {
			left: 300%;
			background-color: violet;
		}
		
		#view-pane li:nth-child(5) {
			left: 400%;
			background-color: green;
		}
		
		/* transitions */
		a[id^="slide-"]:target ~ #view-pane ul {
			-moz-transition: all 1s ease-in-out;
			-webkit-transition: all 1s ease-in-out;
			-o-transition: all 1s ease-in-out;
			transition: all 1s ease-in-out;
		}
		
		a#slide-1:target ~ #view-pane ul {
			left: 0;
		}
		
		a#slide-2:target ~ #view-pane ul {
			left: -100%;
		}
		
		a#slide-3:target ~ #view-pane ul {
			left: -200%;
		}
		
		a#slide-4:target ~ #view-pane ul {
			left: -300%;
		}
		
		a#slide-5:target ~ #view-pane ul {
			left: -400%;
		}
	
	</style>
	
</head>
<body>

	<div>

		<a href="#slide-1" id="slide-1">One</a>
		<a href="#slide-2" id="slide-2">Two</a>
		<a href="#slide-3" id="slide-3">Three</a>
		<a href="#slide-4" id="slide-4">Four</a>
		<a href="#slide-5" id="slide-5">Five</a>

		<div id="view-pane">
			<ul>
				<li>Slide One</li>
				<li>Slide Two</li>
				<li>Slide Three</li>
				<li>Slide Four</li>
				<li>Slide Five</li>
			</ul>
		</div>
	
	</div>

</body>
</html>

Not sure why you’re apo’ing them instead of just floating them… though honestly (this answer might shock) this looks like a job for javascript (behavior) instead of CSS (appearance)… especially given the piss poor cross browser support for transitions and nth-child as yet.

NOT that I can figure out what that code is even supposed to do or how it would even work… almost looks like you have the ID’s on the wrong elements.

Yeah, it only works in FF right now, as I said it was experimental.

Actually, it works in opera here – figures one time I load in FF instead, it doesn’t work… because my primary FF is 3.5.3 as that’s the most recent version where the one part of the web developer toolbar I actually use (information -> document size) actually WORKED properly. Tried in it 4 and 5, and it works there too.

Cute effect, bombs miserably when CSS3 isn’t present, so it’s not really deployable… Shame there’s no way to target the LI and stack them vertically instead when CSS3 isn’t present… but then stack them horizontally when CSS3 is available.

Though in either case, that’s getting too complex for it’s own good and I’d say just hook javascript to do the animations… since that’s what JS is good at… I dunno, CSS3 transitions feel needlessly complex and sometimes annoying (but I’m an impatient sort who hates waiting for some goofy animation after I click on something. I want it NOW, now now now now now!)… but I say the same thing about these effects when done in .js

The nice thing about CSS transitions and animations is that they reduce processing considerable in comparison to JavaScript. People like to see “cool” things so helps use developers out quite a bit. Besides they are so much more fluent than JavaScript based animation.

I was trying to figure out why it isn’t functioning in Chrome or Safari. In theory so long as the sibling selector and attribute selectors are supported it should still gracefully degrade. However, instead of an animation between slides the current one would just come into view and I am fine with it. This whole thing began because I was trying to achieve a similar presence in a mobile environment when you swipe the next item is brought in. Doing it with JavaScript and more specifically JQuery leaves a lot to be desires in regards to performance. So it should gracefully degrade, but that was one of the things I was trying to figure out.

My main problem though outside of the animation stuff though is generating these rules:


		#view-pane li:nth-child(2) {
			left: 100%;
			background-color: blue;
		}
			
		#view-pane li:nth-child(3) {
			left: 200%;
			background-color: yellow;
		}
		
		#view-pane li:nth-child(4) {
			left: 300%;
			background-color: violet;
		}
		
		#view-pane li:nth-child(5) {
			left: 400%;
			background-color: green;
		}

and these:


		a#slide-1:target ~ #view-pane ul {
			left: 0;
		}
		
		a#slide-2:target ~ #view-pane ul {
			left: -100%;
		}
		
		a#slide-3:target ~ #view-pane ul {
			left: -200%;
		}
		
		a#slide-4:target ~ #view-pane ul {
			left: -300%;
		}
		
		a#slide-5:target ~ #view-pane ul {
			left: -400%;
		}

Ideally, a list item should be able to be added without needing to update the CSS. The only way I can think of doing that at this time is to have the application language write the rules dynamically based upon the number of slides. So I was putting some feelers out for a different approach since I can not think of one.

The problem with it not gracefully degrading for most browsers such as those that are webkit based seems to be that the general sibling selector is not being honored. Although the versions of safari and chrome I am using for testing support the general sibling selector.

There must be a bug in chrome and safari because changing swapping out the general sibling selector for an adjacent sibling works as expected when clicking slide five the animation even is applied, which means the general sibling selector is matched. weird…


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Untitled</title>
	
	<style type="text/css">
	
		ul {
			list-style: none;
			padding: 0;
			margin: 0;
		}
	
		#view-pane {
			width: 500px;
			height: 300px;
			overflow: hidden;
		}
	
		#view-pane ul {
			position: relative;
			
			width: 100%;
			height: 100%;
		}
		
		#view-pane li {
			position: absolute;
			top: 0;
			left: 0;
			
			width: 100%;
			height: 100%;
			
			background-color: red;
		}
		
		#view-pane li:nth-child(2) {
			left: 100%;
			background-color: blue;
		}
			
		#view-pane li:nth-child(3) {
			left: 200%;
			background-color: yellow;
		}
		
		#view-pane li:nth-child(4) {
			left: 300%;
			background-color: violet;
		}
		
		#view-pane li:nth-child(5) {
			left: 400%;
			background-color: green;
		}
		
		/* transitions */
		a[id^="slide-"]:target ~ #view-pane ul {
			-moz-transition: all 1s ease-in-out;
			-webkit-transition: all 1s ease-in-out;
			-o-transition: all 1s ease-in-out;
			transition: all 1s ease-in-out;
		}
		
		#slide-1:target ~ #view-pane ul {
			left: 0;
		}
		
		#slide-2:target ~ #view-pane ul {
			left: -100%;
		}
		
		#slide-3:target ~ #view-pane ul {
			left: -200%;
		}
		
		#slide-4:target ~ #view-pane ul {
			left: -300%;
		}
		
		#slide-5:target + #view-pane ul {
			left: -400%;
		}
	
	</style>
	
</head>
<body>

	<a href="#slide-1" id="slide-1">One</a>
	<a href="#slide-2" id="slide-2">Two</a>
	<a href="#slide-3" id="slide-3">Three</a>
	<a href="#slide-4" id="slide-4">Four</a>
	<a href="#slide-5" id="slide-5">Five</a>

	<div id="view-pane">
		<ul>
			<li>Slide One</li>
			<li>Slide Two</li>
			<li>Slide Three</li>
			<li>Slide Four</li>
			<li>Slide Five</li>
		</ul>
	</div>
	

</body>
</html>


Note the last rule:


		#slide-5:target + #view-pane ul {
			left: -400%;
		}

Hi,
We did something similar to that a while back by setting the slides as display:inline-block; while using white-space:nowrap; and overflow:hidden; on the parent container.

If you look at page 2 of that thread you will see that [URL=“http://www.pmob.co.uk/fluid-slide/fluid-slide.htm”]Paul’s example (view page source) is still available in post #26. In that example the slides are set as <li> and respectively the parent is a <ul>. It would work using divs but the <ul> just seemed to fit the task at hand.

That slider was using jQuery with a CSS fallback for js off. You should be able to take the code and merge your transitions into it.

Hope that helps :slight_smile: