bartek/forkio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create slider in Reviews section

Browse Source
This commit is contained in:
Bartlomiej Pluta (PGS Software)
2018-03-22 11:16:39 +01:00
parent b1791f40e5
commit 0b708d6d42
4 changed files with 70 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/img/social/arrow-left.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 18" width="11" height="18">
<style>
tspan { white-space:pre }
.shp0 { opacity: 0.502;fill: #474747 }
</style>
<path id="Arrow L" class="shp0" d="M9.71,1.29c-0.39,-0.39 -1.02,-0.39 -1.4,0l-7.02,7.02c-0.39,0.39 -0.39,1.02 0,1.4c0.39,0.39 1.02,0.39 1.4,0l7.02,-7.02c0.39,-0.39 0.39,-1.02 0,-1.4zM9.71,15.31l-7.02,-7.02c-0.39,-0.39 -1.02,-0.39 -1.4,0c-0.39,0.39 -0.39,1.02 0,1.4l7.02,7.02c0.39,0.39 1.02,0.39 1.4,0c0.39,-0.39 0.39,-1.02 0,-1.4z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 515 B

7
src/img/social/arrow-right.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 18" width="11" height="18">
<style>
tspan { white-space:pre }
.shp0 { opacity: 0.502;fill: #474747 }
</style>
<path id="Arrow R" class="shp0" d="M1.29,2.69l7.02,7.02c0.39,0.39 1.02,0.39 1.4,0c0.39,-0.39 0.39,-1.02 0,-1.4l-7.02,-7.02c-0.39,-0.39 -1.02,-0.39 -1.4,0c-0.39,0.39 -0.39,1.02 0,1.4zM1.29,16.71c0.39,0.39 1.02,0.39 1.4,0l7.02,-7.02c0.39,-0.39 0.39,-1.02 0,-1.4c-0.39,-0.39 -1.02,-0.39 -1.4,0l-7.02,7.02c-0.39,0.39 -0.39,1.02 0,1.4z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 515 B

50
src/index.html
View File

@@ -19,6 +19,10 @@
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!-- Slick.JS -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css"/>
<!-- Custom styles -->
<link rel="stylesheet" href="css/style.css">
</head>
@@ -176,10 +180,56 @@
</div>
</div>
</section>
<section class="reviews container">
<div class="row justify-content-center">
<div class="reviews__content col-10">
<div class="review">
<div class="review__author">
<img src="img/social/userpic.png" alt="Steven Strange">
<span class="review__author-name">Steven Strange</span>
<span class="review__nickname">DoctorS</span>
</div>
<div class="review__content"><span class="review__nickname">Pixelbuddha</span> Suspendisse sodales
sem est,
in scelerisque felis scelerisque in. Aenean faucibus mollis risus. Praesent sit amet erat eget
eros.
</div>
<div class="review__date">2 hours ago</div>
</div>
<div class="review">
<div class="review__author">
<img src="img/social/userpic.png" alt="Steven Strange">
<span class="review__author-name">Steven Strange</span>
<span class="review__nickname">DoctorS</span>
</div>
<div class="review__content"><span class="review__nickname">Pixelbuddha</span> Suspendisse sodales
sem est,
in scelerisque felis scelerisque in. Aenean faucibus mollis risus. Praesent sit amet erat eget
eros.
</div>
<div class="review__date">2 hours ago</div>
</div>
<div class="review">
<div class="review__author">
<img src="img/social/userpic.png" alt="Steven Strange">
<span class="review__author-name">Steven Strange</span>
<span class="review__nickname">DoctorS</span>
</div>
<div class="review__content"><span class="review__nickname">Pixelbuddha</span> Suspendisse sodales
sem est,
in scelerisque felis scelerisque in. Aenean faucibus mollis risus. Praesent sit amet erat eget
eros.
</div>
<div class="review__date">2 hours ago</div>
</div>
</div>
</div>
</section>
</div>
<!-- JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script src="js/script.js"></script>

6
src/js/script.js
View File

@@ -10,4 +10,10 @@ $(document).ready(function () {
$('.navbar').removeClass('navbar--shrink');
}
});
$('.reviews__content').slick({
nextArrow: '<img class="slick-next" src="img/social/arrow-right.svg">',
prevArrow: '<img class="slick-prev" src="img/social/arrow-left.svg">',
auto: true,
});
});