Цель слайдера — привлечь внимание и подтолкнуть к нужному действию. Для этого у него целый арсенал: фотографии, заголовки, текст, кнопки и удобная навигация.
Слайдер увеличивает полезное пространство, добавляя экрану горизонтальную «бесконечность». Но на телефоне слайдер перестаёт справляться с задачей:
Фотографии уменьшаются настолько, что слова перестают помещаться и навигация загораживает половину картинки. Слайдер превращается в кучу-малу и выглядит неряшливо.
Узкую и длинную страницу читают по вертикали, а слайдер переключается поперёк. Чтобы им воспользоваться, приходится вовремя остановиться и перейти на перпендикулярную «тропинку». Это замедляет и затрудняет чтение.
Читатель движется по странице, используя «смахивающие» жесты, а слайдер Бутстрапа понимает только нажатия на край экрана.
Поэтому предлагаю на узком экране превращать слайдер в колонку фотографий с пояснениями. Слайды займут больше места, но их станет легче пролистывать, потому что они расположатся в русле чтения.
А для коллекции фотографий подойдёт фоторама. Она откликается на привычные «смахивающие» жесты. И посмотрите совет Артёма Горбунова о слайдерах.
Превращаем карусель Бутстрапа в колонку фотографий
- Ставим карусель на паузу, чтобы возобновить с того же слайда, если понадобится.
- Выстраиваем фотографии в колонку.
- Перемещаем заголовки и текст под фотографии.
При желании можно уменьшить границу перехода с 767px
до 480px
.
Для 4го Бутстрапа: https://codepen.io/glebkema/pen/ExxKXZb
Для 3го Бутстрапа: https://codepen.io/glebkema/pen/rLwAWp
/* 1. */
var isCarouselPaused = false;
$( window ).on( 'load resize', function() {
if ( document.documentElement.clientWidth <= 767 ) {
if ( !isCarouselPaused ) {
$( '#myCarousel' ).carousel('pause');
isCarouselPaused = true;
}
} else {
if ( isCarouselPaused ) {
$( '#myCarousel' ).carousel('cycle');
isCarouselPaused = false;
}
};
});
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
@media (max-width: 767px) {
/* 2. */
.carousel .item {
display: block;
margin-top: 12px;
}
.carousel-control,
.carousel-indicators {
display: none;
}
/* 3. */
.carousel-caption {
color: black;
position: static;
text-align: left;
text-shadow: none;
}
/* Decorations */
.carousel-caption h3 {
font-weight: bold;
margin-top: 4px;
margin-bottom: 8px;
}
}
/* Make the images wide and responsive. */
.carousel-inner img {
height: auto;
width: 100%;
}
/* Decorations */
.carousel {
margin-bottom: 20px;
margin-top: 20px;
}
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Превращаем карусель в колонку фотографий</h1>
<p>На узком экране карусель встаёт на паузу, а фотографии и пояснения к ним выстраиваются в колонку.</p>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://placehold.it/900x300/c69/f9c/?text=1" alt="">
<div class="carousel-caption">
<h3>Первый заголовок</h3>
<p>Текст текст текст текст текст текст текст текст.</p>
</div>
</div>
<div class="item">
<img src="https://placehold.it/900x300/9c6/cf9/?text=2" alt="">
<div class="carousel-caption">
<h3>Второй заголовок</h3>
<p>Текст текст текст текст текст текст текст текст.</p>
</div>
</div>
<div class="item">
<img src="https://placehold.it/900x300/69c/9cf/?text=3" alt="">
<div class="carousel-caption">
<h3>Третий заголовок</h3>
<p>Текст текст текст текст текст текст текст текст.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" 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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>