HTML Website Templates use RD Mail Form extension to implement mail form functionality. Basic form code structure is similar to the one below:

<!-- Rd Mailform result field-->
<div class="rd-mailform-validate"></div>
<!-- RD Mailform-->
<form data-form-output="form-output-global" data-form-type="contact" method="post" action="bat/rd-mailform.php" class="rd-mailform">
  <div class="form-wrap form-wrap-validation">
    <label for="contact-name" class="form-label">Name</label>
      <input id="contact-name" type="text" name="name" data-constraints="@Required" class="form-control"/>
    </div>
    <div class="form-wrap form-wrap-validation">
    <label for="contact-phone" class="form-label>Phone</label>
      <input id="contact-phone" type="text" name="phone" data-constraints="@Required" class="form-control"/>
    </div>
    <div class="form-wrap form-wrap-validation">
    <label for="contact-email" class="form-label">E-Mail</label>
      <input id="contact-email" type="email" name="email" data-constraints="@Email @Required" class="form-control"/>
    </div>
    <div class="form-wrap form-wrap-validation">
    <label for="contact-message" class="form-label">Message</label>
      <textarea id="contact-message" name="message" data-constraints="@Required" class="form-control"></textarea>
    </div>
    <div class="form-wrap form-wrap-recaptcha">
      <div class="recaptcha" id="captcha1" data-sitekey="6LfZlSETAAAAAC5VW4R4tQP8Am_to4bM3dddxkEt" ></div>
    </div>
    <button type="submit" class="button button-primary">Send</button>	
</form>  

Form mode configuration

RD Mailform allows to use mail form in three modes:

• Contact form - contact;
• Booking form - order;
• Newsletter form - subscribe;

In order to change form working mode you should add hidden form-type field to target form HTML code, where respectable form mode is set as a value.

<!-- RD Mailform -->
<form class='rd-mailform' method="post" action="bat/rd-mailform.php">
  <!-- RD Mailform Type -->
  <input type="hidden" data-form-type="contact" value="contact"/>
  <!-- END RD Mailform Type -->
</form>
<!-- END RD Mailform -->

Mail configuration for messages delivery

Form sends messages to specific email address, defined in bat/rd-mailform.php file in $recipients variable. You may set any number of email addresses, separated by space here.

$recipients = "test@demolink.com test2@demolink.com" 

Form fields configuration

Mail form RD Mailform allows you to use the following field types:

• Text field

  <input type="text" name="name" data-constraints="@NotEmpty" placeholder="Name:"/>

• Date selector

  <div class="form-group" >
    <input type="date" data-constraints="@Date" name="date" placeholder="Date:" class="form-control"/>
   </div>

• Text area

  <textarea type="text" name="message" data-constraints="@NotEmpty" placeholder="Message:"></textarea>

Form fields validation setup

Mail form RD Mailform supports form fields dynamic validation. You should add data-constraints data attribute to target field HTML code in order to implement this validation for target form.

There are following validation types available:

• @LettersOnly - field’s value should be set to letters only;
• @NumbersOnly - field’s value should be set to numbers only;
• @NotEmpty - field must be filled in;
• @Email - field’s value should be set to email address;
• @Phone - field’s value should be set to phone number in the international format;
• @Date - field’s value should be set to date in MM / DD / YYYY format;
• @SelectRequired - at least one of menu options must be selected.

For instance,

<div class="form-group" >
  <label data-add-placeholder for="mailform-input-textarea"> Message </label>
  <textarea name="message" id="mailform-input-textarea" data-constraints="@NotEmpty"></textarea>
</div>

Form informing messages configuration

Mail form RD Mailform allows you to set custom informing messages, such as fields validation error messages or messages on successful/unsuccessful form submitting.

if (plugins.rdMailForm.length) {
    var i, j, k,
      msg = {
        'MF000': 'Successfully sent!',
        'MF001': 'Recipients are not set!',
        'MF002': 'Form will not work locally!',
        'MF003': 'Please, define email field in your form!',
        'MF004': 'Please, define type of your form!',
        'MF254': 'Something went wrong with PHPMailer!',
        'MF255': 'Aw, snap! Something went wrong.'
      };

    for (i = 0; i < plugins.rdMailForm.length; i++) {
      var $form = $(plugins.rdMailForm[i]),
        formHasCaptcha = false;

      $form.attr('novalidate', 'novalidate').ajaxForm({
        data: {
          "form-type": $form.attr("data-form-type") || "contact",
          "counter": i
        },
        beforeSubmit: function (arr, $form, options) {
          if (isNoviBuilder)
            return;

          var form = $(plugins.rdMailForm[this.extraData.counter]),
            inputs = form.find("[data-constraints]"),
            output = $("#" + form.attr("data-form-output")),
            captcha = form.find('.recaptcha'),
            captchaFlag = true;

          output.removeClass("active error success");

          if (isValidated(inputs, captcha)) {

            // veify reCaptcha
            if(captcha.length) {
              var captchaToken = captcha.find('.g-recaptcha-response').val(),
                captchaMsg = {
                  'CPT001': 'Please, setup you "site key" and "secret key" of reCaptcha',
                  'CPT002': 'Something wrong with google reCaptcha'
                }

              formHasCaptcha = true;

              $.ajax({
                method: "POST",
                url: "bat/reCaptcha.php",
                data: {'g-recaptcha-response': captchaToken},
                async: false
              })
                .done(function (responceCode) {
                  if (responceCode != 'CPT000') {
                    if (output.hasClass("snackbars")) {
                      output.html(' <p> <span class="icon text-middle mdi mdi-check icon-xxs"> </span> <span>' + captchaMsg[responceCode] + ' </span> </p>')

                      setTimeout(function () {
                        output.removeClass("active");
                      }, 3500);

                      captchaFlag = false;
                    } else {
                      output.html(captchaMsg[responceCode]);
                    }

                    output.addClass("active");
                  }
                });
            }

            if(!captchaFlag) { 
              return false;
            }

            form.addClass('form-in-process');

            if (output.hasClass("snackbars")) {
              output.html(' <p> <span class="icon text-middle fa fa-circle-o-notch fa-spin icon-xxs"> </span> <span>Sending </span> </p>');
              output.addClass("active");
            }
          } else {
            return false;
          }
        },
        error: function (result) {
          if (isNoviBuilder)
            return;

          var output = $("#" + $(plugins.rdMailForm[this.extraData.counter]).attr("data-form-output")),
            form = $(plugins.rdMailForm[this.extraData.counter]);

          output.text(msg[result]);
          form.removeClass('form-in-process');

          if(formHasCaptcha) {
            grecaptcha.reset();
          }
        },
        success: function (result) {
          if (isNoviBuilder)
            return;

          var form = $(plugins.rdMailForm[this.extraData.counter]),
            output = $("#" + form.attr("data-form-output"));

          form
            .addClass('success')
            .removeClass('form-in-process');

          if(formHasCaptcha) {
            grecaptcha.reset();
          }

          result = result.length === 5 ? result : 'MF255';
          output.text(msg[result]);

          if (result === "MF000") {
            if (output.hasClass("snackbars")) {
              output.html(' <p> <span class="icon text-middle mdi mdi-check icon-xxs"> </span> <span>' + msg[result] + ' </span> </p>');
            } else {
              output.addClass("active success");
            }
          } else {
            if (output.hasClass("snackbars")) {
              output.html('  <p class="snackbars-left"> <span class="icon icon-xxs mdi mdi-alert-outline text-middle"> </span> <span>' + msg[result] + ' </span> </p>');
            } else {
              output.addClass("active error");
            }
          }

          form.clearForm();
          form.find('input, textarea').blur();

          setTimeout(function () {
            output.removeClass("active error success");
            form.removeClass('success');
          }, 3500);
        }
      });
    }
  }

SMTP server configuration

SMTP server setting does not relate to RD Mailform form settings at all.

In order to send your site messages via SMTP-server you'll need to refer to official PhpMailer (library, used in form) documentation or check this tutorial from official documentation.

• http://phpmailer.worxware.com/?pg=examplebsmtp

Please, note: mail form extension does not work locally. You should upload site to corresponding hosting server in order to send emails.

Configuring spam and abuse protection

RD Mailform uses Google reCAPTCHA for spam protection.

Pay attention: in order to disable Google reCAPTCHA, just delete a section of html code, wrapped in comments "<!--Google captcha-->" - "<!-- End google captcha-->".

Getting Started with Google ReCaptcha

To manage Google ReCaptcha, you should:

• Register your domain at Google reCaptcha website and get a pair of API-keys (a pair of keys consists of site key and secret).
• Specify your API-keys in bat/reCaptcha.php file in $siteKey and $secret variables at the beginning of the file:

  $siteKey = 'You site key here';
  $secret = 'You secret key here';

