выровнять последний элемент карусели как и первый

@Kenworth · Регистрация: 21.10.2013

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

Просматривая темы в разделе HTML CSS, увидел комментарий вот к этому посту "https://www.cyberforum.ru/html/thread1725460.html" и подумал, что Вы можете немного помочь.
Суть проблемы:
Есть сдвоенная карусель. По дизайну накидали и вверху и внизу навигационные клавиши. Проблема заключается в том, что нижний ряд карусели помещается не полностью, даже если пролистать все элементы до конца. Хотелось бы сделать так, что бы в нижнем ряду помещалось ровное и целое изображение. Подскажите как это сделать. Спасибо за ответ.

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
<div class="big-images offs2">
    <img src="https://www.cyberforum.ru/images/house/carousel-img/img-carusel-1.jpg">
    <img src="https://www.cyberforum.ru/images/house/carousel-img/img-carusel-2.jpg">
    <img src="https://www.cyberforum.ru/images/house/carousel-img/img-carusel-3.jpg">
    <img src="https://www.cyberforum.ru/images/house/carousel-img/img-carusel-4.jpg">
    <img src="https://www.cyberforum.ru/images/house/carousel-img/img-carusel-5.jpg">
    <img src="https://www.cyberforum.ru/images/house/carousel-img/img-carusel-6.jpg">
    <img src="https://www.cyberforum.ru/images/house/carousel-img/img-carusel-7.jpg">
    <img src="https://www.cyberforum.ru/images/house/carousel-img/img-carusel-8.jpg">
    <img src="https://www.cyberforum.ru/images/house/carousel-img/img-carusel-9.jpg">
    <img src="https://www.cyberforum.ru/images/house/carousel-img/img-carusel-10.jpg">
</div>
<div class="thumbs">
    <div class="item">
        <img src="https://www.cyberforum.ru/images/house/carousel-img/img-carusel-1(small).jpg">
        <span class="thumbs__overlay"></span>
    </div>
    <div class="item">
        <img src="https://www.cyberforum.ru/images/house/carousel-img/img-carusel-2(small).jpg">
        <span class="thumbs__overlay"></span>
    </div>
    <div class="item">
        <img src="https://www.cyberforum.ru/images/house/carousel-img/img-carusel-3(small).jpg">
        <span class="thumbs__overlay"></span>
    </div>
    <div class="item">
        <img src="https://www.cyberforum.ru/images/house/carousel-img/img-carusel-4(small).jpg">
        <span class="thumbs__overlay"></span>
    </div>
    <div class="item">
        <img src="https://www.cyberforum.ru/images/house/carousel-img/img-carusel-5(small).jpg">
        <span class="thumbs__overlay"></span>
    </div>
    <div class="item">
        <img src="https://www.cyberforum.ru/images/house/carousel-img/img-carusel-6(small).jpg">
        <span class="thumbs__overlay"></span>
    </div>
    <div class="item">
        <img src="https://www.cyberforum.ru/images/house/carousel-img/img-carusel-7(small).jpg">
        <span class="thumbs__overlay"></span>
    </div>
    <div class="item">
        <img src="https://www.cyberforum.ru/images/house/carousel-img/img-carusel-8(small).jpg">
        <span class="thumbs__overlay"></span>
    </div>
    <div class="item">
        <img src="https://www.cyberforum.ru/images/house/carousel-img/img-carusel-9(small).jpg">
        <span class="thumbs__overlay"></span>
    </div>
    <div class="item">
        <img src="https://www.cyberforum.ru/images/house/carousel-img/img-carusel-10(small).jpg">
        <span class="thumbs__overlay"></span>
    </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
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
 SASS
.big-images {
  position: relative;
  width: 100%;
 
  .owl-item {
    border-top: 2px solid $primary;
    border-bottom: 1px solid $primary;
    border-left: 2px solid $primary;
    border-right: 2px solid $primary;
    img {
      width: 100% !important;
      height: 400px;
    }
  }
  .owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    @include transform(translateY(-50%));
    .owl-prev,
    .owl-next {
      position: absolute;
      top: 50%;
      width: 30px;
      height: 150px;
      background: #d0d0d0;
      @include transform(translateY(-50%));
      @include transition(0.4s ease all);
      &:before {
        position: absolute;
        top: 50%;
        left: 50%;
        font: 400 60px/1 $fa;
        color: $white;
        @include transform(translateX(-50%) translateY(-50%));
      }
      &:hover {
        background: $primary;
      }
    }
    .owl-prev {
      left: 2px;
      &:before {
        content: '\f104';
      }
    }
    .owl-next {
      right: 2px;
      &:before {
        content: '\f105';
      }
    }
  }
}
 
.thumbs {
  &__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgba($white, 0.5);
    @include transition(0.4s ease all);
  }
  .owl-stage-outer{
    margin: 0 30px;
  }
  .owl-item {
    border: 1px solid $primary;
  }
  .item {
    position: relative;
 
    &:hover {
      .thumbs__overlay {
        cursor: pointer;
        background: transparent;
      }
    }
  }
  .owl-controls{}
  .owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 100%;
    @include transform(translateY(-50%));
    z-index: -1;
    .owl-prev,
    .owl-next {
      position: absolute;
      top: 50%;
      width: 30px;
      height: 100%;
      background: #d0d0d0;
      @include transform(translateY(-50%));
      @include transition(0.4s ease all);
      z-index: 99;
      &:before {
        position: absolute;
        top: 50%;
        left: 50%;
        font: 400 60px/1 $fa;
        color: $white;
        @include transform(translateX(-50%) translateY(-50%));
      }
      &:hover {
        background: $primary;
      }
    }
    .owl-prev {
      left: 0px;
      &:before {
        content: '\f104';
      }
    }
    .owl-next {
      right: 0px;
      &:before {
        content: '\f105';
      }
    }
  }
}

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
50
51
52
53
///* Owl carousel
//========================================================*/
;
$(document).ready(function () {
    function initcarousel() {
        console.log('init stat');
        var $sync1 = $(".big-images"),
            $sync2 = $(".thumbs"),
            flag = false,
            duration = 300;
 
        $sync1
            .owlCarousel({
                items: 1,
                //margin: 10,
                nav: true,
                dots: false,
                singleItem: true,
                scrollPerPage: true,
                animateOut: 'fadeOut'
            })
            .on('changed.owl.carousel', function (e) {
                if (!flag) {
                    flag = true;
                    $sync2.trigger('to.owl.carousel', [e.item.index, duration, true]);
                    flag = false;
                }
            });
 
        $sync2
            .owlCarousel({
                margin: 0,
                items: 5,
                nav: true,
                center: false,
                dots: false
            })
            .on('click', '.owl-item', function () {
                $sync1.trigger('to.owl.carousel', [$(this).index(), duration, true]);
 
            })
            .on('changed.owl.carousel', function (e) {
                if (!flag) {
                    flag = true;
                    $sync1.trigger('to.owl.carousel', [e.item.index, duration, true]);
                    flag = false;
                }
            });
    }
    $(document).ready(function () {
        initcarousel();
    });
});

Архив изображений: del
пример того, что сейчас есть: http://my-files.ru/4kdf7b (Есть ли возможность сделать задний элемент как первый элемент????????)

@aj17 · 06.05.2016, 16:09

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

(Есть ли возможность сделать задний элемент как первый элемент????????

всем превью картинкам нужно задать width: 20%; Что бы 5 штук = 100% ширине блока и влазили в эту ширину.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&d=1772460536 Одним из. . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .