2

Подскажите пожалуйста, возможно ли сделать слайдер фонового изображения при помощи slick slider?
Гугл не помогает( В документации сказано что картинки нужно поместить в div блок. Но как быть с фоновыми изображениями?

@charset utf-8;
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,
abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,
strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,
legend,table,caption,tbody,tfoot,thead,tr,th,td{background: none repeat scroll 0
0 transparent; border: 0 none; font-size: 100%; outline: 0 none; vertical-align: 
baseline;margin: 0;padding: 0;}table{border-collapse: collapse;border-spacing: 0;}
address,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,nav,
section,summary{display: block;}

* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
}

a, a:hover, button, button:hover, .anime {
	-moz-transition:all 200ms linear;
	-ms-transition:all 200ms linear;
	-o-transition:all 200ms linear;
	-webkit-transition:all 200ms linear;
	transition:all 200ms linear;
	cursor: pointer;
}


.F_COL_C-START_I-CENTER {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
}

.F_ROW_C-START_I-CENTER {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
}

.F_ROW_C-S-B_I-F-S {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: flex-start;
}

.F_ROW_C-START_I-STRETCH {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: stretch;
}

body {
	background-color: #fff;
	color: #413d4b;
	font-family:'Roboto', sans-serif;
	font-size: 0.87vmax;
	line-height: 1.37vmax;
}	

.wrap {
	width: 58.75vw;
	margin: 0 auto;
	position: relative; 
}

header {
	width: 100%;
	height: 100vh;
	background-image: linear-gradient(45deg, rgba(9, 5, 47, .85) 0%, rgba(49, 29, 94, .85)), url(../img/bg_header.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

#top_header {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	margin-top: 3.2vh;
}

#logo svg{
	height: 3vw;
}

#top_header nav ul {
	display: flex;
	flex-flow: row nowrap;

}

nav li{
	list-style: none;
	text-transform: uppercase;
	color: #fff;
	font-family: 'Roboto Black', sans-serif;
	margin-left: 1.25vw;
}

nav a{
	text-decoration: none;
	font-weight: bold;
	color: #fff;
}

a:hover {
	color: #00e0d0;
}

#header_content {
	margin-top: 24.4vh;
}

#header_content h2{
	font-family: 'Playfair Display', serif;
	color: #fff;
	font-size: 2vw;
	text-align: center;
}

hr {
	border: none;
	width: 3.12vw;
	height: 1px;
	background-color: #00e0d0;
	color: #00e0d0;
	margin-top: 3.8vh;
}

#header_content p {
	width: 48.6vw;
	color: #fff;
	line-height: 3.5vh;
	text-align: center;
	margin-top: 4.17vh;
}

.btn {
	padding: 0.8vw 1.5vw;
	font-family: 'Hammersmith One', sans-serif;
	font-size: 1vw;
	color: #00e0d0;
	text-transform: uppercase;
	border: 1px solid #00e0d0;
	background-color: transparent;
	border-radius: 2px;
	margin-top: 7.3vh;
}

.btn:hover {
	color: #fff;
	border: 1px solid #fff;
}

#dot_nav{
	width: 3.43vw;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: 18.9vh; 

}

.circle_nav {
	width: 0.62vw;
	height: 0.62vw;
	border: 2px solid #bab9bc;
	background-color: transparent;
	border-radius: 0.62vw;

}

.circle_nav:hover {
	border: 2px solid #00e0d0;
	background-color: #00e0d0; 
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Landing Page</title>
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/fonts.css">
	
</head>
<body>
	<header>
		<div class="wrap ">
			<div id="top_header">
				<div id="logo">
				</div>
				
				<nav>
					<ul>
						<li><a href="#">Home</a></li>
						<li><a href="#">About</a></li>
						<li><a href="#">Expertise</a></li>
						<li><a href="#">Teams</a></li>
						<li><a href="#">Works</a></li>
						<li><a href="#">People say</a></li>
						<li><a href="#">Contact</a></li>
					</ul>
				</nav>
			</div>

			<div id="header_content" class="F_COL_C-START_I-CENTER">

				<h2>We Are Awesome Creative Agency</h2>

				<hr />

				<p>This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.</p>
					
				<button class="btn" type="button">Learn More</button>
				
				<div id="dot_nav">
					<div class="circle_nav"></div>
					<div class="circle_nav"></div>
					<div class="circle_nav"></div>
					<div class="circle_nav"></div>
				</div>
			</div>
		</div>
	</header>
	

	
</body>
</html>

1 ответ 1

2

Возможно, почему нет. Слайдам через css задайте высоту(если нет контента) и фон.

$('.slider').slick({
  arrows:false,
  dots:true,
  customPaging:function(){return ''}
})
*{
  box-sizing:border-box;
}
body{
  margin:0;
}
.slide{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;  
}
.slide.slick-slide{
  min-height:calc(100vh - 40px);
}
.slick-dots{
  margin:10px 0;
  padding:0;
  text-align:center;
}
.slick-dots li{
  display:inline-block;
  width:10px;
  height:10px;
  background-color:#000;
  opacity:.5;
  transition:all .2s ease;
  margin:0 5px;
  border-radius:50%;
}
.slick-dots .slick-active{
  opacity:1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/>

<div class="slider">
  <div class="slide" style="background-image:url(https://winzoro.net/uploads/posts/2012-07/1333997806_220817.jpg)"></div>  
  <div class="slide" style="background-image:url(https://thumbs.dreamstime.com/b/%D0%B1%D0%B5%D0%B7%D0%BC%D1%8F%D1%82%D0%B5%D0%B6%D0%BD%D0%BE%D1%81%D1%82%D1%8C-95803396.jpg)"></div>  
  <div class="slide" style="background-image:url(https://cs5.pikabu.ru/post_img/big/2015/09/14/10/1442252185_26762581.png)"></div>
</div>

2
  • Спасибо за помощь) То-есть фон нужно задавать через html? А через сss не получится? 4 сен 2018 в 13:59
  • Пожалуйста. Можно и через css. Но с точки зрения удобства дальнейшей посадки на cms лучше так (на мой взгляд).
    – zhurof
    4 сен 2018 в 15:43

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.