Как сделать чтобы по кнопке перелистывались дивы

@trofey2 · Регистрация: 28.12.2015

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

добрый день. нужно чтобы по кнопке вперед и назад листались отзывы, чуть ниже надписи "что о нас говорят клиенты"
вот тут готовый сайт - https://live.verstaem.online/pravozashhitnik/
я попытался сделать но у меня даже див не летит а вместо него сама кнопка летит...
приношу извинения за бесконечные вопросы, но я что-то никак с этими анимациями сам думать не научусь

прикладываю архив с сайтом потому что если я вставляю код то пишет что слишком длинное сообщение

@mr_dramm · 10.05.2025, 09:34

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

прикладываю архив с сайтом потому что если я вставляю код то пишет что слишком длинное сообщение

Рекомендуется показывать минимальный объем кода для воспроизведения вашей проблемы.

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

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

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

Очень рекомендуется: Для того чтобы изучить верстку чужого сайта нужно использовать devtools(встроенный инструмент в браузер вызыывается с помощью нажатия кнопки f12).

Хорошо, что Вы используете flex, но используете не в полную силу. Отзывы оформлены как элемент "слайдер". Кнопки слайдера нужно сделать с помощью элемента button, элемент "a" используется если нужна работа с URL.

Проблемы:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.clients_angle {
    display: flex;
    /* flex-direction: row; это значение по умолчанию для flex-direction */
    justify-content: space-between;
    align-items: center; /* а это нужно для того чтобы выровнять по вертикали левый и правый блок*/
}
 
.angle90 {
    /* padding-top: 70px; не понятно зачем это тут тем более оно ломает верстку */
    width: 70px;
    height: 28px;
    display: flex
;
    /* flex-direction: row; */
    gap: 5px;
}

и конечно так анимация не сработает, потому что тут нет ничего связанного с анимацией и стили применяется к кнопке поэтому она меняет свое положение

CSS
1
2
3
4
       .angle90 .back_button:active {
            position: absolute;
            transform: translate(-300px, 0px);
        }

на готовом сайте используется библиотека Swiper

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const reviewsSlider = new Swiper('.reviews-slider .swiper', {
    spaceBetween: 24,
    autoHeight: true,
    breakpoints: {
        320: {
            slidesPerView: 1,
            spaceBetween: 24,
        },
        750: {
            slidesPerView: 1.3,
 
        },
        1289: {
            slidesPerView: 2,
        }
    },
 
      // Navigation arrows
    navigation: {
        nextEl: '.reviews-slider-next',
        prevEl: '.reviews-slider-prev',
    },
})

Я не поленился(желаю и Вам того же) написать минимальный объем кода для того чтобы можно было дальше доделывать и написал комментарии к верстке на основе моего опыта
Также оставлю ссылку на пример слайдера с анимацией на чистом js

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
 
    :root {
        /*  */
        --block-margin: 10px;
        /* для тестового примера одна высота для всех заголовков, 
      в реальном зависит от дизайна и опыта разработчика
      альтернативно можно использовать скалирование 
      calc(var(--block-header-height) * 2)  
      тоже самое касается и --block-margin*/
        --block-header-height: 40px;
    }
 
    .container {
        max-width: 900px;
        margin: 0 auto;
    }
 
    .reviews {
        /*   тут можно зада что то специфичное именно для секции reviews например фон */
    }
 
    .section-block {
        /*  что-то типичное для каждой секции например поля для каждой секции */
    }
 
    .section-header {
        display: flex;
        justify-content: space-between;
        /*   выравниваем блок заголовка и кнопок по вертикали     */
        align-items: center;
        /* с помощью внешнего отступа (margin-bottom) указываем отступ между блоками */
        margin-bottom: var(--block-margin);
        height: var(--block-header-height);
        /* border только для демонстрации выравнивания */
        border: solid;
    }
 
    .review {
        width: 400px;
        height: 300px;
        flex-shrink: 0;
        border: solid;
        display: flex;
        flex-direction: column;
    }
 
    .review-header {
        display: flex;
        height: var(--block-header-height);
        flex-shrink: 0;
        margin-bottom: var(--block-margin);
    }
 
    .review-header .user-avatar,
    .review-header .user-info {
        height: 100%;
    }
 
    .review-header .user-avatar {
        border-radius: 100%;
        background: gray;
        width: var(--block-header-height);
    }
 
    .review-header .user-info {
        background: gray;
        margin-left: var(--block-margin);
        flex: 1;
    }
 
    .review .review-text {
        flex: 1;
        background: gray;
    }
 
    .slider-items {
        overflow: hidden;
    }
 
    .slider-btns {
        display: flex;
        gap: var(--block-margin);
    }
 
    .reviews-items {
        display: flex;
        gap: var(--block-margin);
    }
    </style>
</head>
 
<body>
    <div class="container">
        <section class="reviews section-block">
            <div class="section-header">
                <h1 class="title">Отзывы</h1>
                <div class="slider-btns">
                    <!-- Для примера достаточно просто <>/ 
                    на рельном сайте используются обычно SVG-иконки 
                    или Unicode -->
                    <button class="slider-left" aria-label="Предыдущий отзыв">
                        < 
                    </button> 
                        / 
                    <button class="slider-right" aria-label="Спедующий отзыв">
                        >
                    </button>
                </div>
            </div>
            <div class="section-content slider-items">
                <div class="reviews-items">
                    <!-- review семантический блок -->
                    <article class="review">
                        <div class="review-header">
                            <div class="user-avatar"></div>
                            <div class="user-info"></div>
                        </div>
                        <div class="review-text"></div>
                    </article>
                    <article class="review">
                        <div class="review-header">
                            <div class="user-avatar"></div>
                            <div class="user-info"></div>
                        </div>
                        <div class="review-text"></div>
                    </article>
                    <article class="review">
                        <div class="review-header">
                            <div class="user-avatar"></div>
                            <div class="user-info"></div>
                        </div>
                        <div class="review-text"></div>
                    </article>
                </div>
            </div>
        </section>
    </div>
</body>
 
</html>

@trofey2 · 12.05.2025, 12:26 **[ТС]**

спасибо большое. java script я пока еще не изучал, но попробую разобраться с вашим кодом, видимо уже пора

Добавлено через 36 минут
а ваш код это чисто css с html? только оно у вас не слайдится что самое главное

@mr_dramm · 12.05.2025, 21:14

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

а ваш код это чисто css с html? только оно у вас не слайдится что самое главное

Да, так и есть, я надеялся что Вы его доделаете. Для этого оставил ссылку на слайдер, который работает один в один как тот что Вам нужен.

Для изучения js html css оставлю ссылки на пару сайтов learn.javascript.ru и doka.guide с актуальными онлайн учебниками

Оставлю решение смотреть его или сделать самому решайте сами

Кликните здесь для просмотра всего текста

