├── README.md ├── index.html ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # HTML-CSS-Jquery-Slick-Slider 2 | 3 | 4 | https://user-images.githubusercontent.com/42389395/184536653-2560d8f1-70ab-477d-8dbf-993ab92f1f84.mov 5 | 6 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Test 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |

1

18 |

2

19 |

3

20 |

4

21 |

5

22 |
23 |
24 |

1

25 |

2

26 |

3

27 |

4

28 |

5

29 |
30 |
31 | Slide 3 32 | Slide 4 33 | Slide 5 34 |
35 |
36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | $('.slider-top').slick({ 2 | slidesToShow: 1, 3 | slidesToScroll: 1, 4 | arrows: false, 5 | fade: true, 6 | asNavFor: '.slider-bottom' 7 | }); 8 | $('.slider-bottom').slick({ 9 | slidesToShow: 3, 10 | slidesToScroll: 1, 11 | asNavFor: '.slider-top', 12 | dots: true, 13 | focusOnSelect: true 14 | }); 15 | 16 | $('a[data-slide]').click(function(e) { 17 | e.preventDefault(); 18 | let slide = $(this).data('slide'); 19 | $('.slider-bottom').slick('slickGoTo', slide - 1); 20 | }); 21 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background:#f2eee3; 3 | } 4 | .main { 5 | font-family:Arial; 6 | width:500px; 7 | display:block; 8 | margin:0 auto; 9 | } 10 | h3 { 11 | background: #fff; 12 | color: blue; 13 | font-size: 36px; 14 | line-height: 100px; 15 | margin: 10px; 16 | padding: 2%; 17 | position: relative; 18 | text-align: center; 19 | } 20 | .action{ 21 | display:block; 22 | margin:100px auto; 23 | width:100%; 24 | text-align:center; 25 | } 26 | .action a { 27 | display:inline-block; 28 | padding:5px 10px; 29 | background: blue; 30 | color:#fff; 31 | text-decoration:none; 32 | border-radius: 50px; 33 | } 34 | .action a:hover{ 35 | background:red; 36 | } 37 | 38 | .slider-nav { 39 | 40 | } 41 | --------------------------------------------------------------------------------