Skip to content

Commit 548513f

Browse files
AdebayoIbrahimAdebayoIbrahim
authored
Add files via upload
1 parent 1ebc848 commit 548513f

3 files changed

Lines changed: 204 additions & 0 deletions

File tree

‎Projects/Carousel Slider/app.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
let slideCount = 0;
2+
countFunction();
3+
const next = document.querySelector(".next");
4+
const cont = document.querySelectorAll(".image_slder");
5+
const prev = document.querySelector(".previous");
6+
function countFunction() {
7+
const dots = document.querySelectorAll(".dots");
8+
const cont = document.querySelectorAll(".image_slder");
9+
for (i = 0; i < cont.length; i++) {
10+
cont[i].style.display = "none";
11+
}
12+
for (i = 0; i < dots.length; i++) {
13+
if (dots[i].classList.contains("current")) {
14+
dots[i].classList.remove("current");
15+
}
16+
}
17+
18+
cont[slideCount].style.display = "block";
19+
dots[slideCount].classList.add("current");
20+
}
21+
next.addEventListener("click", nextSlide);
22+
prev.addEventListener("click", prevSlide);
23+
24+
function nextSlide() {
25+
slideCount++;
26+
slideCount >= cont.length && (slideCount = 0);
27+
countFunction();
28+
}
29+
function prevSlide() {
30+
slideCount--;
31+
slideCount < 0 && (slideCount = cont.length - 1);
32+
countFunction();
33+
}
34+
setInterval(nextSlide, 5000);

‎Projects/Carousel Slider/index.css‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
@import url('https://fonts.cdnfonts.com/css/source-sans-pro');
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
body {
8+
font-family: Source Sans Pro, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
9+
}
10+
.navbar {
11+
background: rgb(5, 5, 5);
12+
color: white;
13+
padding: 1rem 5%;
14+
}
15+
header {
16+
display: flex;
17+
justify-content: space-between;
18+
align-items: center;
19+
}
20+
header > .logo {
21+
font-size: 1.4rem;
22+
font-weight: 600;
23+
font-family: Segoe Script, Source Sans Pro;
24+
}
25+
header ul {
26+
margin: 0;
27+
list-style: none;
28+
}
29+
header ul li {
30+
display: inline;
31+
margin-right: 12px;
32+
font-size: 18px;
33+
}
34+
.hero_section {
35+
width: 100%;
36+
height: 85vh;
37+
overflow-x: hidden;
38+
overflow-y: hidden;
39+
}
40+
.container-images {
41+
position: relative;
42+
height: 100%;
43+
}
44+
.image_slder {
45+
height: 100%;
46+
}
47+
.image_slder img {
48+
width: 100%;
49+
height: 100%;
50+
object-fit: cover;
51+
}
52+
53+
.animate {
54+
animation: animate 1s ease-in-out;
55+
}
56+
@keyframes animate {
57+
from {
58+
opacity: 0.3;
59+
}
60+
to {
61+
opacity: 1;
62+
}
63+
}
64+
.dots-track {
65+
display: flex;
66+
justify-content: center;
67+
align-items: center;
68+
text-align: center;
69+
margin-top: -50px;
70+
gap: 5px;
71+
}
72+
.dots-track > div {
73+
width: 20px;
74+
height: 20px;
75+
border-radius: 50%;
76+
background: #ffffff33;
77+
}
78+
79+
.current {
80+
background: #ffffffcc !important;
81+
animation: opacity 1s ease-in-out;
82+
}
83+
@keyframes opacity {
84+
from {
85+
opacity: 0.5;
86+
}
87+
to {
88+
opacity: 1;
89+
}
90+
}
91+
.next {
92+
color: white;
93+
position: absolute;
94+
top: 50%;
95+
right: 10px;
96+
padding: 10px;
97+
cursor: pointer;
98+
background: transparent;
99+
border-radius: 0.3rem;
100+
top: 40%;
101+
font-size: 1.5rem;
102+
transition: background 500ms ease;
103+
user-select: none;
104+
}
105+
.previous {
106+
color: white;
107+
position: absolute;
108+
top: 50%;
109+
left: 10px;
110+
padding: 10px;
111+
cursor: pointer;
112+
background: transparent;
113+
border-radius: 0.3rem;
114+
top: 40%;
115+
font-size: 1.5rem;
116+
transition: background 500ms ease;
117+
user-select: none;
118+
}
119+
.next:hover {
120+
background: rgba(68, 63, 63, 0.7);
121+
}
122+
.previous:hover {
123+
background: rgba(68, 63, 63, 0.7);
124+
}
125+
.hero-text {
126+
position: absolute;
127+
top: 35%;
128+
color: white;
129+
left: 5%;
130+
padding-left: 30px;
131+
animation: slidein 1s ease-out;
132+
/* transform: translate(-20%, -20%); */
133+
}
134+
135+
@keyframes slidein {
136+
from {
137+
transform: translateX(400px);
138+
opacity: 0.3;
139+
}
140+
to {
141+
transform: translateX(0);
142+
opacity: 1;
143+
}
144+
}
145+
.header-text h1 {
146+
font-size: 2em;
147+
}
148+
.header-text p {
149+
max-width: 70%;
150+
padding-block: 1em;
151+
font-size: 20px;
152+
}
153+
.btn-group {
154+
display: flex;
155+
gap: 2rem;
156+
}
157+
.btn-group button {
158+
text-align: center;
159+
padding: 0.5rem 2rem;
160+
font-family: Source Sans Pro, Poppins, verdana;
161+
border: 1px solid white;
162+
color: white;
163+
background: transparent;
164+
cursor: pointer;
165+
font-size: 0.9em;
166+
}
167+
.btn-group button:hover {
168+
background: white;
169+
color: black;
170+
}

‎Projects/Carousel Slider/screenshot-pull-img.png‎

527 KB
Loading

0 commit comments

Comments
 (0)