Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
0 / 0 / 0
Регистрация: 01.04.2024
Сообщений: 14

как мне закрепить стрелки для слайдеров так, чтобы они казались "прикрепленными" к нумерации?

05.12.2024, 21:38. Показов 399. Ответов 3

Студворк — интернет-сервис помощи студентам
У меня есть слайдер, который должен иметь нумерацию с левой стороны, обрамленную стрелками. Это можно изобразить следующим образом: слайды | < 01/08 >. У меня большая проблема со стрелками. Прежде всего, я не думаю, что правильно их размещаю, как будто это не должно быть сделано через margin. Кроме того, как будто они должны быть в одном блоке с нумерацией?..Также в мобильной версии стрелки остаются вверху, хотя они должны перемещаться вместе с нумерацией ПОД слайдер. В общем, я не понимаю, как работать со стрелками. Я попытался прочитать информацию и изменить код, но все ломается. (появляются лишние стрелки и другие баги)

Весь код:
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
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
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
<!DOCTYPE html>
<html lang="ru">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Отзывы клиентов</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
 
        body {
            font-family: 'Montserrat', sans-serif;
        }
 
        #testimonials h2 {
            font-weight: 700;
            font-size: 42px;
            margin-bottom: 106px;
            margin-top: 0;
            text-align: center;
            color: #050c33;
        }
 
        #testimonials .content {
            width: 980px;
            max-width: 100%;
            margin: auto;
            margin-top: 74px;
            position: relative;
        }
 
        #testimonials .content:before,
        #testimonials .content:after {
            content: "";
            border: 1px solid rgba(0, 0, 0, .1);
            box-shadow: 0px 4px 60px rgba(162, 162, 162, .25);
            position: absolute;
            left: 64px;
            right: 64px;
        }
 
        #testimonials .content:before {
            top: -40px;
            bottom: 0;
            opacity: .7;
            border-radius: 5px;
        }
 
        #testimonials .content:after {
            background: #fff;
            opacity: .34;
            border-radius: 5px;
            top: -72px;
            bottom: 0;
            left: 128px;
            right: 128px;
        }
 
        #testimonials .slick {
            display: flex;
            flex-wrap: wrap;
            position: relative;
            z-index: 10;
            background: #fff;
            border: 1px solid rgba(0, 0, 0, .1);
            box-shadow: 0px 4px 60px rgba(162, 162, 162, .25);
            border-radius: 5px;
            padding: 66px 0 66px 68px;
        }
 
        #testimonials .slick-slider {
            width: 64%;
            float: left;
            padding-right: 60px;
            border-right: 1px solid #cdcdcd;
            padding: 14px 60px;
        }
 
        #testimonials .arrow {
            width: 36%;
            float: left;
            display: flex;
        }
 
        #testimonials .arrow-wrapper {
            margin: auto;
        }
 
        #testimonials .slide-num {
            display: inline-block;
            margin: 0 46px;
            font-size: 28px;
            vertical-align: middle;
            color: #e0e0e0;
        }
 
        #testimonials .logo img {
            margin: 0 0 40px;
        }
 
        #testimonials .report-text {
            margin-bottom: 28px;
            font-weight: 700;
            font-size: 14px;
            line-height: 1.2;
            color: #050c33;
            outline: none;
        }
 
        #testimonials .report-author {
            font-weight: 500;
            font-size: 14px;
            line-height: 1.2;
            color: #838b9c;
        }
 
        #testimonials .report-text a,
        #testimonials .report-author a {
            color: #050c33;
            outline: none;
            font-weight: 400;
        }
 
        #testimonials .slide-num-digit:nth-child(-n+2) {
            color: #050c33;
        }
 
        .slick-prev {
            margin: 0 76%;
            vertical-align: middle;
            font-size: 0;
        }
 
        .slick-next {
            margin: 0 9%;
            vertical-align: middle;
            font-size: 0;
        }
 
        .slick-prev:before,
        .slick-next:before {
            font-size: 20px;
            color: black;
        }
 
 
        @media (max-width: 560px) {
            #testimonials {
                margin-bottom: 110px;
                padding-top: 35px;
            }
 
            #testimonials .content {
                margin-top: 48px;
            }
 
            #testimonials .content:after {
                left: 68px;
                right: 68px;
                top: -48px;
            }
 
            #testimonials .content:before {
                left: 34px;
                right: 34px;
                top: -25px;
            }
 
            #testimonials .slick {
                display: block;
                padding: 15px;
            }
 
            #testimonials .slick-slider,
            #testimonials .arrow {
                width: 100%;
                float: none;
                display: block;
                padding: 20px 15px;
                border: none;
            }
 
            #testimonials .arrow {
                text-align: center;
                border-top: 1px solid #cdcdcd;
            }
 
            #testimonials .arrow-wrapper {
                display: inline-block;
            }
        }
    </style>
