Skip to content

Commit 9bbb6b1

Browse files
aqeebimtiazaqeebimtiaz
committed
[ADD] swiper slide for featured project
1 parent 06d451a commit 9bbb6b1

File tree

8 files changed

+97
-10
lines changed

8 files changed

+97
-10
lines changed

‎img/projects/OdooLauncher-Electron-Original.png‎

60.1 KB
Loading

‎img/projects/OdooLauncher-Electron.png‎

276 KB
Loading

‎img/projects/OdooLauncher-ElectronReact-preview.png‎

-57.3 KB
Loading

‎img/projects/OdooLauncher-ElectronReact.png‎

54.8 KB
Loading

‎img/projects/OdooLauncher-ElectronReact_Original.png‎

59.2 KB
Loading

‎index.html‎

Lines changed: 86 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,52 @@
2121
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
2222
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
2323

24-
<!-- Custom styles for this template -->
25-
<link href="css/grayscale.min.css" rel="stylesheet">
26-
2724
<!--Progressive Image Loading-->
2825
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/progressive-image.js/dist/progressive-image.css">
2926

27+
<!--Swiper Slider-->
28+
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
29+
30+
<!-- Custom styles for this template -->
31+
<link href="css/grayscale.min.css" rel="stylesheet">
32+
33+
<style>
34+
.swiper {
35+
width: 100%;
36+
height: 100%;
37+
}
38+
39+
.swiper-slide {
40+
text-align: center;
41+
font-size: 18px;
42+
background: #fff;
43+
44+
/* Center slide text vertically */
45+
display: -webkit-box;
46+
display: -ms-flexbox;
47+
display: -webkit-flex;
48+
display: flex;
49+
flex-direction: column;
50+
-webkit-box-pack: center;
51+
-ms-flex-pack: center;
52+
-webkit-justify-content: center;
53+
justify-content: center;
54+
-webkit-box-align: center;
55+
-ms-flex-align: center;
56+
-webkit-align-items: center;
57+
align-items: center;
58+
59+
margin-top: auto;
60+
margin-bottom: auto;
61+
}
62+
63+
.swiper-slide img {
64+
display: block;
65+
width: 100%;
66+
height: 100%;
67+
object-fit: cover;
68+
}
69+
</style>
3070
</head>
3171

3272
<body id="page-top">
@@ -106,10 +146,35 @@ <h2 class="text-center text-black-50">Projects</h2>
106146
<!-- Featured Project Row -->
107147
<div class="row align-items-center no-gutters mb-4 mb-lg-5">
108148
<div class="col-xl-8 col-lg-7">
109-
<a href="img/projects/OdooLauncher-Electron_reduced.gif" class="progressive replace">
149+
<!-- <a href="img/projects/OdooLauncher-Electron_reduced.gif" class="progressive replace">
110150
<img src="img/projects/OdooLauncher-Electron_preview.png" class="img-fluid mb-3 mb-lg-0 preview" alt="project1" />
111-
</a>
151+
</a> -->
112152
<!-- <img loading="lazy" class="img-fluid mb-3 mb-lg-0" src="img/projects/aqeeb_cool_blog.JPG" alt=""> -->
153+
<div class="swiper mySwiper">
154+
<div class="swiper-wrapper">
155+
<div class="swiper-slide">
156+
<a href="img/projects/OdooLauncher-Electron.png" class="progressive replace">
157+
<img src="img/projects/OdooLauncher-Electron_preview.png" class="img-fluid mb-3 mb-lg-0 preview" alt="project1" />
158+
</a>
159+
<p>Vanilla JS</p>
160+
</div>
161+
<div class="swiper-slide">
162+
<a href="img/projects/OdooLauncher-ElectronReact.png" class="progressive replace">
163+
<img src="img/projects/OdooLauncher-ElectronReact-preview.png" class="img-fluid mb-3 mb-lg-0 preview" alt="project1" />
164+
</a>
165+
<p>React JS</p>
166+
</div>
167+
<div class="swiper-slide">
168+
<a href="img/projects/OdooLauncher-Electron_reduced.gif" class="progressive replace">
169+
<img src="img/projects/OdooLauncher-Electron_preview.png" class="img-fluid mb-3 mb-lg-0 preview" alt="project1" />
170+
</a>
171+
</div>
172+
<!-- <div class="swiper-slide">Demo Slide</div> -->
173+
</div>
174+
<div class="swiper-pagination"></div>
175+
<div class="swiper-button-next"></div>
176+
<div class="swiper-button-prev"></div>
177+
</div>
113178
</div>
114179
<div class="col-xl-4 col-lg-5">
115180
<div class="featured-text text-center text-lg-left">
@@ -268,6 +333,22 @@ <h4 class="text-uppercase m-0">Phone</h4>
268333
<!--Progressive Image Loading-->
269334
<script defer src="https://cdn.jsdelivr.net/npm/progressive-image.js/dist/progressive-image.js"></script>
270335

336+
<!--Swiper Slider-->
337+
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
338+
<!-- Initialize Swiper -->
339+
<script>
340+
const swiper = new Swiper(".mySwiper", {
341+
pagination: {
342+
el: ".swiper-pagination",
343+
dynamicBullets: true
344+
},
345+
navigation: {
346+
nextEl: ".swiper-button-next",
347+
prevEl: ".swiper-button-prev"
348+
}
349+
});
350+
</script>
351+
271352
</body>
272353

273354
</html>

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,9 @@
2525
"type": "git",
2626
"url": "https://github.com/BlackrockDigital/startbootstrap-grayscale.git"
2727
},
28+
"scripts": {
29+
"gulp": "gulp"
30+
},
2831
"dependencies": {
2932
"@fortawesome/fontawesome-free": "5.3.1",
3033
"bootstrap": "4.1.3",

‎vendor/fontawesome-free/package.json‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
11
{
2+
"_args": [
3+
[
4+
"@fortawesome/fontawesome-free@5.3.1",
5+
"/home/aqeeb/aqeebimtiaz.github.io"
6+
]
7+
],
28
"_from": "@fortawesome/fontawesome-free@5.3.1",
39
"_id": "@fortawesome/fontawesome-free@5.3.1",
410
"_inBundle": false,
@@ -20,9 +26,8 @@
2026
"/"
2127
],
2228
"_resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.3.1.tgz",
23-
"_shasum": "5466b8f31c1f493a96754c1426c25796d0633dd9",
24-
"_spec": "@fortawesome/fontawesome-free@5.3.1",
25-
"_where": "/Users/aqeeb/aqeebimtiaz.github.io",
29+
"_spec": "5.3.1",
30+
"_where": "/home/aqeeb/aqeebimtiaz.github.io",
2631
"author": {
2732
"name": "Dave Gandy",
2833
"email": "dave@fontawesome.com",
@@ -31,7 +36,6 @@
3136
"bugs": {
3237
"url": "http://github.com/FortAwesome/Font-Awesome/issues"
3338
},
34-
"bundleDependencies": false,
3539
"contributors": [
3640
{
3741
"name": "Brian Talbot",
@@ -55,7 +59,6 @@
5559
}
5660
],
5761
"dependencies": {},
58-
"deprecated": false,
5962
"description": "The iconic font, CSS, and SVG framework",
6063
"engines": {
6164
"node": ">=6"

0 commit comments

Comments
 (0)