I need some help with CSS/HTML

[DeadEyeKozi]

Hey everyone,

I have been told to create a basic website for a school assignment. There is no line limit. I am having no trouble with the pages and everything is valid, although I would really like to know how I can create a sideshow on the home page. This would consist of about 5 images and I would like it to be positionable.

 

If someone could help me out I would really appreciate it.

Thanks

 

[Akolyte]

I'm still very much a noob in programming, but isn't Javascript responsible for the realtime information? eg: slideshows etc. 

[DeadEyeKozi]

I'm still very much a noob in programming, but isn't Javascript responsible for the realtime information? eg: slideshows etc. 

Yeah, Thats the issue. I am only allowed to use HTML and CSS

 

Thanks anyway

[Aho]

Yeah, Thats the issue. I am only allowed to use HTML and CSS

 

Thanks anyway

 

This is definitely possible with relatively recent additions to CSS3, which include very powerful tools for creating animations.

 

Using a combination of @keyframes rules and transformations, also a CSS3 property, you can make a slideshow that does NOT contain user interactivity, meaning users won't be able to manually jump from one picture to the next by clicking on an anchor. That would require the use of JavaScript.

 

Definitely read up on CSS3 animations...they're not officially standard yet, but they are extremely useful.

[Hazy125]

There's plenty of documentation out there on pure CSS slideshows, I find them tedious to make and don't bother with them. Jquery and Javascript make it so much easier, as in

<div class="cycle-slideshow">	<img src="image_1">	<img src="image_2">	<img src="image_3">	<img src="image_4">	<img src="image_5"></div>

But, unfortunately it's not so simple for you. I suggest having a look at one of these 3 templates and picking the one that's coolest/easiest. But like I said, these can be tedious and they annoy the crap out of me

 

http://www.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/

http://creativejuiz.fr/trytotry/juizy-slideshow-full-css3-html5/ (My personal favourite)

http://themarklee.com/2013/10/16/simple-crossfading-slideshow-css/

[Ciccioo]

a way of making it interactive could be this

<style>	li.photo{		display: none;	}	li.photo:target{		display: block;	}</style><ul>	<li class = "photo" id = "photo1">		<a class = "navButton" href = "#photo4">back</a>		<img src = "myselfie.jpg" />		<a class = "navButton" href = "#photo2">fwd</a>	</li>	<li class = "photo" id = "photo2">		<a class = "navButton" href = "#photo1">back</a>		<img src = "myphoto.jpg" />		<a class = "navButton" href = "#photo3">fwd</a>	</li>	<li class = "photo" id = "photo3">		<a class = "navButton" href = "#photo2">back</a>		<img src = "mycar.jpg" />		<a class = "navButton" href = "#photo4">fwd</a>	</li>	<li class = "photo" id = "photo4">		<a class = "navButton" href = "#photo3">back</a>		<img src = "myunicorn.jpg" />		<a class = "navButton" href = "#photo1">fwd</a>	</li></ul>

i didn't try it, but i think it could work

you could work on this, adding CSS3 animations to make the transition actually more appealing than a simple appear/disappear

[DeadEyeKozi]

a way of making it interactive could be this

<style>	li.photo{		display: none;	}	li.photo:target{		display: block;	}</style><ul>	<li class = "photo" id = "photo1">		<a class = "navButton" href = "#photo4">back</a>		<img src = "myselfie.jpg" />		<a class = "navButton" href = "#photo2">fwd</a>	</li>	<li class = "photo" id = "photo2">		<a class = "navButton" href = "#photo1">back</a>		<img src = "myphoto.jpg" />		<a class = "navButton" href = "#photo3">fwd</a>	</li>	<li class = "photo" id = "photo3">		<a class = "navButton" href = "#photo2">back</a>		<img src = "mycar.jpg" />		<a class = "navButton" href = "#photo4">fwd</a>	</li>	<li class = "photo" id = "photo4">		<a class = "navButton" href = "#photo3">back</a>		<img src = "myunicorn.jpg" />		<a class = "navButton" href = "#photo1">fwd</a>	</li></ul>

i didn't try it, but i think it could work

you could work on this, adding CSS3 animations to make the transition actually more appealing than a simple appear/disappear

Hey, I just gave it a go and unfortunately the page was blank. I changed the Image name and location but it still showed up blank. Thanks anyway.

[DeadEyeKozi]

There's plenty of documentation out there on pure CSS slideshows, I find them tedious to make and don't bother with them. Jquery and Javascript make it so much easier, as in

<div class="cycle-slideshow">	<img src="image_1">	<img src="image_2">	<img src="image_3">	<img src="image_4">	<img src="image_5"></div>

But, unfortunately it's not so simple for you. I suggest having a look at one of these 3 templates and picking the one that's coolest/easiest. But like I said, these can be tedious and they annoy the crap out of me

 

http://www.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/

http://creativejuiz.fr/trytotry/juizy-slideshow-full-css3-html5/ (My personal favourite)

http://themarklee.com/2013/10/16/simple-crossfading-slideshow-css/

Thanks so much! I also like the second link (Your and my new Personal favourite). 

[Ciccioo]

Hey, I just gave it a go and unfortunately the page was blank. I changed the Image name and location but it still showed up blank. Thanks anyway.

that happens because none of the images is the target, it works if you open the page with "mypage.html#photo1"

anyway, the other suggested methods are definitely more advanced, it's worth learning how they work