Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.02.2018, 17:18
Новичок на форуме
Отправить личное сообщение для K_Artem Посмотреть профиль Найти все сообщения от K_Artem
 
Регистрация: 17.02.2018
Сообщений: 4

Проблема с "центрированием"
Решил написать слайдер
Он работает
Решил сделать "кружочки" для перехода
Они работают



Не могу поставить их в центр .
Пишу часть кода:
[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
Аватар для Белый шум
Профессор
Отправить личное сообщение для Белый шум Посмотреть профиль Найти все сообщения от Белый шум
 
Регистрация: 19.01.2012
Сообщений: 498

Ширину для .myDots добавьте, и позишен абсолют уберите у него - тогда margin:auto должен сработать, по идее.
Либо поставьте тексту внутри него центрирование (не помню навскидку как стиль называется) - по идее тоже должно сработать, раз у него содержимое inline-block
Ответить с цитированием
  #3 (permalink)  
Старый 25.02.2018, 18:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

слайдер макет
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>

Последний раз редактировалось рони, 25.02.2018 в 20:09.
Ответить с цитированием
  #4 (permalink)  
Старый 25.02.2018, 19:15
Новичок на форуме
Отправить личное сообщение для K_Artem Посмотреть профиль Найти все сообщения от K_Artem
 
Регистрация: 17.02.2018
Сообщений: 4

Дело в том, что мне нужно, чтобы dotы были СНИЗУ, а не под слайдом...
Ответить с цитированием
  #5 (permalink)  
Старый 25.02.2018, 20:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

K_Artem,
смотрите код выше снова
Ответить с цитированием
  #6 (permalink)  
Старый 25.02.2018, 20:42
Новичок на форуме
Отправить личное сообщение для K_Artem Посмотреть профиль Найти все сообщения от K_Artem
 
Регистрация: 17.02.2018
Сообщений: 4

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


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с радио кнопками px379 Общие вопросы Javascript 8 29.07.2013 09:30
Проблема с дизайном после отправки xmlhttprequest, Проблема с дизайном после отправки cyberx AJAX и COMET 3 01.05.2010 17:07
Проблема с CSS COKOJIOB (X)HTML/CSS 5 04.08.2009 14:19
Проблема, в менюшке Большой джо Элементы интерфейса 0 12.07.2009 17:12
Проблема спама lliberty AJAX и COMET 1 12.03.2009 16:47