├── images
    ├── arrow-left.png
    ├── arrow-right.png
    ├── preset1.png
    ├── preset2.jpg
    ├── preset3.JPG
    ├── preset4.JPG
    ├── preset5.JPG
    ├── preset6.JPG
    ├── preset7.JPG
    ├── preset8.JPG
    ├── shoe1.jpg
    ├── shoe2.jpg
    └── shoe3.jpg
├── index.html
└── style.css


/images/arrow-left.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/image_slider_frontend/d58ac4296538e0293101d8f21d5041bf2b5cc5a6/images/arrow-left.png


--------------------------------------------------------------------------------
/images/arrow-right.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/image_slider_frontend/d58ac4296538e0293101d8f21d5041bf2b5cc5a6/images/arrow-right.png


--------------------------------------------------------------------------------
/images/preset1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/image_slider_frontend/d58ac4296538e0293101d8f21d5041bf2b5cc5a6/images/preset1.png


--------------------------------------------------------------------------------
/images/preset2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/image_slider_frontend/d58ac4296538e0293101d8f21d5041bf2b5cc5a6/images/preset2.jpg


--------------------------------------------------------------------------------
/images/preset3.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/image_slider_frontend/d58ac4296538e0293101d8f21d5041bf2b5cc5a6/images/preset3.JPG


--------------------------------------------------------------------------------
/images/preset4.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/image_slider_frontend/d58ac4296538e0293101d8f21d5041bf2b5cc5a6/images/preset4.JPG


--------------------------------------------------------------------------------
/images/preset5.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/image_slider_frontend/d58ac4296538e0293101d8f21d5041bf2b5cc5a6/images/preset5.JPG


--------------------------------------------------------------------------------
/images/preset6.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/image_slider_frontend/d58ac4296538e0293101d8f21d5041bf2b5cc5a6/images/preset6.JPG


--------------------------------------------------------------------------------
/images/preset7.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/image_slider_frontend/d58ac4296538e0293101d8f21d5041bf2b5cc5a6/images/preset7.JPG


--------------------------------------------------------------------------------
/images/preset8.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/image_slider_frontend/d58ac4296538e0293101d8f21d5041bf2b5cc5a6/images/preset8.JPG


--------------------------------------------------------------------------------
/images/shoe1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/image_slider_frontend/d58ac4296538e0293101d8f21d5041bf2b5cc5a6/images/shoe1.jpg


--------------------------------------------------------------------------------
/images/shoe2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/image_slider_frontend/d58ac4296538e0293101d8f21d5041bf2b5cc5a6/images/shoe2.jpg


--------------------------------------------------------------------------------
/images/shoe3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/image_slider_frontend/d58ac4296538e0293101d8f21d5041bf2b5cc5a6/images/shoe3.jpg


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<title>Slider</title>
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1">
 6 | 
 7 | 	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
 8 | 
 9 | 	<link rel="stylesheet" type="text/css" href="style.css">
