Проблема с "центрированием"
Вложений: 2
Решил написать слайдер :write:
Он работает :dance: Решил сделать "кружочки" для перехода :write: Они работают :dance: :stop: :stop: :stop: :stop: :stop: :stop: :stop: Не могу поставить их в центр :( . Пишу часть кода: [html] ... <div class="slideshow-container"> <div class="mySlides fade"> <img src="slides/1.jpg" style="width: 100%"> </div> ... <div class="myDots"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> <span class="dot" onclick="currentSlide(4)"></span> </div> </div> ... <css> //:haha: .myDots{ margin: auto; padding: 8px 12px; bottom: 0; position: absolute; } .dot { cursor: pointer; height: 12px; width: 12px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .dotactive { cursor: pointer; height: 12px; width: 12px; margin: 0 2px; background-color: #777; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, dot:hover { background-color: #717171; } ... </css> [html] Вложение 3792 Центрировать не получается НИКАК :-E :haha: :haha: :haha: //В коде выше написана одна из нескольких моих попыток Писать left: x% не хочу... Если по части коду непонятно, а это, наверное, так, оставляю ЗИП с html, css, js и с jpg: Вложение 3793. Подскажите, что добавить в код :write: , чтобы эти dotы были посередине (и снизу) каждого слайда. Заранее большое СПС :D . |
Ширину для .myDots добавьте, и позишен абсолют уберите у него - тогда margin:auto должен сработать, по идее.
Либо поставьте тексту внутри него центрирование (не помню навскидку как стиль называется) - по идее тоже должно сработать, раз у него содержимое inline-block |
слайдер макет
K_Artem,
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Slideshow</title> <style type="text/css"> .slideshow-container{ max-width:1000px; position:relative; margin:auto; } .prev,.next{ cursor:pointer; position:absolute; top:50%; width:auto; margin-top:-22px; padding:16px; color:#fff; font-weight:bold; font-size:18px; transition:0.6s ease; border-radius:0 3px 3px 0; } .next{ right:0; border-radius:3px 0 0 3px; } .prev:hover,.next:hover{ background:rgba(0,0,0,0.8); } .myDots{ padding:8px 12px; text-align:center; position:absolute; left:0; right:0; bottom:0; } .dot{ cursor:pointer; height:13px; width:13px; margin:0 2px; background:#bbb; border-radius:50%; display:inline-block; transition:background-color 0.6s ease; } .dot.active{ background:#777; } .active,.dot:hover{ background:#717171; } .fade{ display:none; -webkit-animation-name:fade; -webkit-animation-duration:1.5s; animation-name:fade; animation-duration:1.5s; } @-webkit-keyframes fade{ from{ opacity:.4; } to{ opacity:1; } } @keyframes fade{ from{ opacity:.4; } to{ opacity:1; } } </style> </head> <body> <div class="slideshow-container" onmouseenter="clearAuto()" onmouseleave="auto()"> <div class="mySlides fade"> <img src="https://d28g7970w5bq8z.cloudfront.net/p/galleries/2015/gi-13899-66017-big.jpg" style="width: 100%"> </div> <div class="mySlides fade"> <img src="https://www.look.com.ua/large/201508/126047.jpg" style="width: 100%"> </div> <div class="mySlides fade"> <img src="https://avatars.mds.yandex.net/get-pdb/234183/bb8a3c91-b715-44cf-8ce0-adfc5ca5ea48/s1200?webp=false" style="width: 100%"> </div> <div class="mySlides fade"> <img src="https://avatars.mds.yandex.net/get-pdb/33827/cc016818-1eda-4b5f-921b-4c64b219e293/s1200?webp=false" style="width: 100%"> </div> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> <div class="myDots"> <span class="dot" onclick="currentSlide(0)"></span> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div> </div> <br> <script> var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); var slideIndex = 0; var timer; showSlides(slideIndex); function auto() { window.clearTimeout(timer); timer = setTimeout(function() { plusSlides(1); auto(); }, 7500); } auto(); function clearAuto() { window.clearTimeout(timer); } function plusSlides(n) { showSlides(slideIndex + n); } function currentSlide(n) { showSlides(n); } function limit(n) { return n >= slides.length ? 0 : n < 0 ? slides.length - 1 : n; } function showSlides(n) { n = limit(n); slides[slideIndex].style.display = "none"; dots[slideIndex].classList.remove("active"); slideIndex = n; slides[slideIndex].style.display = "block"; dots[slideIndex].classList.add("active"); } </script> </body> </html> |
Дело в том, что мне нужно, чтобы dotы были СНИЗУ, а не под слайдом...
|
K_Artem,
смотрите код выше снова |
Работает! Спасибо огромное! Нужно запомнить интересную "обнулеровку" :write:
|
Часовой пояс GMT +3, время: 17:24. |