For some of my pages i wanted to use an image slider and i was able to find one on a website called 'code drops' and it allows up to 5 pictures to be in this slider and be able to click from one to another.
There was a download which included the css and html as well as the javascript that needed to be added. The only things i had to change were the colours for the backgrounds in-between each slide as well as the actual images that the slider was linked to in the html. So basically all i had to do was copy and paste the slider html and css in my css and html documents and make a few adjustments according to what i wanted.
The page i used this slideshow was on 'overcoming earthquake' in the japan chapter and below is what it looks like. I made all the images the same width and height so the images looked more neater.
I also used a slider for the 'safety' page in chapter 3 and for this i got rid of some of the html where it had the div class of buttons and got rid of two of them since i only wanted 3 slides and then i changed some of the css slider stuff so it would work with 3 slides. I also changed the background colour to match the background image colour so it would look like it was one image within the slider.
Something i realised is in the smaller formats the slider was harder to see, so i replaced the slider with an image which displayed the 3 steps of what to do when an earthquake occurs. This makes it easy on the user when they are using smaller platforms and allows them to view this area without any problems.
No comments:
Post a Comment