-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathour-story-slider.html
More file actions
77 lines (66 loc) · 2.9 KB
/
our-story-slider.html
File metadata and controls
77 lines (66 loc) · 2.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<style>
.slide-buttons {
display: flex;
}
.button-gap {
visibility: hidden;
background-color: red;
}
.slides {
white-space: pre-wrap;
display: flex;
flex-wrap: nowrap;
overflow-x: hidden;
}
.slide {
flex: 0 0 100%;
}
.custom_slider .slide-buttons button:hover {
background-color: #C6C6F7 !important;
border: none;
}
.custom_slider button {
background-color: #4e4ef2 !important;
border: none;
padding: 14px !important;
line-height: 100%;
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-size: 16px;
color: #fff;
border-radius: 4px;
display: flex;
outline: none;
}
</style>
<div class="slides-heading"><h2>Our Story</h2></div>
<div class="slides"></div>
<div class="slide-buttons">
<button class="slide-prev"><span class="arrow"><</span></button>
<button class="button-gap"><</button>
<button class="slide-next elementor-button">Next <span class="arrow">></span></button>
</div>
<script>
const slides = [
`Scaleup Consulting Australia is the result of years of custom software development and startup consulting.
Founded by a passionate IT consultant, our company aims to support other startups and small businesses looking to launch or scale.
We recognise that the digital landscape and technological innovations continue to shift. So we aim to provide businesses with expert guidance and the customised services they require while staying within their budget.`,
`We understand how one’s entrepreneurial journey can be complex and challenging, especially in an attempt to grow or scale their business.
We have seen a number of businesses waste resources trying to scale – a reality we are working hard to prevent from happening to our existing and future clients.`,
`At present, we serve our clients with a diverse and fully remote team of seasoned software developers, programmers, and digital marketing specialists.
We constantly seek ways to improve our skill sets and work processes to achieve our common goal: helping clients ease the process of taking their business to the next level.`,
];
const elem = document.querySelector('.slides');
elem.innerHTML = slides.map(slide => `<div class="slide">${slide}</div>`).join('');
document.querySelector('.slide-next').addEventListener('click', () => {
const currSlide = Math.round(elem.scrollLeft / elem.clientWidth);
const nextSlide = (currSlide + 1) % slides.length;
elem.scrollLeft = nextSlide * elem.clientWidth;
});
document.querySelector('.slide-prev').addEventListener('click', () => {
const currSlide = Math.round(elem.scrollLeft / elem.clientWidth);
const prevSlide = (currSlide - 1 + slides.length) % slides.length;
elem.scrollLeft = prevSlide * elem.clientWidth;
});
</script>