• Paste this section to html and specify your site key in data-attribute data-sitekey=""

You can find more detailed instructions at Google ReCaptcha official website.

Google ReCaptcha Marking

The basic marking for ReCaptcha looks the following way:

<!--Google captcha-->
  <div class="form-wrap">
    <div id="captcha1" data-sitekey="You site key here" class="recaptcha"></div>
  </div>
<!-- End google captcha-->

Pay attention: id attribute and .recaptcha class are required.

Google ReCaptcha Setup

Google Recaptcha supports the following settings:

• Changing size;
• Changing color scheme.

Changing Google ReCaptcha Size

To change widget size, specify in data-attribute data-size one of the following size values:

• compact;
• normal (default).

The sample code looks the following way:

<!--Google captcha-->
  <div class="form-wrap">
    <div id="captcha1" data-sitekey="You site key here" data-size="compact" class="recaptcha"></div>
  </div>
<!-- End google captcha-->

Changing Google ReCaptcha widget color scheme

To change widget color scheme, specify in the data-attribute data-theme one of the following variants:

• dark;
• light (default).

Sample code looks the following way:

<!--Google captcha-->
  <div class="form-wrap">
    <div id="captcha1" data-sitekey="You site key here" data-theme="dark"class="recaptcha"></div>
  </div>
<!-- End google captcha-->

HTML Website Templates use RD Navbar extension to implement site navigation functionality. Basic HTML code structure for this extension looks as follows:

<!-- RD Navbar -->
  <div class="rd-navbar-wrap">
    <nav class="rd-navbar" data-lg-layout="rd-navbar-static">
      <div class="rd-navbar-inner">

        <!-- RD Navbar Collapse -->
        <div class="rd-navbar-collapse">
          <button class="rd-navbar-collapse-toggle">
            <span></span>
          </button>
          <ul class="rd-navbar-collapse-items list">
            <li>
            ...
            </li>
          </ul>
        </div>
        <!-- END RD Navbar Collapse -->

        <!-- RD Navbar Panel -->
          <div class="rd-navbar-panel">

          <!-- RD Navbar Toggle -->
          <button class="rd-navbar-toggle"><span></span></button>
          <!-- END RD Navbar Toggle -->

          <!-- RD Navbar Brand -->
          <div class="rd-navbar-brand">
          ...
          </div>
          <!-- END RD Navbar Brand -->

          </div>
        <!-- END RD Navbar Panel -->

        <div class="rd-navbar-nav-wrap">
          <!-- RD Navbar Search -->
          <div class="rd-navbar-search">
            <form class="rd-navbar-search-form"
            action="search.php" method="GET">
              <label class="rd-navbar-search-form-input">
                <input type="text" name="s"
                placeholder="Search.." autocomplete="off"/>
              </label>
              <button class="rd-navbar-search-form-submit"
              type="submit"></button>
            </form>
            <span class="rd-navbar-live-search-results"></span>
            <button class="rd-navbar-search-toggle"></button>
          </div>
          <!-- END RD Navbar Search -->

        <!-- RD Navbar Nav -->
        <ul class="rd-navbar-nav">
          <li>
          ...
          </li>
          <li>
          ...

            <!-- RD Navbar Dropdown -->
            <ul class="rd-navbar-dropdown">
              <li>
              ...
              </li>
            </ul>
          <!-- END RD Navbar Dropdown -->
          </li>
          <li>
          ...

            <!-- RD Navbar Megamenu -->
              <ul class="rd-navbar-megamenu">
              <li>
              ...
              </li>
            </ul>
          <!-- END RD Navbar Megamenu -->
          </li>
        </ul>
        <!-- END RD Navbar Nav -->
        </div>
      </div>
    </nav>
  </div>
  <!-- END RD Navbar -->

Please, note: navbar HTML structure might differ depending on exact template design specifications.

Navbar layout configuration

HTML Website Templates navbar works with 4 different layouts:

• Static - rd-navbar-static
• Wide - rd-navbar-fullwidth
• Mobile - rd-navbar-fixed
• Sidebar - rd-navbar-sidebar

In order to change layout for corresponding navigation panel you should just alter “data-layout” attribute value.

In order to enable/disable stick-up dropdown menu just edit “data-stick-up” attribute value (true/false).

In order to enable/disable dropdown menu on hover just edit “data-hover-on” attribute value (true/false).

<div class="rd-navbar-wrap">
    <nav class="rd-navbar" data-layout="rd-navbar-fixed" data-hover-on="false" data-stick-up="false">
    ...
    </nav>
  </div>

Please note: data attributes data-layout, data-stick-up, data-hover-on can be defined for all main dimension types as data-xx-layout, data-xx-stick-up, data-xx-hover-on (where xx can take xs, sm, md. lg values). Navigation panel appearance for lower resolutions is defined by template design specifics only.

Dropdown menu configuration

In order to define navigation panel dropdown menu, you should just add rd-navbar-dropdown class to corresponding submenu item.

<div class="rd-navbar-wrap">
    <nav class="rd-navbar" data-rd-navbar-lg="rd-navbar-static">
      <ul class="rd-navbar-nav">
        <li>
          <a href="#">Menu Link</a>
          <ul class="rd-navbar-dropdown">
            <li>
              <a href="#">Submenu Link 1</a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>

Mega menu configuration

In order to define navigation panel mega menu you should add rd-navbar-megamenu class to corresponding submenu item.

<div class="rd-navbar-wrap">
    <nav class="rd-navbar" data-rd-navbar-lg="rd-navbar-static">
      <ul class="rd-navbar-nav">
        <li>
          <a href="#">Menu Link</a>
          <ul class="rd-navbar-megamenu">
            <li>
              … Your Custom HTML Content in 1 Column ...
            </li>
            <li>
              … Your Custom HTML Content in 2 Column ...
            </li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>

By default columns size and width are calculated automatically, based on space available.

The plugin supports the following settings:

• Google API key setup for the map;
• Changing the map scale;
• Modifying the map’s center according to an address or coordinates;
• Setting the map style;
• Adding markers to the map.

Google API key setup for the map

Without a key, your map will work in demo mode. You can find a guide on getting the key ondevelopers.google.com

Insert the received key intodata-keyattribute:

<!-- Google Map-->
  ...
<div class="google-map-container" data-key="YOUR_API_KEY">
    <div class="google-map"> </div>
</div>
...

How to change the map center coordinates

To replace the map center coordinates with the necessary ones, you need:

<!-- Google Map-->
  ...
<div class="google-map-container">
    <div class="google-map"> </div>
</div>
...

to replace a required address indata-center attribute in .html file with a map in the section. As a result, you will get the following code:

<!-- Google Map-->
<div class="google-map-container" data-center="9870 St Vincent Place, Glasgow, DC 45 Fr 45.">
    <div class="google-map"> </div>
</div>

How to add a marker to the map

To add your marker to the map, you need to add ito the list:

<!-- Google Map-->
...
<ul class="google-map-markers>
    ...
</ul>
...

new position withdata-location attribute in .html file with the map. As a result, you will get:

<!-- Google Map-->
...
<ul class="google-map-markers>
    <li data-location="9870 St Vincent Place, Glasgow, DC 45 Fr 45."> </li>
</ul>
...

Adding a description to the marker

To add a popup window to a user marker, you need to specify content for the window indata-descriptionattribute:

<!-- Google Map-->
...
    <li data-location="9870 St Vincent Place, Glasgow, DC 45 Fr 45." data-description="9870 St Vincent Place, Glasgow"> </li>
...

How to replace the map style

The map supports lots of styling variants. You can get different ready-made styling variations on the website:https://snazzymaps.com/.

On the given website you need to copy the style array of a map you prefer and insert it intodata-stylesattribute of a corresponding map on a target *.html page:

<!-- Google Map-->
<div class="google-map-container" data-styles='Your Map Styles'>
    ...
</div>

HTML Website Templates use countTo.js extension to add counters to webpage.

Creating new counter

In order to create new counter the following HTML code should be added to page content:

<div class="counter" data-from="25" data-to="125"></div>

where, data-from attribute is responsible for counter origin, and data-to attribute - for the final result that will be displayed on page.

Counter working time correction

In order to change speed of counting you should add data-speed attribute and set time interval to the end of counting, in milliseconds.

For example,

<div class="counter" data-from="25" data-to="125" data-speed="5000"></div>

Counter update interval

in order to change time interval between counter updates you should add data-refresh-interval attribute and set needed time interval in milliseconds.

For example,

<div class="counter" data-from="25" data-to="125" data-speed="5000" data-refresh-interval="300"></div>

HTML Website Template uses Isotope for creating a layout filter.

To insert isotope to the corresponding layout of the target page, you should just add the'data-isotope-layout' attribute to the target HTML marking and specify the corresponding layout mode:

<div class="row" data-isotope-layout="masonry">
    <div class="col-sm-6 col-md-4">
        Item 1
    </div>
    <div class="col-sm-6 col-md-4">
        Item 2
    </div>
</div>

Supported layout modes are the following:

1. masonry

   elements are grouped randomly;

2. fitRows

   elements are grouped horizontally;

3. vertical

   elements are grouped vertically.

To insert isotope to the layouts, which do not contain grid elements, you should define the .isotope-item class for every isotope element.

<div data-isotope-layout="masonry">
    <div class="isotope-item">
        Item 1
    </div>
    <div class="isotope-item">
        Item 2
    </div>
</div>

Attention: in this case, dimensions of Isotope elements should be set up manually. HTML Website Template offers the ready-made functionality only for the grid elements.

To add Isotope filters to a page, you should define a group of Isotope items with the help of the 'data-isotope-group' attribute and define the corresponding filter types for each item:

<div data-isotope-group="gallery" data-isotope-layout="masonry">
    <div class="isotope-item" data-filter="type-1">
        Item 1
    </div>
    <div class="isotope-item" data-filter="type-2">
        Item 2
    </div>
</div>

Now, for items filtering it’s enough just to define the corresponding filter control buttons for the target group of Isotope items.

<button data-isotope-filter="*" data-isotope-group="gallery">
    Show All
</button>
<button data-isotope-filter="type-1" data-isotope-group="gallery">
    Type 1
</button>
<button data-isotope-filter="type-2" data-isotope-group="gallery">
    Type 2
</button>

HTML Website Templates use Swiper.js extension to implement slider functionality to template pages with extended data-API for interaction.

Default slider code structure appears as follows:

<!-- Swiper -->
<div class="swiper-container swiper-slider" data-height="" data-min-height="">
  <div class="swiper-wrapper">
    <div class="swiper-slide" data-slide-bg="">
      <div class="swiper-slide-caption">

      </div>
    </div>
    <div class="swiper-slide" data-slide-bg="">
      <div class="swiper-slide-caption">

      </div>
    </div>
    <div class="swiper-slide" data-slide-bg="">
      <div class="swiper-slide-caption">

      </div>
    </div>
  </div>

  <!-- Swiper Pagination -->
  <div class="swiper-pagination"></div>

  <!-- Swiper Navigation -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- Swiper Scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>
<!-- END Swiper -->

Slide background image configuration

Swiper slider height is set by using corresponding data-height and data-min-height attributes to target slider.

• data-height - defines requires slider height;
• data-min-height - defines slider height minimum;

You can set slider height (data-height, data-min-height) value in 3 formats:

• *px - defines static height, it will stay unchanged on screen resize;
• *% - defines slider height as a percent of its width;
• *vh - defines slider height as a percent of window height.

Static height example.

<div class="swiper-container swiper-slider" data-height="500px">
   ...
 </div>

Slider percent example

<div class="swiper-container swiper-slider" data-height="50%" data-min-height="300px">
   ...
 </div>

Window height example

<div class="swiper-container swiper-slider" data-height="100vh" data-min-height="300px">
    ...
  </div>

In case you do not specify slider height, it will be calculated based on the embedded content.

Slider autoplay configuration

By default Swiper slider in HTML Website template has autoplay enabled. In order to disable it or change slides switching time you should use data-autoplay attribute by using false key or time value in milliseconds. It should be added to target item with .swiper-slider class.

For example,

<div class="swiper-container swiper-slider" data-autoplay="false">
    ...
  </div>

or,

<div class="swiper-container swiper-slider" data-autoplay="3000">
    ...
  </div>

Slider loop configuration

To loop the slide display in slider you should use the data-loop data attribute (true/false, by default it’s set to true) for target item with .swiper-slider class.

For example,

<div class="swiper-container swiper-slider" data-direction="vertical">
    ...
  </div>

Slider navigation setup

Swiper supports the display of “Previous” and “Next” buttons to manage slides appearance. In order to show them you should use the following code structure for target slider.

<div class="swiper-container swiper-slider">
    <!-- Slider Navigation -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>