PHP/HTML
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
 
      :root {
        /*  */
        --block-margin: 10px;
        /* для тестового примера одна высота для всех заголовков, 
      в реальном зависит от дизайна и опыта разработчика
      альтернативно можно использовать скалирование 
      calc(var(--block-header-height) * 2)  
      тоже самое касается и --block-margin*/
        --block-header-height: 40px;
        --container-width: 900px;
      }
 
      .container {
        width: var(--container-width);
        margin: 0 auto;
      }
 
      .reviews {
        /*   тут можно зада что то специфичное именно для секции reviews например фон */
      }
 
      .section-block {
        /*  что-то типичное для каждой секции например поля для каждой секции */
      }
 
      .section-header {
        display: flex;
        justify-content: space-between;
        /*   выравниваем блок заголовка и кнопок по вертикали     */
        align-items: center;
        /* с помощью внешнего отступа (margin-bottom) указываем отступ между блоками */
        margin-bottom: var(--block-margin);
        height: var(--block-header-height);
        /* border только для демонстрации выравнивания */
        border: solid;
      }
 
      .review {
        /* хотим уместить два отзыва на страницу */
        width: calc(var(--container-width) / 2 - var(--block-margin) / 2);
        height: 300px;
        flex-shrink: 0;
        border: solid;
        display: flex;
        flex-direction: column;
      }
 
      .review-header {
        display: flex;
        height: var(--block-header-height);
        flex-shrink: 0;
        margin-bottom: var(--block-margin);
      }
 
      .review-header .user-avatar,
      .review-header .user-info {
        height: 100%;
      }
 
      .review-header .user-avatar {
        border-radius: 100%;
        background: gray;
        width: var(--block-header-height);
      }
 
      .review-header .user-info {
        background: gray;
        margin-left: var(--block-margin);
        flex: 1;
      }
 
      .review .review-text {
        flex: 1;
        background: gray;
      }
 
      .slider-items {
        overflow: hidden;
      }
 
      .slider-btns,
      .reviews-items {
        display: flex;
        gap: var(--block-margin);
      }
 
      .reviews-items {
        /* анимация с помощью transition */
        transform: translateX(0);
        transition: transform 300ms linear;
      }
    </style>
  </head>
 
  <body>
    <template id="block-review">
      <article class="review">
        <div class="review-header">
          <div class="user-avatar"></div>
          <div class="user-info"></div>
        </div>
        <div class="review-text"></div>
      </article>
    </template>
    <div class="container">
      <section class="reviews section-block">
        <div class="section-header">
          <h1 class="title">Отзывы</h1>
          <div class="slider-btns">
            <!-- Для примера достаточно просто <>/ 
                    на рельном сайте используются обычно SVG-иконки 
                    или Unicode -->
            <button class="slide-prev" aria-label="Предыдущий отзыв"><</button>
            /
            <button class="slide-next" aria-label="Спедующий отзыв">></button>
          </div>
        </div>
        <div class="section-content slider-items">
          <div class="reviews-items">
            <!-- тут будут отзывы созданные динамически с помощью js из брока template -->
          </div>
        </div>
      </section>
    </div>
    <script>
      const btnPrev = document.querySelector(".slider-btns .slide-prev"),
        btnNext = document.querySelector(".slider-btns .slide-next"),
        reviewsItems = document.querySelector(".reviews-items"),
        template = document.getElementById("block-review").content;
 
      // количество отзывов
      const n = 4;
 
      for (let i = 0; i < n; i++) {
        reviewsItems.appendChild(template.cloneNode(true));
        reviewsItems.children[i].querySelector(".user-info").innerHTML =
          "user" + (i + 1);
      }
 
      const reviewWidth = reviewsItems.children[0].offsetWidth,
        gap = reviewsItems.children[1].offsetLeft - reviewWidth;
 
      let current = 0;
      // m +1 вперед -1 назад
      const slide = (m) => {
        current += m;
        if (current > n - 2) current = 0;
        if (current < 0) current = n - 2;
        reviewsItems.style.transform = `translateX(-${
          current * reviewWidth + current * gap
        }px)`;
      };
      btnPrev.addEventListener("click", () => slide(-1));
      btnNext.addEventListener("click", () => slide(1));
    </script>
  </body>
</html>

@trofey2 · 13.05.2025, 15:20 **[ТС]**

спасибо. прикручу это к сайту а потом буду видимо javascript учить

а что такое --block-margin, --block-header-? в гугле даже ищещь и ничего не находит
--container-width еще туда же

Добавлено через 47 минут
и не понятно вот я например в

HTML5
1
2
3
<div class="user-avatar">
                        <img src="img/anastasia.png" alt="Логинова Анастасия" width="80px" height="80px">
                    </div>

пишу картинку аватара, а она на два отзыва сразу видимых используется, как каждый отзыв отдельно забить?

а сюда

HTML5
1
<div class="user-info">

пишешь тут инфо по аватару вообще не видно что пишешь

