Слайдер на Bootstrap, куда то уезжает

@killlfun · Регистрация: 25.02.2014

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

Имеется слайдер на бутстрапе:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div class="carousel slide" id="myCarousel">
                            <ol class="carousel-indicators">
                                <li class="active" data-slide-to="0" data-target="#myCarousel"></li>
                                <li data-slide-to="1" data-target="#myCarousel"></li>
                                <li data-slide-to="2" data-target="#myCarousel"></li>
                            </ol>
                            <div class="carousel-inner">
                                <div class="slide-btn-container">
                                    <a href="#" class="slide-btn">See Portfolio</a>
                                </div>
                                <div class="item active text-center" id="slide1">
                                    <div class="container">
                                        <p class="slide-title">We are <span>Webpaint</span></p>
                                        <p class="slide-desc"><span>digital & branding</span> agency based in Jupiter and we would love to turn ideas into beautiful things.</p>
                                        
                                    </div>
                                </div>
                                <div class="item text-center" id="slide2">
                                    <div class="container">
                                        <p class="slide-title">Web 101<span>Hosting</span></p>
                                        <p class="slide-desc">How to buy domain name and hosting package, and get your website live on the web with ease.</p>
                                    </div>
                                </div>
                                <div class="item text-center" id="slide3">
                                    <div class="container">
                                        <p class="slide-title">PSD to <span>HTML5</span></p>
                                        <p class="slide-desc"><span>HTML5 &amp; CSS3</span> is a popular courses thet has helped thousands of aspiring web designers.</p>
                                    </div>
                                </div>
                            </div>
                            <a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="icon-prev"></span></a>
                            <a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="icon-next"></span></a>
                        </div>

Мои стили:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
#myCarousel{
    margin-top: 70px;
}
#myCarousel .item{
    height:400px;
    background-color: #2a2a2a;
}
.carousel-control{
    background-image: none !important;
}
.slide-title{
    font-size: 60px;
    font-weight: 300;
    color: #d9d9d9;
    padding-top: 60px;
}
.slide-btn-container{
    position: absolute;
    z-index: 10;
    text-align: center;
    width: 100%;
    bottom: 16%;
}
.slide-btn{
    border-radius: 5px;
    background-color: #ff6760;
    padding: 13px 40px;
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 0.4px;
    margin-top: 25px;
    display: inline-block;
}
.slide-btn:hover{
    text-decoration: none;
    color: #fff;
    background-color: #595959;
    transition:all 0.25s ease-in;
}
.slide-title span{
    font-weight: 900;
}
.slide-desc{
    font-size: 40px;
    font-weight: 300;
    color: #d9d9d9;
    width: 88% !important;
    margin: auto;
}
.slide-desc span{
    font-style: italic;
}
.carousel-indicators{
    left:15% !important;
}

Так вот в чем проблема:
Он работает, при нажатии на правую стрелку все хорошо, при нажатие индикаторов все хорошо, а вот когда нажимаешь на левую стрелку, слайдер уезжает вправо и исчезает полностью, но только если это первый слайд, если это второй или третий, то оно гортается до первого, но как только нажать стрелку когда индикатор находится на первом слайде, то слайдер куда то уезжает...
Я вообще не понимаю в чем дело, до этого делал и не раз и ничего такого не было.

@vovandr · 21.09.2014, 15:48

ссылку на сайт дайте

@killlfun · 21.09.2014, 16:03 **[ТС]**

vovandr, проблема в том что он на локалке

@almaz1994 · 21.09.2014, 16:22

Что сложного зарегать хостинг за 17 рублей и туда выложить сайт?

@UchihaSV · 21.09.2014, 18:08

Не по теме:

Чего сложного взять бесплатный хостинг или сделать сайт с доступом по твоему ip?

@killlfun · 21.09.2014, 23:04 **[ТС]**

vovandr, almaz1994, UchihaSV, http://pastainc.ucoz.ru/

