index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>slick_slide_project</title>
<link rel="stylesheet" href="js/slick-theme.css">
<link rel="stylesheet" href="js/slick.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<h1 class="h1_title">
<img src="img/cat01.jpg" alt="">
</h1>
<div class="single">
<!--任意のスライド用画像のパス-->
</div>
<nav>
<ul>
<li>
<a href="">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#skills">Skills</a>
</li>
<li>
<a href="#portfolio">Portfolio</a>
</li>
</ul>
</nav>
</header>
<main></main>
<footer></footer>
<script src="js/jquery.min.js"></script>
<script src="js/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.single').slick({
autoplay:true,
dots:false,
});
});
</script>
</body>
</html>
style.css
nav {
background-color: #20b2aa;
}
nav ul {
width: 1000px;
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
nav ul li {
border-left: 1px solid white;
width: 100%;
margin: 0 auto;
text-align: center;
}
nav ul li:last-child {
border-right: 1px solid white;
}
nav ul li a {
display: block;
padding: 20px 0;
}
nav ul li a:hover {
background-color: aquamarine;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.header {
position: relative;
}
.h1_title {
position: absolute;
text-align: center;
top: 0;
right: 0;
left: 0;
margin: 0 auto;
z-index: 1000;
}
.h1_title img {
width: 500px;
}
.single {
margin: 0 auto;
width: 100%;
}
.single img {
height: auto;
width: 100%;
}
/*slick setting*/
.slick-prev:before,
.slick-next:before {
color: #000;
}
.slick-prev {
left: 25px;
z-index: 1;
}
.slick-next {
right: 25px;
}
.slick-prev:before, .slick-next:before {
color: white;
font-size: 40px;
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}