Добавлено через 2 часа 33 минуты
еще вопрос вот у вас кнопки которыми страницы перелистываются сделаны как button и они видны как кнопки а я вместо скобки туда картинку вставил но она все равно как кнопка я добавил фон но все равно как кнопка

CSS
1
2
3
.slide-prev {
        background-color: #ffffff;
      }

как ее сделать чтобы просто как картинка она была?

@voraa · 13.05.2025, 17:39

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

а что такое --block-margin, --block-header-?

Это переменные в CSS. Они всегда начинаются с --. И что бы вставить значение в нужном месте используется конструкция
var(--переменная)
См https://developer.mozilla.org/... properties

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

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

как ее сделать чтобы просто как картинка она была?

Убрать (переопределить) стили для кнопки - границы и все остальное.

@mr_dramm · 13.05.2025, 17:58

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

пишу картинку аватара, а она на два отзыва сразу видимых используется, как каждый отзыв отдельно забить?

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

пишешь тут инфо по аватару вообще не видно что пишешь

Если используете пример с анимацией, то указывайте url картинки и описание .user-info в этом цикле

JavaScript
1
2
3
4
5
      for (let i = 0; i < n; i++) {
        reviewsItems.appendChild(template.cloneNode(true));
        reviewsItems.children[i].querySelector(".user-info").innerHTML =
          "user" + (i + 1);
      }

альтернативно можно отказаться от использования template, и размещать отзывы непосредственно в блоке reviews-items

PHP/HTML
1
2
3
4
5
        <div class="section-content slider-items">
          <div class="reviews-items">
            <!-- скопировать сюда содержимое блока template отдельно для каждого отзыва -->
          </div>
        </div

, но тогда нужно переписать js заменить строчки

JavaScript
1
2
3
4
5
6
7
8
      // количество отзывов
      const n = 4;
 
      for (let i = 0; i < n; i++) {
        reviewsItems.appendChild(template.cloneNode(true));
        reviewsItems.children[i].querySelector(".user-info").innerHTML =
          "user" + (i + 1);
      }

на

JavaScript
1
2
      // количество отзывов
      const n = reviewsItems.children.length

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

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

Сделать картинку в кнопке можно например напимер так

PHP/HTML
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
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Кнопка с изображением</title>
    <style>
        .button-with-image {
            background-color: transparent; 
            border: none; 
            cursor: pointer; 
            padding: 0;
        }
        .button-with-image img {
            width: 200px; 
            height: auto;
/*
У строчных элементов есть спуски (inline descenders), 
по этой причине картинки нужно делать display: block, 
иначе снизу картинки останется несколько пикселей отступа до следующего блока.
в этом примере это не играет роли так как у кнопки выставлен background-color: transparent; 
но в некоторых случаях может быть полезно
*/
            display: block;
        }
    </style>
</head>
<body>
 
<button class="button-with-image">
    <img src="https://placehold.co/200x100" alt="Описание изображения">
</button>
 
</body>
</html>

Дополнительно прочитаейте про сброс стилей браузера например эту статью, особенно про отступы которые добавялются для inline элементов немного старая статья, но по большей части актуальная

@trofey2 · 14.05.2025, 16:49 **[ТС]**

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

Если используете пример с анимацией, то указывайте url картинки и описание .user-info в этом цикле

я в java script'e ничего не понимаю, куда писать инфу (картинку аватара с описанием) скажите пожалуйста конкретнее

@mr_dramm · 14.05.2025, 21:20

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

я в java script'e ничего не понимаю

даже если Вы сверстаете этот макет, то необходимость в понимании js не отпадет, потому что без js будет трудно в frontend. В этом макете js было очень мало и он очень простой, но это уже создало трудности для Вас. Во многих макетах есть ленивая загрузка, работа с графиками, сложной анимацией и т.д. , это все будет с более сложным js.

Не торопитесь сделать быстро и ничего не понять

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

куда писать инфу (картинку аватара с описанием) скажите пожалуйста конкретнее