Добавлено через 4 часа 29 минут
неужели никто не сталкивался?

@almaz1994 · 21.09.2014, 23:27

Сообщение от killlfun

неужели никто не сталкивался?

До этого не сталкивался. У тебя по слайдам, на каждый слайд активный присваивается класс active. Когда ты на первом слайде и нажимаешь на предыдущий, active пытается присвоится на предыдущий слайд, которого не существует. В этом проблема. Пути решения предложить пока не могу)

@killlfun · 21.09.2014, 23:30 **[ТС]**

almaz1994, ну вообще то класс active присваивается индикатору, а не слайдеру и он никак на это не влияет.

@almaz1994 · 21.09.2014, 23:36

Я бы посмотрел принцип работы переключения слайда вправо. И как устроено переключение на первый слайд, если дальше слайдов нету. Таким же образом прописать для переключения влево.

Добавлено через 4 минуты

Сообщение от killlfun

ну вообще то класс active присваивается индикатору, а не слайдеру и он никак на это не влияет

Посмотри блоки с классом item text-center и их поведение при переключении. Думаю вопросы будут исчерпаны.

@killlfun · 21.09.2014, 23:42 **[ТС]**

almaz1994, проблема решена, кнопка с абсолютным позиционированием, как то конфликтирует со слайдером, убрав ее все опять работает.

@Дмитрий76 · 22.09.2014, 12:42

Она не то, чтобы конфликтует со слайдером. Просто её нужно внутрь слайда поместить. А сейчас, судя по верстке, она идёт в качестве отдельного слайда, и ей передается класс active

А если нужно, чтобы слайды двигались, а кнопка на месте оставалась, то нужно её за пределы слайдера вынести.

Новые блоги и статьи Все статьи Все блоги /
сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и источниками (напряжения, ЭДС и тока). Найти токи и напряжения во всех элементах. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и. . .

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	21.09.2014, 15:48
	ссылку на сайт дайте 1

@killlfun 102 / 102 / 39 Регистрация: 25.02.2014 Сообщений: 321
	21.09.2014, 16:03 [ТС]
	vovandr, проблема в том что он на локалке 0

@almaz1994 33 / 33 / 15 Регистрация: 07.05.2014 Сообщений: 313
	21.09.2014, 16:22
	Что сложного зарегать хостинг за 17 рублей и туда выложить сайт? 0

@UchihaSV
	21.09.2014, 18:08
	Не по теме: Чего сложного взять бесплатный хостинг или сделать сайт с доступом по твоему ip? 0

@killlfun 102 / 102 / 39 Регистрация: 25.02.2014 Сообщений: 321
	21.09.2014, 23:04 [ТС]
	vovandr, almaz1994, UchihaSV, http://pastainc.ucoz.ru/ Добавлено через 4 часа 29 минут неужели никто не сталкивался? 0

@killlfun 102 / 102 / 39 Регистрация: 25.02.2014 Сообщений: 321
	21.09.2014, 23:30 [ТС]
	almaz1994, ну вообще то класс active присваивается индикатору, а не слайдеру и он никак на это не влияет. 0

@killlfun 102 / 102 / 39 Регистрация: 25.02.2014 Сообщений: 321
	21.09.2014, 23:42 [ТС]
	almaz1994, проблема решена, кнопка с абсолютным позиционированием, как то конфликтирует со слайдером, убрав ее все опять работает. 1

@Дмитрий76 8 / 8 / 2 Регистрация: 11.07.2014 Сообщений: 70
	22.09.2014, 12:42
	Она не то, чтобы конфликтует со слайдером. Просто её нужно внутрь слайда поместить. А сейчас, судя по верстке, она идёт в качестве отдельного слайда, и ей передается класс active А если нужно, чтобы слайды двигались, а кнопка на месте оставалась, то нужно её за пределы слайдера вынести. 1