Skip to content

Commit 199743f

Browse files
committed
Include testimonials for our online courses.
Carousel code has been taken from https://jekyllcodex.org/without-plugin/slider/
1 parent 67ec99d commit 199743f

17 files changed

+239
-0
lines changed

_includes/carousel.html

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
{% assign letterstring = "a,b,c,d,e,f,g,h,i,j,k,l,m,n" %}
2+
{% assign letters = letterstring | split: ',' %}
3+
{% assign number = include.number | minus: 1 %}
4+
<div class="carousel__holder">
5+
<div id="carousel{{ number }}" class="carousel">
6+
{% for item in include.images %}
7+
<input class="carousel__activator" type="radio" name="carousel{{ number }}" id="{{ number }}{{ letters[forloop.index0] }}" {% if forloop.first %}checked="checked"{% endif %} />
8+
{% endfor %}
9+
{% for item in include.images %}
10+
{% if forloop.index == forloop.length %}
11+
{% assign nextindex = 0 %}
12+
{% else %}
13+
{% assign nextindex = forloop.index0 | plus: 1 %}
14+
{% endif %}
15+
{% assign nextletter = letters[nextindex] %}
16+
{% if forloop.index0 == 0 %}
17+
{% assign previndex = forloop.length | minus: 1 %}
18+
{% else %}
19+
{% assign previndex = forloop.index0 | minus: 1 %}
20+
{% endif %}
21+
{% assign prevletter = letters[previndex] %}
22+
<div class="carousel__controls">
23+
<label class="carousel__control carousel__control--backward" for="{{ number }}{{ prevletter }}"></label>
24+
<label class="carousel__control carousel__control--forward" for="{{ number }}{{ nextletter }}"></label>
25+
</div>
26+
{% endfor %}
27+
<div class="carousel__track">
28+
<ul>
29+
{% for item in include.images %}
30+
<li class="carousel__slide" style="background-image: url('{{ item }}');"></li>
31+
{% endfor %}
32+
</ul>
33+
</div>
34+
<div class="carousel__indicators">
35+
{% for item in include.images %}
36+
<label class="carousel__indicator" for="{{ number }}{{ letters[forloop.index0] }}"></label>
37+
{% endfor %}
38+
</div>
39+
</div>
40+
</div>
41+
42+
<style>
43+
.carousel__holder {width: 100%; position: relative; padding-bottom: {{ include.height }}{{ include.unit }}; margin: 1rem 0 1rem;}
44+
.carousel {
45+
height: 100%;
46+
width: 100%;
47+
overflow: hidden;
48+
text-align: center;
49+
position: absolute;
50+
padding: 0;
51+
}
52+
.carousel__controls,
53+
.carousel__activator {
54+
display: none;
55+
}
56+
{% for item in include.images %}
57+
.carousel__activator:nth-of-type({{ forloop.index }}):checked ~ .carousel__track {
58+
-webkit-transform: translateX(-{{ forloop.index0 }}00%);
59+
transform: translateX(-{{ forloop.index0 }}00%);
60+
}
61+
.carousel__activator:nth-of-type({{ forloop.index }}):checked ~ .carousel__slide:nth-of-type({{ forloop.index }}) {
62+
transition: opacity 0.5s, -webkit-transform 0.5s;
63+
transition: opacity 0.5s, transform 0.5s;
64+
transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
65+
top: 0;
66+
left: 0;
67+
right: 0;
68+
opacity: 1;
69+
-webkit-transform: scale(1);
70+
transform: scale(1);
71+
}
72+
.carousel__activator:nth-of-type({{ forloop.index }}):checked ~ .carousel__controls:nth-of-type({{ forloop.index }}) {
73+
display: block;
74+
opacity: 1;
75+
}
76+
.carousel__activator:nth-of-type({{ forloop.index }}):checked ~ .carousel__indicators .carousel__indicator:nth-of-type({{ forloop.index }}) {
77+
opacity: 1;
78+
}
79+
{% endfor %}
80+
81+
.carousel__control {
82+
height: 30px;
83+
width: 30px;
84+
margin-top: -15px;
85+
top: 50%;
86+
position: absolute;
87+
display: block;
88+
cursor: pointer;
89+
border-width: 5px 5px 0 0;
90+
border-style: solid;
91+
border-color: #fafafa;
92+
opacity: 0.35;
93+
opacity: 1;
94+
outline: 0;
95+
z-index: 3;
96+
}
97+
.carousel__control:hover {
98+
opacity: 1;
99+
}
100+
.carousel__control--backward {
101+
left: 20px;
102+
-webkit-transform: rotate(-135deg);
103+
transform: rotate(-135deg);
104+
}
105+
.carousel__control--forward {
106+
right: 20px;
107+
-webkit-transform: rotate(45deg);
108+
transform: rotate(45deg);
109+
}
110+
.carousel__indicators {
111+
position: absolute;
112+
bottom: 20px;
113+
width: 100%;
114+
text-align: center;
115+
}
116+
.carousel__indicator {
117+
height: 15px;
118+
width: 15px;
119+
border-radius: 100%;
120+
display: inline-block;
121+
z-index: 2;
122+
cursor: pointer;
123+
opacity: 0.35;
124+
margin: 0 2.5px 0 2.5px;
125+
}
126+
.carousel__indicator:hover {
127+
opacity: 0.75;
128+
}
129+
.carousel__track {
130+
position: absolute;
131+
top: 0;
132+
right: 0;
133+
bottom: 0;
134+
left: 0;
135+
padding: 0;
136+
margin: 0;
137+
transition: -webkit-transform 0.5s ease 0s;
138+
transition: transform 0.5s ease 0s;
139+
transition: transform 0.5s ease 0s, -webkit-transform 0.5s ease 0s;
140+
}
141+
.carousel__track .carousel__slide {
142+
display: block;
143+
top: 0;
144+
left: 0;
145+
right: 0;
146+
opacity: 1;
147+
}
148+
{% for item in include.images %}
149+
.carousel__track .carousel__slide:nth-of-type({{ forloop.index }}) {
150+
-webkit-transform: translateX({{ forloop.index0 }}00%);
151+
transform: translateX({{ forloop.index0 }}00%);
152+
}
153+
{% endfor %}
154+
155+
.carousel--scale .carousel__slide {
156+
-webkit-transform: scale(0);
157+
transform: scale(0);
158+
}
159+
.carousel__slide {
160+
height: 100%;
161+
position: absolute;
162+
opacity: 0;
163+
overflow: hidden;
164+
}
165+
.carousel__slide .overlay {height: 100%;}
166+
.carousel--thumb .carousel__indicator {
167+
height: 30px;
168+
width: 30px;
169+
}
170+
.carousel__indicator {
171+
background-color: #fafafa;
172+
}
173+
{% for item in include.images %}
174+
.carousel__slide:nth-of-type({{ forloop.index }}),
175+
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type({{ forloop.index }}) {
176+
background-size: cover;
177+
background-position: center;
178+
}
179+
{% endfor %}
180+
</style>
181+
182+
<script>
183+
function isVisible(el) {
184+
while (el) {
185+
if (el === document) {
186+
return true;
187+
}
188+
189+
var $style = window.getComputedStyle(el, null);
190+
191+
if (!el) {
192+
return false;
193+
} else if (!$style) {
194+
return false;
195+
} else if ($style.display === 'none') {
196+
return false;
197+
} else if ($style.visibility === 'hidden') {
198+
return false;
199+
} else if (+$style.opacity === 0) {
200+
return false;
201+
} else if (($style.display === 'block' || $style.display === 'inline-block') &&
202+
$style.height === '0px' && $style.overflow === 'hidden') {
203+
return false;
204+
} else {
205+
return $style.position === 'fixed' || isVisible(el.parentNode);
206+
}
207+
}
208+
}
209+
{% if include.duration %}
210+
setInterval(function(){
211+
var j=0;
212+
var elements = document.querySelectorAll('#carousel{{ number}} .carousel__control--forward');
213+
for(i=(elements.length - 1);i>-1;i--) {
214+
if(isVisible(elements[i])) j=i;
215+
}
216+
elements[j].click();
217+
},{{ include.duration }}000);
218+
{% endif %}
219+
</script>