я написал

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

размещать отзывы непосредственно в блоке reviews-items

и далее по тексту

тут решение

Кликните здесь для просмотра всего текста

PHP/HTML
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
 
      :root {
        /*  */
        --block-margin: 10px;
        /* для тестового примера одна высота для всех заголовков, 
      в реальном зависит от дизайна и опыта разработчика
      альтернативно можно использовать скалирование 
      calc(var(--block-header-height) * 2)  
      тоже самое касается и --block-margin*/
        --block-header-height: 40px;
        --container-width: 900px;
      }
 
      .container {
        width: var(--container-width);
        margin: 0 auto;
      }
 
      .reviews {
        /*   тут можно зада что то специфичное именно для секции reviews например фон */
      }
 
      .section-block {
        /*  что-то типичное для каждой секции например поля для каждой секции */
      }
 
      .section-header {
        display: flex;
        justify-content: space-between;
        /*   выравниваем блок заголовка и кнопок по вертикали     */
        align-items: center;
        /* с помощью внешнего отступа (margin-bottom) указываем отступ между блоками */
        margin-bottom: var(--block-margin);
        height: var(--block-header-height);
        /* border только для демонстрации выравнивания */
        border: solid;
      }
 
      .review {
        /* хотим уместить два отзыва на страницу */
        width: calc(var(--container-width) / 2 - var(--block-margin) / 2);
        height: 300px;
        flex-shrink: 0;
        border: solid;
        display: flex;
        flex-direction: column;
      }
 
      .review-header {
        display: flex;
        height: var(--block-header-height);
        flex-shrink: 0;
        margin-bottom: var(--block-margin);
      }
 
      .review-header .user-avatar,
      .review-header .user-info {
        height: 100%;
      }
 
      .review-header .user-avatar {
        border-radius: 100%;
        background: gray;
        width: var(--block-header-height);
      }
      .user-avatar{
        overflow: hidden;
      }
      .avatar-img {
        width: 100%;
        height: auto;
        display: block;
      }
      .review-header .user-info {
        background: gray;
        margin-left: var(--block-margin);
        flex: 1;
      }
 
      .review .review-text {
        flex: 1;
        background: gray;
      }
 
      .slider-items {
        overflow: hidden;
      }
 
      .slider-btns,
      .reviews-items {
        display: flex;
        gap: var(--block-margin);
      }
 
      .reviews-items {
        /* анимация с помощью transition */
        transform: translateX(0);
        transition: transform 300ms linear;
      }
    </style>
  </head>
 
  <body>
    <template id="block-review">
      <article class="review">
        <div class="review-header">
          <div class="user-avatar"></div>
          <div class="user-info"></div>
        </div>
        <div class="review-text"></div>
      </article>
    </template>
    <div class="container">
      <section class="reviews section-block">
        <div class="section-header">
          <h1 class="title">Отзывы</h1>
          <div class="slider-btns">
            <!-- Для примера достаточно просто <>/ 
                    на рельном сайте используются обычно SVG-иконки 
                    или Unicode -->
            <button class="slide-prev" aria-label="Предыдущий отзыв"><</button>
            /
            <button class="slide-next" aria-label="Спедующий отзыв">></button>
          </div>
        </div>
        <div class="section-content slider-items">
          <div class="reviews-items">
            <article class="review">
              <div class="review-header">
                <div class="user-avatar">
                  <img
                    class="avatar-img"
                    src="https://placehold.co/100x100"
                    alt="Аватар пользователя user1"
                  />
                </div>
                <div class="user-info">user1</div>
              </div>
              <div class="review-text"></div>
            </article>
            <article class="review">
              <div class="review-header">
                <div class="user-avatar">
                  <img
                    class="avatar-img"
                    src="https://placehold.co/100x100"
                    alt="Аватар пользователя user2"
                  />
                </div>
                <div class="user-info">user2</div>
              </div>
              <div class="review-text"></div>
            </article>
 
            <article class="review">
              <div class="review-header">
                <div class="user-avatar">
                  <img
                    class="avatar-img"
                    src="https://placehold.co/100x100"
                    alt="Аватар пользователя user3"
                  />
                </div>
                <div class="user-info">user3</div>
              </div>
              <div class="review-text"></div>
            </article>
            <article class="review">
              <div class="review-header">
                <div class="user-avatar">
                  <img
                    class="avatar-img"
                    src="https://placehold.co/100x100"
                    alt="Аватар пользователя user4"
                  />
                </div>
                <div class="user-info">user4</div>
              </div>
              <div class="review-text"></div>
            </article>
          </div>
        </div>
      </section>
    </div>
    <script>
      const btnPrev = document.querySelector(".slider-btns .slide-prev"),
        btnNext = document.querySelector(".slider-btns .slide-next"),
        reviewsItems = document.querySelector(".reviews-items"),
        template = document.getElementById("block-review").content;
 
      const reviewWidth = reviewsItems.children[0].offsetWidth,
        gap = reviewsItems.children[1].offsetLeft - reviewWidth;
      const n = reviewsItems.children.length;
      let current = 0;
      // m +1 вперед -1 назад
      const slide = (m) => {
        current += m;
        if (current > n - 2) current = 0;
        if (current < 0) current = n - 2;
        reviewsItems.style.transform = `translateX(-${
          (reviewWidth + gap) * current
        }px)`;
      };
      btnPrev.addEventListener("click", () => slide(-1));
      btnNext.addEventListener("click", () => slide(1));
    </script>
  </body>
