3 年之前 · 869a57c534
--- a/README.md
+++ b/README.md
--- a/images/cover.png
+++ b/images/cover.png
--- a/images/elephant.png
+++ b/images/elephant.png
--- a/images/gorilla.png
+++ b/images/gorilla.png
--- a/images/home.png
+++ b/images/home.png
--- a/images/ice_cream.png
+++ b/images/ice_cream.png
--- a/images/slider.png
+++ b/images/slider.png
--- a/index.html
+++ b/index.html
@@ -0,0 +1,28 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Cлайдер</title>
			
 
				+    <link rel="stylesheet" href="./style.css">
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+    <div class="container">
			
 
				+        <h1>Слайдер на js</h1>
			
 
				+        <div class="slider">
			
 
				+            <div class="slider-line">
			
 
				+                <img src="./images/elephant.png" alt="">
			
 
				+                <img src="./images/gorilla.png" alt="">
			
 
				+                <img src="./images/home.png" alt="">
			
 
				+                <img src="./images/ice_cream.png" alt="">
			
 
				+            </div>
			
 
				+        </div>
			
 
				+        <button class="slider-prev">Prev</button>
			
 
				+        <button class="slider-next">Next</button>
			
 
				+    </div>
			
 
				+    <script src="script.js"></script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/script.js
+++ b/script.js
@@ -0,0 +1,18 @@
 
				+let offset = 0;
			
 
				+const sliderLine = document.querySelector('.slider-line');
			
 
				+
			
 
				+document.querySelector('.slider-next').addEventListener('click', function(){
			
 
				+    offset = offset + 256;
			
 
				+    if (offset > 768) {
			
 
				+        offset = 0;
			
 
				+    }
			
 
				+    sliderLine.style.left = -offset + 'px';
			
 
				+});
			
 
				+
			
 
				+document.querySelector('.slider-prev').addEventListener('click', function () {
			
 
				+    offset = offset - 256;
			
 
				+    if (offset < 0) {
			
 
				+        offset = 768;
			
 
				+    }
			
 
				+    sliderLine.style.left = -offset + 'px';
			
 
				+});
			
--- a/style.css
+++ b/style.css
@@ -0,0 +1,56 @@
 
				+* {
			
 
				+    margin: 0;
			
 
				+}
			
 
				+
			
 
				+html, body {
			
 
				+    font-size: 18px;
			
 
				+    font-family: sans-serif;
			
 
				+}
			
 
				+
			
 
				+.container {
			
 
				+    max-width: 1200px;
			
 
				+    margin: 30px auto;
			
 
				+    background: #f1f1f1;
			
 
				+    padding: 30px;
			
 
				+}
			
 
				+
			
 
				+h1 {
			
 
				+    text-align: center;
			
 
				+    margin-bottom: 40px;
			
 
				+}
			
 
				+
			
 
				+button {
			
 
				+    background: none;
			
 
				+    border: 1px solid black;
			
 
				+    border-radius: 4px;
			
 
				+    padding: 10px 20px;
			
 
				+    font-size: .9rem;
			
 
				+}
			
 
				+
			
 
				+button:hover {
			
 
				+	background: orangered;
			
 
				+	cursor: pointer;
			
 
				+}
			
 
				+
			
 
				+button:active {
			
 
				+    background: #000;
			
 
				+    color: #fff;
			
 
				+}
			
 
				+
			
 
				+.slider {
			
 
				+    border: 2px solid black;
			
 
				+    width: 256px;
			
 
				+    height: 256px;
			
 
				+    margin: 20px auto;
			
 
				+    overflow: hidden;
			
 
				+}
			
 
				+
			
 
				+.slider-line {
			
 
				+    width: 1024px;
			
 
				+    height: 256px;
			
 
				+    display: flex;
			
 
				+    background: orange;
			
 
				+    position: relative;
			
 
				+    left: 0;
			
 
				+    transition: all ease 1s;
			
 
				+}