Форум

K_Artem · #1 (**permalink**) 25.02.2018, 17:18

Решил написать слайдер

Он работает

Решил сделать "кружочки" для перехода

Они работают

Не могу поставить их в центр

.
Пишу часть кода:
[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> //

.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]
Снимок.jpg
Центрировать не получается НИКАК

//В коде выше написана одна из нескольких моих попыток

Писать left: x% не хочу...

Если по части коду непонятно, а это, наверное, так, оставляю ЗИП с html, css, js и с jpg: MySlider.zip.

Подскажите, что добавить в код

, чтобы эти dotы были посередине (и снизу) каждого слайда. Заранее большое СПС

.

Белый шум · #2 (**permalink**) 25.02.2018, 17:31

Ширину для .myDots добавьте, и позишен абсолют уберите у него - тогда margin:auto должен сработать, по идее.
Либо поставьте тексту внутри него центрирование (не помню навскидку как стиль называется) - по идее тоже должно сработать, раз у него содержимое inline-block

рони · #3 (**permalink**) 25.02.2018, 18:50

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)">&#10094</a>
		<a class="next" onclick="plusSlides(1)">&#10095</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>

K_Artem · #4 (**permalink**) 25.02.2018, 19:15

Дело в том, что мне нужно, чтобы dotы были СНИЗУ, а не под слайдом...

рони · #5 (**permalink**) 25.02.2018, 20:10

K_Artem,
смотрите код выше снова

K_Artem · #6 (**permalink**) 25.02.2018, 20:42

Работает! Спасибо огромное! Нужно запомнить интересную "обнулеровку"

Форум

Справочник

Discord чат

Курсы javascript