head
<!-- cssの読み込み -->
<link rel="stylesheet" href="./path/to/dist/zoomslider.css">
<!-- jqueryの読み込み -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="./path/to/modernizr-custom.js"></script>
<script src="./path/to/dist/jquery.zoomslider.min.js"></script>
sass
<!-- 画像部分 -->
#demo-1{
overflow: hidden;
width: 100%;
min-height: 600px;
background-color: #999;
position: relative;
}
<!-- テキスト部分 -->
.inner-content{
color: white;
width: 100%;
text-align: center;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
h2{
font-size: 4em;
}
p{
font-size: 2em;
}
}
HTML
<!-- 画像部分 -->
<div id="demo-1" data-zs-src='["./images/zoomslide01.jpg", "./images/zoomslide02.jpg", "./images/zoomslide03.jpg"]' data-zs-speed="8000" data-zs-switchSpeed="800" data-zs-interval="4500" data-zs-overlay="dots">
<!-- テキスト部分 -->
<div class="inner-content">
<h2>Zoomslider</h2>
<p>こんな感じでテキストも入れることができます</p>
</div>
</div>
