Сделать загрузочное изображение карусели и текст, читаемый на мобильных устройствах

116
14

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

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

2) Как предотвратить совпадение точек навигации в нижней части проигрывателя на моем изображении на мобильном устройстве

enter image description here

Здесь мой bootply: http://www.bootply.com/huskydawgs/6UtgjHqm8f

Вот мой html:

   <div class="content-section-b">

<div class="container">

<div class="row">
<div class="col-lg-12">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-responsive" src="http://www.onvia.com/responsive/apple_orange_testimonials.png" alt="Apples and Oranges">
</div>
<div class="item">
<img class="img-responsive" src="http://www.onvia.com/responsive/pears_mangos_testimonials.png" alt="Pears and Mangos">
</div>
</div>

<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>

</div>
<!-- /.container -->

</div>
<!-- /.content-section-b -->

Вот мой css:

    .content-section-b {
padding: 50px 0;
background-color: #3C5A78;
}

.carousel-control.left {
background-image:none;
}

.carousel-control.right {
background-image:none;
}

спросил(а) 2016-04-29T09:36:00+03:00 4 года, 6 месяцев назад
1
Решение
99

Проблема заключается в исходных изображениях: они создают впечатление, что они были двумя различными элементами карусели, когда на самом деле только один (яблоко-оранжевый и грушевый манго)... Для быстрого исправления вы можете сделать отдельные изображения из источники (по одному для каждого фрукта), спрятали обычную карусель через медиа-запросы на xs-экранах и имели карусель visible-xs, у которой есть 4 вместо 2-х карусельных предметов.

Однако это не отличное решение.

Быстрый пример: http://www.bootply.com/U5uYwmnt1g

РЕДАКТИРОВАТЬ

Добавлен CSS для перемещения точек навигации на мобильных устройствах, чтобы они не перекрывались со слайдами.

Расширение того, почему это не лучшее решение:

-You должен сделать элементы карусели элементами html, для начала и не полностью полагаться на изображения с фигурами и текстом внутри (все на ваших изображениях можно легко копировать с помощью CSS, используя изображения только для плодов, или для фрукты и циркуль, если вы не хотите делать круг с CSS)

-Once это сделано, вы можете пропустить вторую карусель и изменить содержимое каждого слайда через мультимедийные запросы (или вспомогательные классы), чтобы получить желаемый результат

-The CSS для навигационных точек использует запрос max-width, который, как я понимаю, обычно не рекомендуется, хотя в этом случае он может быть хорошо использован (если кто-то может расширить это, пожалуйста, сделайте)

ответил(а) 2016-04-29T09:47:00+03:00 4 года, 6 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема