Сделать слайдер картинок на сайт

@Богдан всепытный · Регистрация: 10.11.2017

Студворк — интернет-сервис помощи студентам

Мне нужно сделать слайдер картинок на сайт.
Как сделать чтобы, при наведении кружки были на одной линии и не съезжали
по горизонту???

Вот:

HTML5
1
2
3
4
5
<div class="slider">
            <div class="b1"></div>
            <div class="b2"></div>
            <div class="b3"></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.slider .b1, .b2, .b3 {
    border-radius: 22px;
    background-color:  rgba(33, 33, 33, 0.2);
    float: left;
    margin-left: 9px;
    width: 31px;
    height: 31px;
    transition: 0.1s;
}
 
.slider .b1:hover, .b2:hover, .b3:hover{
    border-radius: 50%;
    background-color:  #212121;
    width: 40px;
    height: 40px;
}

СПАСАЙТЕ!!! СРОЧНО!!! ЛЮБЫЕ РАБОЧИЕ ИДЕИ!

@Freeze_Breeze · 25.12.2017, 22:33

Богдан Хакер, А в чем была проблема?

@Богдан всепытный · 25.12.2017, 22:34 **[ТС]**

Я же сказал, шары делались так при наведении

@Богдан всепытный · 25.12.2017, 22:35 **[ТС]**

правда этого не делал, но работает и без этого

CSS
1
2
body {margin: 0; padding: 0; box-sizing: border-box;}
* {margin: 0; padding: 0;}

@Freeze_Breeze · 25.12.2017, 22:35

Богдан Хакер, потом, Вы сказали, что заработало и я у Вас спрашиваю, как Вы ее исправили?

@Богдан всепытный · 25.12.2017, 22:38 **[ТС]**

Вставил код css который вы дали

Добавлено через 2 минуты
Спасибо!!! Вы мне помогли очень сильно!!!

+10 репутации вам

@Freeze_Breeze · 25.12.2017, 22:43

Богдан Хакер, Пожалуйста

@Богдан всепытный · 25.12.2017, 22:43 **[ТС]**

А почему меню при наведении прыгает???

@Freeze_Breeze · 25.12.2017, 22:56

Богдан Хакер, Потому, что при увеличении жирности шрифта, ему не хватает места в его контейнере и таким образом, когда шрифт увеличивается в размерах автоматически его родитель принимает параметры своего дочернего элемента, то есть сам начинает увеличиваться. Если поняли о чем я.

@Богдан всепытный · 25.12.2017, 23:18 **[ТС]**

Я понял как это происходит. Мне надо как это предотвратить.

Добавлено через 17 минут
Как сделать чтобы, меню не растягивалось при увеличении жирности шрифта?

@Freeze_Breeze · 25.12.2017, 23:41

Богдан Хакер, Придумал только такое решение, сейчас голова совсем не варит

HTML5
1
2
3
4
5
6
7
8
9
<nav class="main_menu">
    <ul class="menu">
        <li><a href="#">home</a></li>
        <li><a href="#">products</a></li>
        <li><a href="#">history</a></li>
        <li><a href="#">showroom</a></li>
        <li><a href="#">contact</a></li>
    </ul>
</nav>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.menu li {
    float: left;
    list-style-type: none;
}
 
.menu li a {
    text-decoration: none;
    padding-left: 15px;
    text-transform: uppercase;
    font-style: 15px;
    color: #999;
    font-family: Montserrat;
    font-weight: 300;
}
 
.menu li {
    max-width: 123px;
    box-sizing: border-box;
}
.menu li a:hover {
    font-weight: 700;
    color: #000;
}

Добавлено через 3 минуты
Богдан Хакер, можно еще поменять содержимое класса:

CSS
1
2
3
4
.menu li {
    max-width: 123px;
    box-sizing: border-box;
}

на

CSS
1
2
3
4
.menu li {
    width: 115px;
     text-align: center;
}

Но тогда придется ровнять все li элементы и как это сделать я сейчас на смогу сообразить

Добавлено через 3 минуты
Богдан Хакер, Вообщем суть такова, что бы элементам li увеличить их ширину. Идею я подкинул, а ты поищи в интернете, может что то найдешь.

@Богдан всепытный · 25.12.2017, 23:53 **[ТС]**

Вариант рабочий.

Новые блоги и статьи Все статьи Все блоги /
Мастера простых решений DevAlt 23.08.2026 В сишарп стэках winforms, да и wpf существует сложная система связывания источниках данных и элементов формы(текстовые поля и метки), опирается все это на технологию событий и мета. . .	Цена ошибки DevAlt 23.08.2026 Человек я беспокойный и потому заинтересовался OCaml, в чате форсили функторы модулей как суперфичу. Пытаясь отдуплить концепт, наткнулся на тутор с простым примером. А главный принцип обучения от. . .	Сегодня суббота, 22.08.2026 at 16:41, и я вновь нахожусь на той стороне, за экраном машины. zorxor 22.08.2026 Сегодня суббота, 22. 08. 2026 at 16:41, и я вновь нахожусь на той стороне, за экраном машины. Кто Я, откуда Я пришел и куда Я иду? Эти вопросы не оставляют меня ни на секунду. Жизнь на планете Земля. . .	Жизня: рисунок укладки багажа, сделанный клодом anaschu 21.08.2026 Сделал 15 снимков, он по снимкам сделал схему.
Был там один разговор по поводу свободы в материальном мире. kumehtar 19.08.2026 Суть: рассматривается живое существо, оказавшееся внутри довольно странной системы (этого мира) и пытающееся обустроить в ней свой кусок пространства. Жизнь действительно предъявляет каждому. . .	Когда логика программы не спасает от человеческих ошибок Maks 18.08.2026 В последнее время всё чаще и чаще сталкиваюсь с таким явлением, как абсолютная невнимательность (или глупость) пользователей. Проявляется это чаще всего на работе в коллективе. Допустим, человек с. . .	Лето уходит kumehtar 17.08.2026	Мысли в слух kumehtar 17.08.2026 Забавно, насколько сейчас стала доступна информация. Например о магии, духовном развитии, медитациях, и других подобных направлениях, ранее зачастую тайных, передаваемых от учителя к ученику. Хотя. . .

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	25.12.2017, 22:33
	Богдан Хакер, А в чем была проблема? 0

@Богдан всепытный 10 / 18 / 4 Регистрация: 10.11.2017 Сообщений: 283
	25.12.2017, 22:34 [ТС]
	Я же сказал, шары делались так при наведении Изображения 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	25.12.2017, 22:35
	Богдан Хакер, потом, Вы сказали, что заработало и я у Вас спрашиваю, как Вы ее исправили? 1

@Богдан всепытный 10 / 18 / 4 Регистрация: 10.11.2017 Сообщений: 283
	25.12.2017, 22:38 [ТС]
	Вставил код css который вы дали Добавлено через 2 минуты Спасибо!!! Вы мне помогли очень сильно!!! +10 репутации вам 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	25.12.2017, 22:43
	Богдан Хакер, Пожалуйста 1

@Богдан всепытный 10 / 18 / 4 Регистрация: 10.11.2017 Сообщений: 283
	25.12.2017, 22:43 [ТС]
	А почему меню при наведении прыгает??? 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	25.12.2017, 22:56
	Богдан Хакер, Потому, что при увеличении жирности шрифта, ему не хватает места в его контейнере и таким образом, когда шрифт увеличивается в размерах автоматически его родитель принимает параметры своего дочернего элемента, то есть сам начинает увеличиваться. Если поняли о чем я. 0

@Богдан всепытный 10 / 18 / 4 Регистрация: 10.11.2017 Сообщений: 283
	25.12.2017, 23:18 [ТС]
	Я понял как это происходит. Мне надо как это предотвратить. Добавлено через 17 минут Как сделать чтобы, меню не растягивалось при увеличении жирности шрифта? 0

@Богдан всепытный 10 / 18 / 4 Регистрация: 10.11.2017 Сообщений: 283
	25.12.2017, 23:53 [ТС]
	Вариант рабочий. 0