<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="slick--visual__paging"></div>
<div class="slick--visual">
<div class="slick-slide">
<img src="//shorturl.at/bnIPZ" alt="">
<div class="visual__txt">
<h3 class="visual__txt__tit">P</h3>
<p class="visual__txt__desc">Pretty</p>
</div>
</div>
<div class="slick-slide">
<img src="https://images.unsplash.com/photo-1527683761419-a124d1a58361?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1774&q=80" alt="">
<div class="visual__txt">
<h3 class="visual__txt__tit">I</h3>
<p class="visual__txt__desc">Intelligent</p>
</div>
</div>
<div class="slick-slide">
<img src="//shorturl.at/jqOU7" alt="">
<div class="visual__txt">
<h3 class="visual__txt__tit">N</h3>
<p class="visual__txt__desc">Never sad</p>
</div>
</div>
<div class="slick-slide">
<img src="//shorturl.at/bFKQ6" alt="">
<div class="visual__txt">
<h3 class="visual__txt__tit">K</h3>
<p class="visual__txt__desc">Cool</p>
</div>
</div>
</div>
<div class="slick--visual__etc">
<div class="visual__arrows">
<button class="visual-prev">
* ========= web font ========= */
@import url('https://fonts.googleapis.com/css2?family=Shrikhand&display=swap');
body {font-family: 'Shrikhand', cursive;}
/* ========= // web font ========= */
.container {position: relative;}
.slick--visual__paging {
position: absolute;
top: 10vh;
left: 8%;
letter-spacing: 2px;
font-size: 170%;
z-index: 2;
.slick-dots {
li {
display: none;
justify-content: space-between;
color: #555;
&.slick-active {
display: flex;
span:first-of-type {color: #FC919B;}
}
}
}
}
.slick--visual {
height: 100vh;
.slick-list,
.slick-track {height: 100%;}
}
.slick-slide {
position: relative;
height: 100%;
img {
width: 100%;
height: 100%;
opacity: 0.25;
}
.visual__txt {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
color: #FC919B;
.visual__txt__tit {
margin-bottom: 2rem;
font-size: 7rem;
}
.visual__txt__desc {
font-size: 2rem;
}
}
}
.slick--visual__etc {
position: absolute;
bottom: 50px;
left: 50%;
display: flex;
width: 84%;
flex-direction: column;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
z-index: 2;
.visual__arrows {
display: flex;
margin-bottom: 2rem;
justify-content: space-between;
font-size: 2rem;
.visual-prev,
.visual-next {
border: 0;
background: none;
font-size: 2rem;
cursor: pointer;
&:hover{
transform: scale(1.5)
}
}
}
.visual__progress {
height: 4px;
background-color: #FFF;
background-repeat: no-repeat;
background-image: linear-gradient(to right, #555, #555);
z-index: 2;
}
}
const visual = $('.slick--visual');
const progress = $('.visual__progress');
const initPercent = 100 / ($('.slick--visual').find('.slick-slide').length);
progress.css('background-size', initPercent + '% 100%');
visual.slick({
infinite: true,
dots:true,
prevArrow: '.visual-prev',
nextArrow: '.visual-next',
appendDots: '.slick--visual__paging',
customPaging: function (slider, i) {
return '<span>'+(i + 1)+'</span><span>/</span><span>' + slider.slideCount + '</span>';
}
});
visual.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
var calc = ((nextSlide + 1) / slick.slideCount) * 100;
progress
.css('background-size', calc + '% 100%')
.attr('aria-valuenow', calc);
});