online-courses.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,22 @@
22
title: Online Courses from The Scala Center
33
layout: singlepage-overview
44
scala3: true
5+
testimonials:
6+
- /resources/images/online-courses/testimonial000.jpg
7+
- /resources/images/online-courses/testimonial001.jpg
8+
- /resources/images/online-courses/testimonial002.jpg
9+
- /resources/images/online-courses/testimonial003.jpg
10+
- /resources/images/online-courses/testimonial004.jpg
11+
- /resources/images/online-courses/testimonial005.jpg
12+
- /resources/images/online-courses/testimonial006.jpg
13+
- /resources/images/online-courses/testimonial007.jpg
14+
- /resources/images/online-courses/testimonial008.jpg
15+
- /resources/images/online-courses/testimonial009.jpg
16+
- /resources/images/online-courses/testimonial010.jpg
17+
- /resources/images/online-courses/testimonial011.jpg
18+
- /resources/images/online-courses/testimonial012.jpg
19+
- /resources/images/online-courses/testimonial013.jpg
20+
- /resources/images/online-courses/testimonial014.jpg
521
---
622

723
The online courses from the [Scala Center] provide two main paths to learn
@@ -89,6 +105,10 @@ the (legacy) Scala 2 version of our courses here:
89105
- [Parallel Programming (Scala 2 version)](https://www.coursera.org/learn/scala2-parallel-programming)
90106
- [Programming Reactive Systems (Scala 2 version)](https://www.coursera.org/learn/scala2-akka-reactive)
91107

108+
## Testimonials
109+
110+
{% include carousel.html images=page.testimonials number=0 height="50" unit="%" duration="10" %}
111+
92112
## Other Online Resources
93113

94114
You can find other online resources contributed by the community on
Loading
Loading
Loading
Loading
Loading
Loading
Loading
Loading
Loading
Loading
Loading
Loading
Loading
Loading
Loading

0 commit comments

Comments
 (0)