</head>
 
<body>
 
    <section id="testimonials">
 
        <h2 class="block-title">Testimonials</h2>
 
        <div class="form-group">
            <div class="content">
                <div class="slick" data-blazy="">
                    <div id="slick-slider"  class="slick-slider">
 
                        <div class="slick-slide">
                            <div class="logo">
                                <img loading="lazy" src="logo_0.png" width="78" height="46" alt="Ciel parfum" />
                            </div>
                            <div class="report-text">
                                <div class="field-content">The long search for the one and only master on the
                                    long-suffering site www.cielparfum.com which was assembled by an extremely
                                    incompetent programmer and once a month stably threatened to die, led me to the
                                    site and, as a result, to the guys from Drupal-coder. And for almost six months
                                    now, not a day has passed that I haven't been surprised and pleased with my
                                    luck! Fixed everything that didn't work - from the search to the menu display.
                                    We carried out a redesign - without departing from the desired, but with its own
                                    significant and high-quality additions. We have implemented a number of projects
                                    - contests, tests, etc. And there are countless minor repairs and improvements!
                                    And most importantly - everything is high-quality and fast (despite not the
                                    "fastest" tariff). There are questions - the wonderful Alexey will always
                                    prompt, support, repair and / or just make from scratch. There is an idea for
                                    implementation - the wonderful Sergey will discuss and offer the ideal option.
                                    There is a problem - wonderful Nadezhda и Roman will fix, correct, do! The guys
                                    proved that this CMS is a powerful and competent management system. I hope that
                                    our cooperation will last for a long time! Thanks!!!</div>
                            </div>
                            <div class="report-author">
                                <div class="field-content">Sincerely, Natalia Sushkova, Head of the Web Projects<br>
                                    Department of the Si El Perfume Group of<br>
                                    Companies&nbsp;<a href="http://www.cielparfum.com/">http://www.cielparfum.com/</a>
                                </div>
                            </div>
                        </div>
 
                        <div class="slick-slide">
                            <div class="logo">
                                <img loading="lazy" src="logo.png" width="113" height="46" alt="personal-writer.com" />
                            </div>
                            <div class="report-text">
                                <div class="field-content">Sergey is a professional, highly qualified programmer
                                    with extensive experience in IT. I have been communicating with top freelancers
                                    for a long time (the entire top twenty) on the weblancer and I can say that THEY
                                    WERE NOT LYING AROUND WITH SERGEY. We are still working with Sergey. It's a
                                    pleasure to work with him, I'm happy.</div>
                            </div>
                            <div class="report-author">
                                <div class="field-content">Sergey Chepurko, Project Manager&nbsp;<a
                                        href="http://www.personal-writer.com/">www.personal-writer.com</a>&nbsp;/&nbsp;<a
                                        href="http://www.writers-united.org/">www.writers-united.org</a></div>
                            </div>
                        </div>
 
                        <div class="slick-slide">
                            <div class="logo">
                                <img loading="lazy" src="farbors_ru.jpg" width="192" height="46" alt="farbors.ru" />
                            </div>
                            <div class="report-text">
                                <div class="field-content">I express my deepest gratitude to the team of spe******ts
                                    "Initlab" and personally to Dmitry Kupyansky and Alexei Sinitsa. Drupal with
                                    additional functionality. Everything was done with the highest quality and
                                    exactly in time. Everyone wants without nerves and unnecessary questions.</div>
                            </div>
                            <div class="report-author">
                                <div class="field-content">Leonid Alexandrovich Ledovsky</div>
                            </div>
                        </div>
 
                        <div class="slick-slide">
                            <div class="logo">
                                <img loading="lazy" src="nashagazeta_ch.png" width="157" height="46"
                                    alt="nashagazeta.ch" />
                            </div>
                            <div class="report-text">
                                <div class="field-content">My electronic newspaper www.nashagazeta.ch exists in
                                    Switzerland for 10 years already. During this time, we changed 7 technical
                                    support spe******ts, and only now, in the last few months, since the beginning
                                    of cooperation with Alexei Sinitsa and his team, for the first time I felt that
                                    I have a reliable technical rear. Without loud words and promises, the guys just
                                    calmly and qualitatively do the job, respond quickly, find solutions, offer
                                    concrete options for improving the functioning of the site and they themselves
                                    quickly implement it. Cooperation with them is a pleasure!</div>
                            </div>
                            <div class="report-author">
                                <div class="field-content">Nadezhda Sikorska, Geneva, Switzerland</div>
                            </div>
                        </div>
 
                        <div class="slick-slide">
                            <div class="logo">
                                <img loading="lazy" src="logo-estee.png" width="99" height="46" alt="estee-design.ru" />
                            </div>
                            <div class="report-text">
                                <div class="field-content">Our company Estee Design is engaged in interior design.
                                    The site was created on Drupal. We were looking for programmers to perform a
                                    number of small changes and adjustments on the site. After talking with Alexey
                                    Sinitsa, we decided to start working with Initlab/drupal-coder. We are 100%
                                    satisfied with our cooperation. A clear and understandable communication system,
                                    a fairly prompt solution to the tasks. They gave recommendations for improving
                                    the software part of the site, fixed a number of hidden errors. I never write
                                    reviews (I don't have time), but in this case, at Alexey's request, I can't help
                                    but recommend Initlab to other people - really a company of professionals.</div>
                            </div>
                            <div class="report-author">
                                <div class="field-content">Vadim Kuzin, Head of the construction direction of the
                                    Estee Interior Design Bureau <a href="http://estee-design.ru">estee-design.ru</a>
                                </div>
                            </div>
                        </div>
 
                        <div class="slick-slide">
                            <div class="logo">
                                <img loading="lazy" src="cableman_ru.png" width="200" height="41" alt="cableman.ru" />
                            </div>
                            <div class="report-text">
                                <div class="field-content">Our company has changed several teams of programmers and
                                    technical support spe******ts for several years, and almost despaired of finding
                                    an adequate professional offer at a reasonable price on the Russian market.
                                    Until we started working with the Initlab team, which embodies all our ideas
                                    about a normal system of interaction combined with professional indifference.
                                    For the first time in my business practice, I feel that the most important tasks
                                    in the life of electronic media are reliably covered, despite the fact that my
                                    colleagues work hundreds of kilometers away from us and we have never met in
                                    person.</div>
                            </div>
                            <div class="report-author">
                                <div class="field-content">Konstantin Belsky, Deputy General Director of the portal
                                    <a href="http://www.cableman.ru/">Кабельщик.ру</a>
                                </div>
                            </div>
                        </div>
 
                        <div class="slick-slide">
                            <div class="logo">
                                <img loading="lazy" src="logo_2.png" width="165" height="46" alt="www.serebro.ag" />
                            </div>
                            <div class="report-text">
                                <div class="field-content">For quite a long period (2014 - 2016) of very intensive
                                    work (the online store on the insanely confused Drupal 6: eliminated the jambs
                                    of developers, accelerated the site, made a lot of new functions, etc.) - only
                                    the kindest emotions from working with the Initlab / Drupal-coder team: you can
                                    always count on quick and intelligent help, support, advice. Even now, despite
                                    the fact that we have not been working on a permanent basis for almost a year
                                    (the tasks ended banally), a problem with the site that accidentally occurred
                                    was solved instantly! In general, only the most sincere thanks and
                                    recommendations! Thank you!</div>
                            </div>
                            <div class="report-author">
                                <div class="field-content">Sincerely, Vladislav, <a
                                        href="http://serebro.ag">Serebro.Ag</a></div>
                            </div>
                        </div>
 
                        <div class="slick-slide">
                            <div class="logo">
                                <img loading="lazy" src="lpcma_rus_v4.jpg" width="110" height="46"
                                    alt="http://lpcma.tsu.ru/en" />
                            </div>
                            <div class="report-text">
                                <div class="field-content">I wanted to thank for working on our sites. In 4 months
                                    of work, put the site in order, and most importantly, we got a tool with which
                                    we can now quickly and beautifully display content for education and work with
                                    enterprises</div>
                            </div>
                            <div class="report-author">
                                <div class="field-content">Dmitry Novikov, <a
                                        href="http://lpcma.tsu.ru">lpcma.tsu.ru</a></div>
                            </div>
                        </div>
 
                    </div>
                    <nav role="navigation" class="arrow">
                        <div class="arrow-wrapper">
                            <button type="button" class="slick-prev" aria-label="Предыдущий">&lt;</button>
                            <span class="slide-num"></span>
                            <button type="button" class="slick-next" aria-label="Следующий">&gt;</button>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </section>
JavaScript
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
   <script>
        $(document).ready(function () {
            var $slider = $('.slick-slider');
 
            $slider.slick({
                adaptiveHeight: true,
                fade: true,
                arrows: false,
                dots: false,
                lazyLoad: 'ondemand',
                infinite: true,
                speed: 300,
                slidesToShow: 1,
                slidesToScroll: 1
 
            });
 
            function updateSlideCounter(currentIndex, totalSlides) {
                var currentText = (currentIndex + 1).toString().padStart(2, '0');
                var totalText = totalSlides.toString().padStart(2, '0');
 
                var counterHTML = '';
                for (let i = 0; i < 2; i++) {
                    counterHTML += `<span class="slide-num-digit">${currentText[i]}</span>`;
                }
                counterHTML += `/`;
                for (let i = 0; i < 2; i++) {
                    counterHTML += `<span class="slide-num-digit">${totalText[i]}</span>`;
                }
 
                $('.slide-num').html(counterHTML);
            }
 
            var totalSlides = $slider.slick('getSlick').slideCount;
            updateSlideCounter(0, totalSlides);
 
            $slider.on('afterChange', function (event, slick, currentSlide) {
                updateSlideCounter(currentSlide, totalSlides);
            });
 
            $('.slick-prev').on('click', function () {
                $slider.slick('slickPrev');
            });
 
            $('.slick-next').on('click', function () {
                $slider.slick('slickNext');
            });
        });
    </script>
HTML5
1
2
3
</body>
 
</html>
В общем виде слайдер должен выглядеть примерно так:

-------------------------------
|
слайды | < 01/08 >
|
-------------------------------
(стрелки прям так же должны выглядеть. И вот эта "линия" между слайдами и остальной части тоже есть. Они как бы разделены на два блока, но при этом стрелки как будто не находятся в нужном блоке)
0
Лучшие ответы (1)
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
05.12.2024, 21:38
Ответы с готовыми решениями:

Как мне склеить таблицы в одну так, чтобы они шли в заданном порядке?
Привет, Я новичек в Lua. У меня есть 4 таблицы с данными. Например: https://pastebin.com/hrShSSD0 Как мне склеить таблицы в...

Как закрепить элементы, чтобы при масштабировании браузера они не слезали?
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt; &lt;title&gt;Безымянная...

Как сделать так чтобы при спавне предметов они отталкивались друг от друга если они спавнятся близко С#
Есть загвоздка, не как не могу понять как это релизовать, приведу пример : происходит спавн кубов рандомно, и некоторые могу быть дуг на...

3
Надуваю лягушек
Эксперт PHP
 Аватар для Царь Бабай
289 / 219 / 93
Регистрация: 01.05.2014
Сообщений: 741
06.12.2024, 13:28
Лучший ответ Сообщение было отмечено Demyanov_ как решение

Решение

Может примерно так поиграть со стилями
Миниатюры
как мне закрепить стрелки для слайдеров так, чтобы они казались "прикрепленными" к нумерации?   как мне закрепить стрелки для слайдеров так, чтобы они казались "прикрепленными" к нумерации?  
1
0 / 0 / 0
Регистрация: 01.04.2024
Сообщений: 14
06.12.2024, 20:50  [ТС]
Здравствуйте! Мне вроде как удалось исправить проблему, которую я описывал выше, но появилась новая: при нажатии на стрелку, она становится невидимой. В интернете советовали добавить в код hover и выставить opacity, но это мне не помогло. Быть может вы знаете, как это исправить?

Исправленный код:
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
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
220
221
222
223
224
225
226
227
228
229
230
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
 
        body {
            font-family: 'Montserrat', sans-serif;
        }
 
        #testimonials.slick-prev,
        #testimonials.slick-next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            z-index: 10;
        }
 
        #testimonials h2 {
            font-weight: 700;
            font-size: 42px;
            margin-bottom: 106px;
            margin-top: 0;
            text-align: center;
            color: #050c33;
        }
 
        #testimonials .content {
            width: 980px;
            max-width: 100%;
            margin: auto;
            margin-top: 74px;
            position: relative;
        }
 
        #testimonials .content:before,
        #testimonials .content:after {
            content: "";
            border: 1px solid rgba(0, 0, 0, .1);
            box-shadow: 0px 4px 60px rgba(162, 162, 162, .25);
            position: absolute;
            left: 64px;
            right: 64px;
        }
 
        #testimonials .content:before {
            top: -40px;
            bottom: 0;
            opacity: .7;
            border-radius: 5px;
        }
 
        #testimonials .content:after {
            background: #fff;
            opacity: .34;
            border-radius: 5px;
            top: -72px;
            bottom: 0;
            left: 128px;
            right: 128px;
        }
 
        #testimonials .slick {
            display: flex;
            flex-wrap: wrap;
            position: relative;
            z-index: 10;
            background: #fff;
            border: 1px solid rgba(0, 0, 0, .1);
            box-shadow: 0px 4px 60px rgba(162, 162, 162, .25);
            border-radius: 5px;
            padding: 66px 0 66px 68px;
        }
 
        #testimonials .slick-slider {
            width: 64%;
            float: left;
            padding-right: 60px;
            border-right: 1px solid #cdcdcd;
            padding: 14px 60px;
        }
 
        #testimonials .arrow {
            width: 36%;
            float: left;
            display: flex;
            justify-content: center;
            align-items: center;
        }
 
        #testimonials .arrow-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
        }
 
        #testimonials .slide-num {
            display: inline-block;
            margin: 0 20px;
            font-size: 28px;
            vertical-align: middle;
            color: #e0e0e0;
        }
 
        #testimonials .logo img {
            margin: 0 0 40px;
        }
 
        #testimonials .report-text {
            margin-bottom: 28px;
            font-weight: 700;
            font-size: 14px;
            line-height: 1.2;
            color: #050c33;
            outline: none;
        }
 
        #testimonials .report-author {
            font-weight: 500;
            font-size: 14px;
            line-height: 1.2;
            color: #838b9c;
        }
 
        #testimonials .report-text a,
        #testimonials .report-author a {
            color: #050c33;
            outline: none;
            font-weight: 400;
        }
 
        #testimonials .slide-num-digit:nth-child(-n+2) {
            color: #050c33;
        }
 
        .slick-prev,
        .slick-next {
            position: static;
            transform: none;
            margin: 0 10px;
            border: none;
            cursor: pointer;
            width: 30px;
            height: 30px;
        }
 
        .slick-prev {
            background: url('arrow-left.jpg') no-repeat center center;
            background-size: contain;
            
        }
 
        .slick-next {
            background: url('arrow-right.jpg') no-repeat center center;
            background-size: contain;
        }
 
        .slick-prev:before,
        .slick-next:before {
            content: none;
        }
        
 
 
        @media (max-width: 899px) {
            #testimonials {
                margin-bottom: 110px;
                padding-top: 35px;
            }
 
            #testimonials .content {
                margin-top: 48px;
            }
 
            #testimonials .content:after {
                left: 68px;
                right: 68px;
                top: -48px;
            }
 
            #testimonials .content:before {
                left: 34px;
                right: 34px;
                top: -25px;
            }
 
            #testimonials .slick {
                display: block;
                padding: 15px;
            }
 
            #testimonials .slick-slider,
            #testimonials .arrow {
                width: 100%;
                float: none;
                display: block;
                padding: 20px 15px;
                border: none;
            }
 
 
            #testimonials .arrow {
                text-align: center;
                border-top: 1px solid #cdcdcd;
            }
 
            #testimonials .arrow-wrapper {
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
            }
 
            .slick-slider {
                display: flex;
                flex-direction: row;
            }
 
            .arrow {
                order: 1;
                margin-top: 20px;
            }
 
 
            .slick-prev,
            .slick-next {
                position: static;
                transform: none;
                margin: 0 10px;
            }
        }
    </style>
0
 Аватар для Mailo
248 / 226 / 31
Регистрация: 18.02.2010
Сообщений: 2,312
08.12.2024, 23:55
А в чём прикол slick слайдер использовать, когда можно owl или swiper заюзать? Просто такие дефолтные настройки обычно должны идти в документации к слайдеру и интегрироваться без лишней попоголова боли.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
08.12.2024, 23:55
Помогаю со студенческими работами здесь

Как сделать так, чтобы стрелки навигации становились длиннее при наведении?
Как сделать так, чтобы стрелки навигации плавно увеличивались при наведении? Эти стрелки написаны через svg **P.S. Это полностраничный...

Как исправить ошибку.Мне пожалуйста сделать так чтобы btn12 могла ставить в edt1 - перед числом . Для решения задач
Здравствуйте, я не могу понять как мне сделать так чтобы при нажатии минуса (той же кнопки 12 ) в edt1 появлялся минус. Минус рабочий , но...

Google Таблицы. Закрепить ячейки, чтобы при скроллинге они оставались всегда в видимой области
Привет всем, подскажите пожалуйста как можно закрепить 3 ячейки что бы при скроллинге (право-лево, верх-вниз) они оставались всегда в...

Как в owl-carousel сделать так, чтобы стрелки навигации увеличивались при нажатии на них?
Как сделать так, чтобы стрелки навигации .owl-prev и .owl-nav при наведении и нажатии на одну из них увеличивались в ширине? Сам сайт...

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


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Новые блоги и статьи
Angular: Вопросы и ответы на собеседовании
Reangularity 15.06.2025
Готовишься к техническому интервью по Angular? Я собрал самые распространенные вопросы, с которыми сталкиваются разработчики на собеседованиях в этом году. От базовых концепций до продвинутых. . .
Архитектура Onion в ASP.NET Core MVC
stackOverflow 15.06.2025
Что такое эта "луковая" архитектура? Термин предложил Джеффри Палермо (Jeffrey Palermo) в 2008 году, и с тех пор подход только набирал обороты. Суть проста - представьте себе лук с его. . .
Unity 4D
GameUnited 13.06.2025
Четырехмерное пространство. . . Звучит как что-то из научной фантастики, правда? Однако для меня, как разработчика со стажем в игровой индустрии, четвертое измерение давно перестало быть абстракцией из. . .
SSE (Server-Sent Events) в ASP.NET Core и .NET 10
UnmanagedCoder 13.06.2025
Кажется, Microsoft снова подкинула нам интересную фичу в новой версии фреймворка. Работая с превью . NET 10, я наткнулся на нативную поддержку Server-Sent Events (SSE) в ASP. NET Core Minimal APIs. Эта. . .
С днём независимости России!
Hrethgir 13.06.2025
Решил побеседовать, с утра праздничного дня, с LM о завоеваниях. То что она написала о народе, представителем которого я являюсь сам сначала возмутило меня, но дальше только смешило. Это чисто. . .
Лето вокруг.
kumehtar 13.06.2025
Лето вокруг. Наполненное бурями и ураганами событий. На фоне магии Жизни, священной и вечной, неумелой рукой человека рисуется панорама душевного непокоя. Странные серые краски проникают и. . .
Популярные LM модели ориентированы на увеличение затрат ресурсов пользователями сгенерированного кода (грязь -заслуги чистоплюев).
Hrethgir 12.06.2025
Вообще обратил внимание, что они генерируют код (впрочем так-же ориентированы разработчики чипов даже), чтобы пользователь их использующий уходил в тот или иной убыток. Это достаточно опытные модели,. . .
Топ10 библиотек C для квантовых вычислений
bytestream 12.06.2025
Квантовые вычисления - это та область, где теория встречается с практикой на границе наших знаний о физике. Пока большая часть шума вокруг квантовых компьютеров крутится вокруг языков высокого уровня. . .
Dispose и Finalize в C#
stackOverflow 12.06.2025
Работая с C# больше десяти лет, я снова и снова наблюдаю одну и ту же историю: разработчики наивно полагаются на сборщик мусора, как на волшебную палочку, которая решит все проблемы с памятью. Да,. . .
Повышаем производительность игры на Unity 6 с GPU Resident Drawer
GameUnited 11.06.2025
Недавно копался в новых фичах Unity 6 и наткнулся на GPU Resident Drawer - штуку, которая заставила меня присвистнуть от удивления. По сути, это внутренний механизм рендеринга, который автоматически. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru
OSZAR »