├── images ├── 1.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg └── 7.jpg ├── index.html ├── myscript.js └── mystyle.css /images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirzaf/Creating-an-Image-slider/74836ec50b1990f9982625ad4bbd625dc8c39c1f/images/1.jpg -------------------------------------------------------------------------------- /images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirzaf/Creating-an-Image-slider/74836ec50b1990f9982625ad4bbd625dc8c39c1f/images/2.jpg -------------------------------------------------------------------------------- /images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirzaf/Creating-an-Image-slider/74836ec50b1990f9982625ad4bbd625dc8c39c1f/images/3.jpg -------------------------------------------------------------------------------- /images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirzaf/Creating-an-Image-slider/74836ec50b1990f9982625ad4bbd625dc8c39c1f/images/4.jpg -------------------------------------------------------------------------------- /images/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirzaf/Creating-an-Image-slider/74836ec50b1990f9982625ad4bbd625dc8c39c1f/images/5.jpg -------------------------------------------------------------------------------- /images/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirzaf/Creating-an-Image-slider/74836ec50b1990f9982625ad4bbd625dc8c39c1f/images/6.jpg -------------------------------------------------------------------------------- /images/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirzaf/Creating-an-Image-slider/74836ec50b1990f9982625ad4bbd625dc8c39c1f/images/7.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Image Slider 6 | 7 | 8 | 9 | 10 | 11 | 12 |

Image slider

13 |
14 |
15 |

16 |

17 |

18 |

19 |

20 |

21 |

22 |

23 | < 24 | > 25 |

26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /myscript.js: -------------------------------------------------------------------------------- 1 | var slideIndex = 1; 2 | showDivs(slideIndex); 3 | 4 | function plusDivs(n) { 5 | showDivs(slideIndex += n); 6 | } 7 | 8 | function showDivs(n) { 9 | var i; 10 | var x = document.getElementsByClassName("mySlides"); 11 | if (n > x.length) {slideIndex = 1} 12 | if (n < 1) {slideIndex = x.length} 13 | for (i = 0; i < x.length; i++) { 14 | x[i].style.display = "none"; 15 | } 16 | x[slideIndex-1].style.display = "block"; 17 | } -------------------------------------------------------------------------------- /mystyle.css: -------------------------------------------------------------------------------- 1 | #btnl { 2 | padding:10px; 3 | border-radius:30px; 4 | background-color:lime; 5 | } 6 | 7 | #btnr{ 8 | padding:10px; 9 | border-radius:30px; 10 | background-color:lime; 11 | } 12 | 13 | img{ 14 | width:958px; 15 | height:578px; 16 | } 17 | 18 | .wrapper { 19 | 20 | margin-left:100px; 21 | 22 | } --------------------------------------------------------------------------------