JavaScript components

Slick slider

Folder: app/addons/slick

This plugin is used to create responsive sliders on your website.

The homepage slider was built with this plugin.

The page slider can be set up from app/js/script.js .  In this file you can find the initSlider function which allows you to customize the slider settings:

You can find more settings at http://kenwheeler.github.io/slick/

Each slider item style can be customized from css/scss/elements/_homepageSlider.scss

 

Masonry

Folder: app/modules/Masonry

Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.

 

Magnific-Popup

Folder: app/modules/Magnific-Popup

This plugin is used for images and video popup.

 

Datepicker

Install
npm install @fengyuanchen/datepicker
Include files:
<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<link  href="/path/to/datepicker.css" rel="stylesheet">
<script src="/path/to/datepicker.js"></script>
Usage

Initialize with $.fn.datepicker method.

<input data-toggle="datepicker">
<textarea data-toggle="datepicker"></textarea>
<div data-toggle="datepicker"></div>
$('[data-toggle="datepicker"]').datepicker();
Options#

You may set datepicker options with $().datepicker(options). If you want to change the global default options, You may use $.fn.datepicker.setDefaults(options).

autoShow

  • Type: Boolean
  • Default: false

Show the datepicker automatically when initialized.

autoHide

  • Type: Boolean
  • Default: false

Hide the datepicker automatically when picked.

autoPick

  • Type: Boolean
  • Default: false

Pick the initial date automatically when initialized.

You can find more options at https://github.com/fengyuanchen/datepicker

Range-slider

noUiSlider is a range slider without bloat. It offers a ton off features, and it is as small, lightweight and minimal as possible, which is great for mobile use on the many supported devices, including iPhone, iPad, Android devices & Windows (Phone) 8 desktops, tablets, and all-in-ones.

Basic structure:

You can read more at https://refreshless.com/nouislider/