10 | </head>
11 | <body>
12 | 
13 | 	<div id="content-wrapper">
14 | 		
15 | 
16 | 		<div class="column">
17 | 			<img id=featured src="images/shoe1.jpg">
18 | 
19 | 			<div id="slide-wrapper" >
20 | 				<img id="slideLeft" class="arrow" src="images/arrow-left.png">
21 | 
22 | 				<div id="slider">
23 | 					<img class="thumbnail active" src="images/shoe1.jpg">
24 | 					<img class="thumbnail" src="images/shoe2.jpg">
25 | 					<img class="thumbnail" src="images/shoe3.jpg">
26 | 
27 | 					<img class="thumbnail" src="images/preset1.png">
28 | 					<img class="thumbnail" src="images/preset2.jpg">
29 | 					<img class="thumbnail" src="images/preset3.jpg">
30 | 					<img class="thumbnail" src="images/preset4.jpg">
31 | 				</div>
32 | 
33 | 				<img id="slideRight" class="arrow" src="images/arrow-right.png">
34 | 			</div>
35 | 		</div>
36 | 
37 | 		<div class="column">
38 | 			<h1>Awesome Shoes</h1>
39 | 			<hr>
40 | 			<h3>$89.99</h3>
41 | 
42 | 			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
43 | 
44 | 			<input value=1 type="number">
45 | 			<a class="btn btn-dark" href="#">Add to Cart</a>
46 | 		</div>
47 | 
48 | 	</div>
49 | 
50 | 	<script type="text/javascript">
51 | 		let thumbnails = document.getElementsByClassName('thumbnail')
52 | 
53 | 		let activeImages = document.getElementsByClassName('active')
54 | 
55 | 		for (var i=0; i < thumbnails.length; i++){
56 | 
57 | 			thumbnails[i].addEventListener('mouseover', function(){
58 | 				console.log(activeImages)
59 | 				
60 | 				if (activeImages.length > 0){
61 | 					activeImages[0].classList.remove('active')
62 | 				}
63 | 				
64 | 
65 | 				this.classList.add('active')
66 | 				document.getElementById('featured').src = this.src
67 | 			})
68 | 		}
69 | 
70 | 
71 | 		let buttonRight = document.getElementById('slideRight');
72 | 		let buttonLeft = document.getElementById('slideLeft');
73 | 
74 | 		buttonLeft.addEventListener('click', function(){
75 | 			document.getElementById('slider').scrollLeft -= 180
76 | 		})
77 | 
78 | 		buttonRight.addEventListener('click', function(){
79 | 			document.getElementById('slider').scrollLeft += 180
80 | 		})
81 | 
82 | 
83 | 	</script>
84 | 
85 | </body>
86 | </html>


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | body{
 4 | 	padding-top: 100px;
 5 | }
 6 | 
 7 | #content-wrapper{
 8 | 	display: flex;
 9 | 	flex-wrap: wrap;
10 | 	justify-content: center;
11 | 	align-items: center;
12 | }
13 | 
14 | .column{
15 | 	width: 600px;
16 | 	padding: 10px;
17 | 
18 | }
19 | 
20 | #featured{
21 | 	max-width: 500px;
22 | 	max-height: 600px;
23 | 	object-fit: cover;
24 | 	cursor: pointer;
25 | 	border: 2px solid black;
26 | 
27 | }
28 | 
29 | .thumbnail{
30 | 	object-fit: cover;
31 | 	max-width: 180px;
32 | 	max-height: 100px;
33 | 	cursor: pointer;
34 | 	opacity: 0.5;
35 | 	margin: 5px;
36 | 	border: 2px solid black;
37 | 
38 | }
39 | 
40 | .thumbnail:hover{
41 | 	opacity:1;
42 | }
43 | 
44 | .active{
45 | 	opacity: 1;
46 | }
47 | 
48 | #slide-wrapper{
49 | 	max-width: 500px;
50 | 	display: flex;
51 | 	min-height: 100px;
52 | 	align-items: center;
53 | }
54 | 
55 | #slider{
56 | 	width: 440px;
57 | 	display: flex;
58 | 	flex-wrap: nowrap;
59 | 	overflow-x: auto;
60 | 
61 | }
62 | 
63 | #slider::-webkit-scrollbar {
64 | 		width: 8px;
65 | 
66 | }
67 | 
68 | #slider::-webkit-scrollbar-track {
69 |     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
70 | 
71 | }
72 |  
73 | #slider::-webkit-scrollbar-thumb {
74 |   background-color: #dede2e;
75 |   outline: 1px solid slategrey;
76 |    border-radius: 100px;
77 | 
78 | }
79 | 
80 | #slider::-webkit-scrollbar-thumb:hover{
81 |     background-color: #18b5ce;
82 | }
83 | 
84 | .arrow{
85 | 	width: 30px;
86 | 	height: 30px;
87 | 	cursor: pointer;
88 | 	transition: .3s;
89 | }
90 | 
91 | .arrow:hover{
92 | 	opacity: .5;
93 | 	width: 35px;
94 | 	height: 35px;
95 | }
96 | 


--------------------------------------------------------------------------------