add topic_4

2023-04-07 12:21:44 +07:00
parent 1a822a4169
commit fe554065bc
9 changed files with 185 additions and 0 deletions
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <title>Слайдер</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+<div class="container">
+    <div class="slider">
+        <div class="slider-line">
+            <img src="img/pic1.webp" width="256" height="256" alt="">
+            <img src="img/pic2.png" width="256" height="256" alt="">
+            <img src="img/pic3.webp" width="256" height="256" alt="">
+        </div>
+    </div>
+    <button class="slider-prev" onclick="nextSlide()">Назад</button>
+    <button class="slider-next" onclick="previousSlide()">Дальше</button>
+</div>
+
+<script src="script.js"></script>
+
+</body>
+</html>
@@ -0,0 +1,27 @@
+let slideIndex = 1;
+
+showSlides(slideIndex);
+
+function nextSlide() {
+    showSlides(slideIndex += 1);
+}
+
+function previousSlide() {
+    showSlides(slideIndex -= 1);
+}
+
+function showSlides(n) {
+    let slides = document.getElementsByClassName("slider-line")[0].getElementsByTagName("img");
+
+    if (n > slides.length) {
+        slideIndex = 1
+    }
+    if (n < 1) {
+        slideIndex = slides.length
+    }
+
+    for (let slide of slides) {
+        slide.style.display = "none";
+    }
+    slides[slideIndex - 1].style.display = "block";
+}
@@ -0,0 +1,55 @@
+* {
+    margin: 0;
+}
+
+html, body {
+    font-size: 18px;
+}
+
+.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;
+}
+
+button:active {
+    background: black;
+    color: white;
+}
+
+.slider {
+    width: 256px;
+    height: 256px;
+    border: 2px solid black;
+    margin: 30px auto;
+    overflow: hidden;
+}
+
+.slider-line {
+    height: 256px;
+    width: 1024px;
+    background: orangered;
+    position: relative;
+    display: flex;
+    left: 0;
+    transition: all ease 1s;
+}
+