Slider pagination setup

Swiper supports slider pagination display. In order to show it you should use the following code structure for target slider.

<div class="swiper-container swiper-slider">
    <!-- Slider Pagination -->
    <div class="swiper-pagination"></div>
  </div>

By default slider pagination is clickable. If you need to disable this feature you should define data-clickable attribute for corresponding slider pagination.

<div class="swiper-container swiper-slider">
    <!-- Slider Pagination -->
    <div class="swiper-pagination" data-clickable="false"></div>
  </div>

To show the numeric value for corresponding pagination point you should use data-index-bullet=”true” data attribute for target slider pagination.

<div class="swiper-container swiper-slider">
    <!-- Slider Pagination -->
    <div class="swiper-pagination" data-index-bullet="true"></div>
  </div>

Scrollbar configuration

Swiper slider supports scrollbar display. In order to show them you should use the following code structure for target slider.

<div class="swiper-container swiper-slider">
    <!-- Slider Scrollbar -->
    <div class="swiper-scrollbar"></div>
  </div>

By default interaction with scrollbar is enabled. If you need to disable this feature you should define data-draggable=”false” data attribute for corresponding scrollbar in target slider code.

<div class="swiper-container swiper-slider">
    <!-- Slider Scrollbar -->
    <div class="swiper-scrollbar" data-draggable="false"></div>
  </div>

Arrows management

Swiper slider allows to manage slides appearance by using keypad arrow buttons. In order to enable this option you should use data-keyboard data attribute for target slider.

<div class="swiper-container swiper-slider" data-keyboard="true">
    ...
  </div>

Mouse management

Swiper slider supports slider management by using mouse. In order to enable this option you should use data-mousewheel data attribute for target slider.

<div class="swiper-container swiper-slider" data-mousewheel="true">
    ...
  </div>

By default this option blocks further page scrolling when first or last slide is reached. In order to disable page scrolling in this case you should use data-mousewheel-release=”true” data attribute for target slider.

<div class="swiper-container swiper-slider" data-mousewheel="true"
    data-mousewheel-release="true">
    ...
  </div>

Slide parallax integration

В HTML Website Templates allow you to integrate RD Parallax parallax effect to target slide of your Swiper slider. In order to do this you should use the following markup :

<!-- Swiper -->
<section class="rd-parallax rd-parallax-swiper">
  <div class="rd-parallax-layer" data-speed="" data-sm-speed=""  data-type="html">
    <section class="swiper-container swiper-slider" data-parallax="true">
      <div class="swiper-wrapper">
        <!-- RD Parallax -->
        <div class="swiper-slide" data-slide-bg="images/page-1_img01.jpg">
        </div>

        <div class="swiper-slide"></div>
      </div>
    </section>
  </div>
</section>

Slide background video integration

HTML Website Templates allow you to integrate Vide.js background video to target slide of your Swiper slider. In order to do this you should use the following markup :

<div class="swiper-slide">
  <div class="vide" data-vide-bg="video/video-bg">
    <div class="swiper-caption swiper-parallax" data-speed="0.5" data-fade="true"></div>
  </div>
</div>

Animate.css integration to slide elements

HTML Website Templates allow you to integrate Animate.css to slider elements. In order to do this you should define corresponding data attributes: data-caption-animate and data-caption-delay (to set delay if needed) for target slide. Delay time for data-caption-delay is set in milliseconds. You can use any animation effect, available in Animate.css as a target animation.

<div class="swiper-container swiper-slider">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="swiper-slide-caption">
          <h2 data-caption-animate="fadeUp">Your text goes here</h2>
          <p data-caption-animate="fadeUp" data-caption-delay="200">
          Some other text goes here
          </p>
        </div>
      </div>
    </div>
  </div>

Sliding effect configuration

Swiper slider has few sliding effects available:

• fade
• slide
• coverflow
• cube

To change sliding effect, you should use corresponding data-slide-effect data attribute for target slider.

<div class="swiper-container swiper-slider" data-slide-effect="fade">
  ...
</div>

WHTML Website Templates also use Slick-carousel.js for implementing carousel with extended data-API for interaction on template pages.

<!-- Slick Carousel -->
  <div class="slick-slider">
    <div class="item">
      ...
    </div>
    <div class="item">
      ...
    </div>
    <div class="item">
      ...
    </div>
  </div> 

