lundi 22 janvier 2018

JavaScript random slider with table list

The exam consists of creating a slider containing images of flags. When the visitor clicks on the radio button of a country, the slide slider until the corresponding flag.

Here are 2 contents of JavaScript arrays that you will need:

('Flag_USA_small.png', 'flag-au.png', 'flag-nz.png', 'flags_0000_vietnam.png', 'flags_0001_unitedkingdom.png', 'flags_0002_unitedarabemirates.png', 'flags_0003_turkey.png', 'flags_0004_thailand. png ', 'flags_0005_taiwan.png', 'flags_0006_sweden.png', 'flags_0007_spain.png', 'flags_0008_southafrica.png', 'flags_0009_singapore.png', 'flags_0010_saudiarabia.png', 'flags_0012_portugal.png', 'flags_0013_poland.png', 'flags_0014_phillipines.png', 'flags_0015_norway.png', 'flags_0016_mexico.png', 'flags_0017_malaysia.png', 'flags_0018_lebanon.png', 'flags_0019_korea.png', 'flags_0020_italy.png', 'flags_0021_israel.png', 'flags_0022_ireland.png', 'flags_0023_indonesia.png', 'flags_0024_india.png', 'flags_0025_hongkong.png', 'flags_0026_greece.png', 'flags_0027_germany.png', 'flags_0028_france.png', 'flags_0029_finland.png', 'flags_0030_denmark.png', 'flags_0031_croatia.png', 'flags_0032_china.png', 'flags_0033_canada.png', 'flags_0034_brazil.png', 'flags_0035_belgium.png', 'flags_0036_austria.png', 'flags_0037_switzerland.png');

('USA', 'Australia', 'New Zealand', 'Vietnam', 'United Kingdom', 'United Arab Emirates', 'Turkey', 'Thailand', 'Taiwan', 'Sweden', 'Spain' , 'South Africa', 'Singapore', 'Saudi Arabia', 'Portugal', 'Poland', Philippines, Norway, Mexico, Malaysia, Lebanon, South Korea, Italy, Israel, Ireland, Indonesia, India, Hong Kong Greece, Germany, France, Finland, Denmark, Croatia, China, Canada, 'Brazil', 'Belgium', 'Austria', 'Switzerland');

When loading the page, dynamically from the 2 contents of tables provided above:

  • Draw a random number N between the number of elements in the arrays and the number of elements-10.
  • The slider is completed by N images of flags arranged side by side horizontally.
  • The radio buttons are arranged in 3 columns: N country with for each, a radio button next to the name of the country.
  • The Belgian radio button is ticked by default and its flag is visible

When clicking on a radio button, the slider changes position to the target flag. His movement is visible.

Please can you help me ? I can't resolve that.




Aucun commentaire:

Enregistrer un commentaire