Quick Use
01 - Get Started
Required Files And Folders
Please follow the instructions:
- Please upload the
paradise
folder to your server. In this folder you will find the following sub folders containing all of the slides content:
- js
- css
- fonts
- images
- font-awesome
If your Paradise Slider is placed in a different folder, don’t forget to change the file paths in the upcoming examples!
- This step is very important, because product functionality depends on these files, so please first of all attach these files carefully. CSS in
<head>
section and JavaScript in <body>
section:
- <!-- Font Awesome -->
-
<link href="paradise/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
- <!-- Bootstrap Style Sheet -->
-
<link href="paradise/css/bootstrap.css" rel="stylesheet" media="all">
- <!-- Animation (Use Only Those Layouts Where Text Or Images Animating) -->
-
<link href="paradise/css/animate.css" rel="stylesheet" media="all">
- <!-- Paradise Slider Main Style Sheet -->
-
<link href="paradise/css/min/paradise_slider_min.css" rel="stylesheet" media="all">
- <!-- jQuery -->
-
<script src="paradise/js/jquery.js"></script>
- <!-- Bootstrap JS -->
-
<script src="paradise/js/bootstrap.js"></script>
- <!-- Touch Swipe -->
-
<script src="paradise/js/touchSwipe.js"></script>
- <!-- Parallax (Use Only Those Layouts Where Parallax Effect Is Using) -->
-
<script src="paradise/js/parallax.js"></script>
- <!-- Paradise Slider Main JS File -->
-
<script src="paradise/js/paradise_slider_min.js"></script>
Or by using CDN
You can load Bootstrap and jQuery files with a single line of code from their official online sources. You don't even have to download or install anything!
- <!-- Bootstrap Style Sheet -->
-
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
- <!-- jQuery -->
-
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
- <!-- Bootstrap JS -->
-
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
mega vs single
You can use Paradise Slider CSS in two ways:
- You can use only one Compressed or UnCompressed CSS file for all
Paradise Slider layouts
. You can find these files in the sub folder min
in main css folder.
- As well as concern to other method, you can use a single CSS file for a single
Paradise Slider layout
. You can find all of these files in the main CSS folder. For example team_087.css
file for all Team Version 087 Layouts.
HTML Markup
After attaching all of the above files you will be able to attach HTML. We have prepared 302 HTML Markup Files. You can find these files in main Paradise Slider
folder
.
Now Please Follow the Instructions to use HTML Markup:
1. Open HTML file that you want to use in a code editor such as Notepad++
2. Copy all HTML code of <body>
Section
From: <!-- Paradise Slider -->
To: <!-- End Paradise Slider -->
3. Paste this code in your own Project file
FAQ
How To Stop auto slide cycling ?
You can stop the cycling by using data-interval="false"
How To increase or decrease the time duration between slides ?
You can get the required result by increasing or decreasing value of data-interval="5000"
.The value of data attribute is in in milliseconds. The default value of this attribute is 5000.
How To increase or decrease the time duration of sliding ?
You can get the required result by increasing or decreasing value of data-duration="2000"
.The value of data attribute is in in milliseconds. The default value of this attribute is 500.
How To change transition timing function of sliding ?
You can change it by using a class after main .carousel
class. You can find complete function list here
09 - Support
Please do not hesitate if you have any queries about this product. We are always there for your help. You can contact us on this e-mail address szthemes1@gmail.com