Не получается сделать простой слайдер

@bb_oo · Регистрация: 22.11.2013

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

ППодскажите. Почему при клике у меня срабатывает функция только один раз? Последующие клики, она просто игнорирует.

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<div class="popular-stores">
                    <h2>Популярные магазины</h2>
 
                    <ul>
                        <li class="p_red">
                            <a href="#">
                                <img src="" alt="">
                            </a>
                        </li>
                        <li class="p_green">
                            <a href="#">
                                <img src="" alt="">
                            </a>
                        </li>
                        <li class="p_yellow">
                            <a href="#">
                                <img src="" alt="">
                            </a>
                        </li>
                        <li class="p_blue">
                            <a href="#">
                                <img src="" alt="">
                            </a>
                        </li>
                        <li class="p_red">
                            <a href="#">
                                <img src="" alt="">
                            </a>
                        </li>
                        <li class="p_green">
                            <a href="#">
                                <img src="" alt="">
                            </a>
                        </li>
                        <li class="p_blue">
                            <a href="#">
                                <img src="" alt="">
                            </a>
                        </li>
                        <li class="p_red">
                            <a href="#">
                                <img src="" alt="">
                            </a>
                        </li>
                        <li class="p_green">
                            <a href="#">
                                <img src="" alt="">
                            </a>
                        </li>
                        <li class="p_yellow">
                            <a href="#">
                                <img src="" alt="">
                            </a>
                        </li>
                        <li class="p_blue">
                            <a href="#">
                                <img src="" alt="">
                            </a>
                        </li>
                        <li class="p_red">
                            <a href="#">
                                <img src="" alt="">
                            </a>
                        </li>
                        <li class="p_green">
                            <a href="#">
                                <img src="" alt="">
                            </a>
                        </li>
                        <li class="p_blue">
                            <a href="#">
                                <img src="" alt="">
                            </a>
                        </li>
                    </ul>
                    <div class="prev" onclick="slides_left()"></div>
                    <div class="next" onclick="slides_right()"></div>
                </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
58
59
60
61
62
63
64
.popular-stores {
    width: 100%;
    height: 155px;
    margin-top: 30px;
}
.popular-stores ul {
    width: 100%;
    position: absolute;
    overflow: hidden;
    height: 115px;
}
.popular-stores h2 {
    margin-bottom: 20px;
}
.popular-stores ul li {
    position: relative;
    width: 113px;
    height: 115px;
    margin-right: 20px;
    border: 1px solid #cdcdcd;
}
.popular-stores ul li:last-child {
    margin-right: 0;
}
.popular-stores ul li a {
    display: block;
    line-height: 115px;
}
.p_red {
    background: red;
}
.p_green {
    background: green;
}
.p_blue {
    background: blue;
}
.p_yellow {
    background: yellow;
}
.prev, .next {
    width: 17px;
    height: 29px;
    background-image: url(../img/arrows.png);
    position: relative;
    cursor: pointer;
}
.prev {
    top: 40px;
    left: -30px;
    background-position: 0 0;
}
.next {
    float: right;
    top: 15px;
    right: -30px;
    background-position: -17px 0px;
}
.prev:hover {
    background-position: -36px 0px;
}
.next:hover {
    background-position: -53px 0px;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function slides_left() {
        $('.popular-stores ul li').css(
 
                "left", "-133px"
 
            );
        }
    function slides_right() {
        $('.popular-stores ul li').css(
 
                "right", "-133px"
 
            );
        }

@Lazy_Den · 25.11.2014, 20:51

bb_oo, ..."left", "-=133px"...

@bb_oo · 25.11.2014, 21:08 **[ТС]**

теперь при клике вообще ничего не происходит. В отладке ничего...

@Lazy_Den · 25.11.2014, 21:36

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

Для webkit-браузеров, нужно обязательно указать начальные значения для left и right в css. Хотя, для вашего случая - это должно быть одно значение:

JavaScript
1
2
3
4
// движемся влево
$('.popular-stores ul li').css("left", "-=133px");
// движемся вправо
$('.popular-stores ul li').css("left", "+=133px");

@bb_oo · 25.11.2014, 21:48 **[ТС]**

я имею в виду то, что вообще событий никаких не происходит! Быть может с css что не так?

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
.popular-stores {
    width: 100%;
    height: 155px;
    margin-top: 30px;
}
.popular-stores ul {
    position: absolute;
    overflow: hidden;
    height: 115px;
}
.popular-stores h2 {
    margin-bottom: 20px;
}
.popular-stores ul li {
    position: relative;
    width: 113px;
    height: 115px;
    margin-right: 20px;
    border: 1px solid #cdcdcd;
}
.popular-stores ul li:last-child {
    margin-right: 0;
}
.popular-stores ul li a {
    display: block;
    line-height: 115px;
}

@Lazy_Den · 25.11.2014, 21:51

bb_oo, я же уже написал! Где у вас для LI изначально прописано какое-то значение left в CSS? Не видите? И я вместе с Opera, Chrome и т.д. не наблюдаю.

@bb_oo · 25.11.2014, 22:11 **[ТС]**

а. точно. Но теперь когда прописал left: 0; Слайды двигаются влево. Но проблема в том, что left -=133px применятся для все li, следовательно новые элементы в список не добавляются, а просто все дружненько уходят за поля.
И при нажатии вправо тоже никакого действия нету...

Добавлено через 2 минуты
Эта затея с left -(+)= плохая, или не стабильная, скажем, потому что как потом сделать проверки на наличие последнего слайда.

Добавлено через 10 минут
Почти дошел до нужного решения. Но первом клике карусель вращается влево, а после влево уходит только 1-й элемент. Как сделать чтобы они все уходили на определнный промежуток?

JavaScript
1
2
3
4
5
function slide_left() {
        $('.popular-stores ul li:first-child').animate({
            marginLeft: '-=135px'},300
        );
    }

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

JavaScript
1
2
3
4
5
function slide_right() {
        $('.popular-stores ul li:first-child').animate({
            marginLeft: '+=135px'},300
        );
    }

Но опять же.Ка сделать проверку, последний ли был слайд.

Новые блоги и статьи Все статьи Все блоги /
Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .
Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	25.11.2014, 20:51
	bb_oo, ..."left", "-=133px"... 1

@bb_oo 15 / 15 / 9 Регистрация: 22.11.2013 Сообщений: 762
	25.11.2014, 21:08 [ТС]
	теперь при клике вообще ничего не происходит. В отладке ничего... 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	25.11.2014, 21:51
	bb_oo, я же уже написал! Где у вас для LI изначально прописано какое-то значение left в CSS? Не видите? И я вместе с Opera, Chrome и т.д. не наблюдаю. 0