Slick carousel supports displaying one or several carousel items at the same time. To set up carousel items display, use the corresponding data-attributes: data-items and data-*-items.

1. data-items="N"

   displays N items by default (default value = 1).

2. data-xs-items="N"

   displays N carousel items, starting from XS resolution.

3. data-sm-items="N"

   displays N carousel items, starting from SM resolution.

4. data-md-items="N"

   displays N carousel items, starting from MD resolution.

5. data-lg-items="N"

   displays N carousel items, starting from LG resolution.

, where N - a digit displaying a number of necessary elements.

For example:

<div class="slick-slider" data-items="2" data-xs-items="3" data-lg-items="4">
    ...
</div>

In this example, the carousel will display 2 elements by default, on xs, sm and md resolutions - 3 elements, on lg resolution - 4 elements.

To display "Back"/"Forward" controls in Slick Carousel, use data-nav="true" data-attribute for the target carousel.

<div class="slick-slider" data-nav="true">
    ...
</div>

To display pagination in Slick Carousel, use data-dots="true" data-attribute for the target carousel.

<div class="slick-slider" data-dots="true">
    ...
</div>

To display navigation in form of arrows in Slick Carousel, use data-attribute data-arrows="true" for the target carousel.

<div class="slick-slider" data-arrows="true">
    ...
</div>

To create a vertical carousel with the help of Slick Carousel, use data-vertical="true" attribute for the target carousel.

<div class="slick-slider" data-vertical="true">
    ...
</div>

HTML Website Templates use Owl-carousel.js extension for carousel functionality implementing to template pages with extended data-API for interaction.

Carousel default code structure appears the following way:

<!-- Owl Carousel -->
  <div class="owl-carousel">
    <div class="owl-item">
      ...
    </div>
    <div class="owl-item">
      ...
    </div>
    <div class="owl-item">
      ...
    </div>
  </div>

Carousel loop configuration

In order to enable carousel loop you should use data-loop data attribute (true/false, by default is set to true) for target item with .owl-carousel class.

For example,

<div class="owl-carousel" data-loop="false">
    ...
  </div>

Carousel autoplay configuration

HTML Website templates Owl Carousel has autoplay disabled by default. In order to enable this feature you should use data-autoplay data attribute with value set to ‘true’.

<div class="owl-carousel" data-autoplay="true">
   ...
 </div>

Carousel items display configuration

Owl carousel allows to display one or couple of items at once. In order to manage carousel items display you should use corresponding data attributes data-items and data-*-items.

• data-items=”N” - shows N carousel items by default (default value = 1).
• data-items=”N” - shows N carousel items, starting from XS screen dimensions.
• data-sm-items=”N” - shows N carousel items, starting from SM screen dimensions.
• data-md-items=”N” - shows N carousel items, starting from MD screen dimensions.
• data-lg-items=”N” - shows N carousel items, starting from LG screen dimensions.
• data-xl-items=”N” - shows N carousel items, starting from xl screen dimensions.
• data-xxl-items=”N” - shows N carousel items, starting from xxl screen dimensions.

For example,

<div class="owl-carousel" data-items="2" data-sm-items="3" data-lg-items="4">
    ...
  </div>

This example shows that by default there will appear 2 carousel items, for xs, sm and md dimensions - 3 items, for lg dimensions - 4 items.

Carousel navigation setup

In order to display “Previous”/”Next” navigation in Owl Carousel you should use corresponding data-nav=”true” data attribute for target carousel.

<div class="owl-carousel" data-dots="true">
    ...
  </div>

In order to define pagination dots display step you should use data-dots-each=”N” data attribute.

<div class="owl-carousel" data-dots="true" data-dots-each="1">
    ...
  </div>

Carousel scene padding configuration

In order to define carousel scene padding you should use data-*-stage-padding=”N” data attribute.

<div class="owl-carousel" data-stage-padding="30">
    ...
  </div>

Carousel items padding configuration

In order to define carousel items padding you should use data-*-margin=”N” data attribute (by default = 30).

<div class="owl-carousel" data-margin="15">
    ...
  </div>

HTML Website Template uses Bootstrap extension for implementing tabs. To add tabs to the target page, use the following marking:

