Elements

  1. Home
  2. Components

	<div class="count-down no-title">
		<div class="slider_timer "></div>
	</div>
How to use

This countdown is designed using syotimer jquery plugin. You can find the whole documentation of how to use it in the website. Here are some instructions for the example design as shown:

  • Use .count-down wrapper for all timer
  • The .no-title class used if you dont want to show Days, Hours, Minutes, Seconds as caption
  • Use a class or id as a hook to javascript as the following example 
    
	$('.slider_timer ').syotimer({
		year: 2022,		
		month: 10,
		day: 9,
		hour: 20,
		minute: 30
	});

Example


	<!-- Default -->
	<div class="count-down titled">
		<div class="slider_timer "></div>
	</div>

	<!-- Circled -->
	<div class="count-down titled circled">
		<div class="slider_timer "></div>
	</div>

	<!-- colored background -->
	<div class="count-down bg-primary colored-bg text-center titled circled">
		<div class="slider_timer "></div>
	</div>

	<!-- Image background -->
	<div class="count-down bg-image titled circled" style="background-image: url('../..');">
		<div class="slider_timer "></div>
	</div>
How to use

For the different customization follow the instructions:

  • Use a class or id as a hook to javascript as the following example 
    
	$('.slider_timer ').syotimer({
		year: 2022,		
		month: 10,
		day: 9,
		hour: 20,
		minute: 30
	});
  • The .titled class is used to show Days, Hours, Minutes, Seconds as caption
  • Use the .circled class with .count-down for the circle timer
  • The .bg-image class let's you to set a image as background

Example

Circled

Example

Colored Background

Example

Image Background

Example

Accessories
BRANDS
Accessories
Get in Touch

© Copyright Bigbag Store Bootstrap Template by Abdus.