</html>

@trofey2 · 15.05.2025, 15:09 **[ТС]**

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

Не торопитесь сделать быстро и ничего не понять

спасибо что показали как сделать разные отзывы. я просто и хтмл с цсс не очень знаю, думал сначала их подтянуть, или вы считаете что лучше пораньше java script начать учить?

@mr_dramm · 16.05.2025, 14:10

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

я просто и хтмл с цсс не очень знаю, думал сначала их подтянуть, или вы считаете что лучше пораньше java script начать учить?

Лучше всего изучать HTML, CSS и JavaScript в связке, но с правильным поэтапным подходом, так как они тесно связаны друг с другом.

Рекомендую пройти курсы платные или бесплатные решайте сами. Курсы выстраивают логическую цепочку от простого к сложному и в курсах есть задания и проекты, которые помогают закреплять знания. На курсах часто есть наставники. Некотрые платные курсы обещают помощь в трудоустройстве

Также есть много сайтов с задачами, которые можно найти по словосочетанию frontend problems / contests / challenges

Frontend это не только языки, а также экосистема библиотек / инструментов / технологий.

При возникновении недопонимания или сомнения можно найти ответ в первоисточнике :
- HTML Living Standard (WHATWG)
- ECMAScript спецификация (JavaScript)
- CSS спецификации (W3C) – самый сложный язык по сравнению с HTML и JS по объему и частоте обновления, рекомендуется сначала найти то что нужно на сайте MDN, а там найти ссылку на нужную спецификацию. Также у него есть препроцессоры и постпроцессоры, и много техник встраивания стилей на сайт: css modules, tailwind, css in js и т.д. И приплюсуем к этом библиотеки стилизации так что это наверное будет сложность от проекта к проекту постоянная.

@trofey2 · 23.05.2025, 15:35 **[ТС]**

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

Также есть много сайтов с задачами, которые можно найти по словосочетанию frontend problems / contests / challenges

а на русском таких сайтов нет?

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@trofey2 0 / 0 / 0 Регистрация: 28.12.2015 Сообщений: 219
	12.05.2025, 12:26 [ТС]
	спасибо большое. java script я пока еще не изучал, но попробую разобраться с вашим кодом, видимо уже пора Добавлено через 36 минут а ваш код это чисто css с html? только оно у вас не слайдится что самое главное 0

Как сделать чтобы по кнопке перелистывались дивы

Решение