<div class="tabs-custom">
  <ul class="nav nav-custom">
    <li class="nav-item active"><a class="nav-link" href="#tabs-1-1" data-toggle="tab">Tab 1</a></li>
    <li class="nav-item"><a class="nav-link" href="#tabs-1-2" data-toggle="tab">Tab 2<a><li>
    <li class="nav-item"><a class="nav-link" href="#tabs-1-3" data-toggle="tab">Tab 3</a></li>
  <ul>
   
  <div class="tab-content">
    <div id="tabs-1-1" class="tab-pane fade in active">Tab content 1</div>
    <div id="tabs-1-2" class="tab-pane fade">Tab content 2</div>
    <div id="tabs-1-3" class="tab-pane fade">Tab content 3</div>
  </div>
</div>

HTML Website Template uses Bootstrap extension for implementing accodrions. To add аccordions to the target page, use the following marking:

<div class="panel-group panel-group-custom panel-group-corporate" id="accordion1" role="tablist" aria-multiselectable="false">
  <div class="card panel-custom panel-corporate">
    <div class="card-heading" id="accordion1Heading1" role="tab">
      <div class="card-title"><a role="button" data-toggle="collapse" data-parent="#accordion1" href="#accordion1Collapse1" aria-controls="accordion1Collapse1" aria-expanded="true">Accordion title 1
          <div class="card-arrow"></div></a>
      </div>
    </div>
    <div class="card-collapse collapse in" id="accordion1Collapse1" role="tabpanel" aria-labelledby="accordion1Heading1">
      <div class="card-body">
        <p>Accordion content 1</p>
      </div>
    </div>
  </div>

  <div class="card panel-custom panel-corporate">
    <div class="card-heading" id="accordion1Heading2" role="tab">
      <div class="card-title"><a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1" href="#accordion1Collapse2" aria-controls="accordion1Collapse2">Accordion title 2
          <div class="card-arrow"></div></a>
      </div>
    </div>
    <div class="card-collapse collapse" id="accordion1Collapse2" role="tabpanel" aria-labelledby="accordion1Heading2">
      <div class="card-body">
        <p>;Accordion content 2</p>
      </div>
    </div>
  </div>

  <div class="card panel-custom panel-corporate">
    <div class="card-heading" id="accordion1Heading3" role="tab">
      <div class="card-title"><a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1" href="#accordion1Collapse3" aria-controls="accordion1Collapse3">Accordion title 3
          <div class="card-arrow"></div></a>
      </div>
    </div>
    <div class="card-collapse collapse" id="accordion1Collapse3" role="tabpanel" aria-labelledby="accordion1Heading3">
      <div class="card-body">
        <p>;Accordion content 3</p>
      </div>
    </div>
</div>

We use LightGallery plugin in our templates to implement functional mobile-friendly galleries.

This script supports galleries with:

• Thumbnails
• YouTube/Vimeo/HTML5 video
• iframe
• Photo captions
• HTML markup
• Social network sharing
• Custom CSS3 animation

To insert a modal window with a certain image, you need to paste a link with data-lightgallery="item" and href attributes. In the latter, specify a link to the full-size image.

You can also use an alternative variant: add div with data-lightgallery="item" and data-src="path/to/image.jpg" attributes

<a data-lightgallery="item" href="path/to/image.jpg">
  <img class="img-responsive" src="path/to/image.jpg">
</a>

To paste a gallery from multiple images, use data-lightgallery="group" attribute for a parent element of a proper group, which includes separate images.

<div data-lightgallery="group">
  <a data-lightgallery="item" href="path/to/image.jpg">
    <img class="img-responsive" src="path/to/image.jpg">
  </a>
  <a data-lightgallery="item" href="path/to/image.jpg">
    <img class="img-responsive" src="path/to/image.jpg">
  </a>
</div>

Open script.js file and add thumbnail: true setting in the section with lightGallery script initialization.

See more information in the official documentation.

Open script.js file and add mode: "animation name" setting in the section with lightGallery script initialization, for example: lg-zoom-in-out

Types of available transitions

To create a video gallery, insert the video link into its href attribute.

<div data-lightgallery="group">
  <a data-lightgallery="item" href="https://www.youtube.com/watch?v=meBbDqAXago">
    <img class="img-responsive" src="path/to/image.jpg">
  </a>
  <a data-lightgallery="item" href="https://vimeo.com/1084537">
    <img class="img-responsive" src="path/to/image.jpg">
  </a>
</div>

See more information in the official documentation.

Open script.js file and add share: true setting in the section with lightGallery script initialization.

See the detailed instruction on the developers’ website.