Собственно нужен резиновый слайдер с фиксированной высотой или просто совет, как добиться этого на примере любого слайдера. Буду очень благодарен. Использовал responsiveslides.com и Flexslider
3
-
kenwheeler.github.io/slick– HamSter15 сен 2016 в 14:45
-
спасибо, но это не решило моей проблемы. мне нужен адаптивный по ширине слайдер чтобы не превышал фиксированную высоту– Александр15 сен 2016 в 14:56
-
Ну так настройте его как Вам нужно. А вообще любой слайдер можно адаптировать при желании.– HamSter15 сен 2016 в 15:29
Добавить комментарий
|
2 ответа
Используете любой слайдер, например responsiveslides.com. Как элемент слайдера используете div у которого картинка задана фоном
background: url(1.jpg) 50% 50% no-repeat;
height: 500px;
width: 100%;
Тогда у вас будет адаптивный слайдер с фиксированной высотой
-
Мне нужно чтобы картинки грузились из кода (верстка будет натянута на движок и нужно чтобы они менялись вручную пользователем). 15 сен 2016 в 15:08
-
1Используйте инлайновые стили картинки для дива и пользователи смогут их редактировать. 15 сен 2016 в 15:11
Как вариант:
$('.sl-img').each(function(){
var path = $(this).attr('src');
var d = $(this).closest('div');
d.css({
'background': 'url(' + path + ') center no-repeat',
'-webkit-background-size': 'cover',
'background-size': 'cover'
});
});
$('.slider').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [
{
breakpoint: 500,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
}
}
]
});
* {
box-sizing: border-box;
}
div {
padding: .25rem;
}
img {
max-width: 100%;
width: 100%;
height: auto;
}
.slider {
padding-bottom: 4rem;
position: relative;
}
.slider div {
height: 200px;
}
.slider div img {
display: none;
}
.slick-arrow {
position: absolute;
bottom: 0;
}
.slick-next {
left: 7rem;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
</head>
<body>
<div class="slider">
<div><div><img src="https://dummyimage.com/600x400/b8b8b8/fff.png" alt="" class="sl-img"></div></div>
<div><div><img src="https://dummyimage.com/900x300/b8b8b8/fff.png" alt="" class="sl-img"></div></div>
<div><div><img src="https://dummyimage.com/750x450/b8b8b8/fff.png" alt="" class="sl-img"></div></div>
<div><div><img src="https://dummyimage.com/850x350/b8b8b8/fff.png" alt="" class="sl-img"></div></div>
<div><div><img src="https://dummyimage.com/500x480/b8b8b8/fff.png" alt="" class="sl-img"></div></div>
</div>
</body>
</html>
Используемый плагин - slick slider