Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.64/11: Рейтинг темы: голосов - 11, средняя оценка - 4.64
0 / 0 / 1
Регистрация: 23.11.2017
Сообщений: 4
1

Одинаковая высота 2-х каруселей при адаптивной верстке

23.11.2017, 20:40. Показов 2161. Ответов 1

Всем привет!

Ребята подскажите, пожалуйста, как сделать одинаковую высоту двух каруселей на одной странице при адаптивной вёрстке? Это мой первый пробный проект, вроде бы все сделал, а с этой проблемой никак не могу совладать уже несколько дней. Я решил эту задачу при помощи 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
<section class="block-features">
        <div class="container">
            <div class="col-md-12">
                <div class="row">
                    <div class="sider-container col-md-8">
                        <div class="owl-carousel">
                            <div class="img-container">
                                <a href="#"><img src="img/readers-choice-awards.jpg" alt="readers-choice-awards" class="img-fluid" width="100%" height="100%"></a>
                                <div class="tooltip"><a href="#">Readers Choice Awards</a></div>
                            </div>
                            <div class="img-container">
                                <a href="#"><img src="img/editors-choice-awards.jpg" alt="editors-choice-awards" class="img-fluid" width="100%" height="100%"></a>
                                <div class="tooltip"><a href="#">Editors' Choice Awards</a></div>
                            </div>
                        </div>
                    </div>
                    <div class="features col-md-4">
                        <div class="owl-carousel">
                            <div class="features-description">
                                <h3>FEATURES</h3>
                                <h1>Readers Choice Awards</h1>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                                    dolore magna aliqua.</p>
                                <div class="read">
                                    <a href="#" class="arrow">Read More</a>
                                </div>
                            </div>
                            <div class="features-description">
                                <h3>FEATURES</h3>
                                <h1>Editors' Choice Awards</h1>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                                    dolore magna aliqua.</p>
                                <div class="read">
                                    <a href="#" class="arrow">Read More</a>
                                </div>
                            </div>
                        </div>
                        <div class="features-slide">
                                <div class="arrow prev">Prev</div>
                                <div class="arrow next">Next</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</section>

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
body {
    font-family: "RobotoRegular", sans-serif;
    font-size: 16px;
    margin: 0;
}
 
.container {
    margin: 0;
    padding: 0;
    max-width: inherit;
}
 
.block-features .row {
    display: flex;
}
 
.col-md-12,
.sider-container,
.img-container,
.features {
    padding: 0;
}
 
.sider-container .owl-carousel {
    min-height: 100%;
    display: flex;
}
 
.sider-container .img-container img {
    position: relative;
    height: 100%;
}
 
.features-description {
    background-color: #1C1C1C;
    padding: 13% 22% 13% 11%;
    position: relative;
}
 
h3 {
    margin: 0;
    color: #808080;
    letter-spacing: 10px;
    font-size: 1.3vw;
}
 
h1 {
    margin: 20px 0 30px 0;
    color: white;
    font-size: 4vw;
    font-family: 'Ovo', serif;
}
 
.features-description p {
    color: #D3D3D3;
    font-size: 14px;
    padding: 30px 0;
    margin: 0;
    border-top: 5px solid;
    border-image: linear-gradient(to right, white, transparent) 1;
}
 
.features-description .read {
    width: 160px;
}
 
.arrow {
    display: block;
    color: white;
    padding: 20px 0 20px 10px;
    text-decoration: none;
    font-size: 18px;
    position: relative;
}
 
.features-slide {
    font-size: 0;
    height: 60px;
    user-select: none;
}
 
.features-slide div {
    display: inline-block;
    width: 50%;
    padding: 17px 0 18px 22%;
    border-right: 1px solid #808080;
    border-bottom: 1px solid #808080;
    background-color: white;
    color: #808080;
    text-decoration: none;
    font-size: 18px;
    cursor: pointer;
    position: relative;
}
 
.features-slide .next {
    padding: 17px 0 18px 19%;
    border-right: none;
}

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function() {
    var owl = $(".owl-carousel");
 
    owl.owlCarousel({
        items: 1,
        mouseDrag: false
    });
 
    $('.features-slide .prev').click(function() {
        owl.trigger('prev.owl.carousel');
    });
 
    $('.features-slide .next').click(function() {
        owl.trigger('next.owl.carousel');
    });
});
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
23.11.2017, 20:40
Ответы с готовыми решениями:

Высота блока при адаптивной верстке
Всем мир. Страница с 4 блоками в ряд. При мобильной версии возникает такая хня (скриншот). Задать...

Высота блоков в адаптивной верстке
Есть код: &lt;div class=&quot;links&quot;&gt; &lt;div class=&quot;link1&quot;&gt;&lt;/div&gt; &lt;div class=&quot;link2&quot;&gt;&lt;/div&gt; ...

Одинаковая высота колонок при условии что высота изначально не известна
&lt;div class=&quot;row equal&quot;&gt; &lt;div class=&quot;col-md-8&quot;&gt; ...

Aside при адаптивной верстке
Здравствуйте. При сужении экрана надо чтобы один блок из сайдбара переместился над блоком контента,...

1
0 / 0 / 1
Регистрация: 23.11.2017
Сообщений: 4
27.11.2017, 23:00  [ТС] 2
Господи я решил эту головоломку!!!)))

Ниже моё решение, если кому вдруг интересно.

Javascript
1
2
3
4
5
6
7
8
setInterval(function() {
        if ($(window).width() <= 768) {
            $('.sider-container img').height('100%');
        } else {
            var featuresHeight = $('.features .owl-carousel').height() + $('.features .features-slide').height();
            $('.sider-container img').height(featuresHeight);
        }
}, 100);
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
27.11.2017, 23:00

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Меню при адаптивной верстке
Изучаю css не получается нормально адаптировать меню что бы в адаптивной верстке полностью...

Как убрать элемент при клике на телефоне при адаптивной верстке?
Здравствуйте!Делаю сайт, и при адаптивной верстке,для телефона, мне надо, чтобы при нажатии на...

Дефолтная ширина для мобильников при адаптивной верстке
С одним человеком у нас возник разговор - он утверждал, что ему в макете достаточно ширины 400px, я...

Как управлять расположением блоков при адаптивной верстке ?
Есть 3 блока, они все стоят в ряд. При ресайзе на определенное разрешение нужно взять центровой...


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

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.