"Flipclock Timer Customization"
Bootstrap 4.0.0 Snippet by mjnprojecttesting

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.js"></script>
<h1>Flipclock Timer Customization</h1>
<div class="clock" style="margin:2em;"></div>
<div class="clock2" style="margin:2em;"></div>
<div class="message"></div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
.flip-clock-wrapper ul li a div.down{
border-bottom-left-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
.clock.flip-clock-wrapper ul li a div div.inn{
font-size: 11px !important;
line-height: 25px !important;
}
ul.flip {
padding: 0px 10px !important;
}
.clock.flip-clock-wrapper ul{
width: 15px !important;
height: 25px !important;
}
.clock.flip-clock-wrapper ul li a div.up:after{
top: 12px !important;
}
.flip-clock-wrapper ul.flip.flip:nth-child(even){
margin: 0px 10px 0px 0px !important;
border-radius: 0px 6px 6px 0px !important;
}
.flip-clock-wrapper ul.flip:nth-child(even) li a div div.inn{
background-color: #ff7c0c !important;
border-radius: 0px 6px 6px 0px !important;
}
.flip-clock-wrapper ul.flip.flip:nth-child(odd){
margin: 0px !important;
border-radius: 6px 0px 0px 6px !important;
}
.flip-clock-wrapper ul.flip:nth-child(odd) li a div div.inn{
background-color: #f39a3f !important;
border-radius: 6px 0px 0px 6px !important;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
var clock;
$(document).ready(function() {
var clock;
clock = $('.clock').FlipClock({
clockFace: 'HourlyCounter',
autoStart: false,
callbacks: {
stop: function() {
$('.message').html('The clock has stopped!')
}
}
});
clock.setTime(180);
clock.setCountdown(true);
clock.start();
var clock2;
clock2 = $('.clock2').FlipClock({
clockFace: 'HourlyCounter',
autoStart: false,
callbacks: {
stop: function() {
$('.message').html('The clock has stopped!')
}
}
});
clock2.setTime(180);
clock2.setCountdown(true);
clock2.start();
$( "span.flip-clock-divider" ).remove();
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Rubik Presentation Page
Carousel with Timer and Caption

Questions / Comments: