Add Slider to one of your site's Pages

Export HTML Method

back to menu

1. Open the plugin's the "Global Settings"

2. Set "Enable Markup Export option" to "On" and press "Update" button in the bottom of Settings popup.

3. Press F5 on your keyboard to refresh the browser's page (or just reload the admin page manually).

4. Select the "Export to HTML" option for your slider.

This option will only be visible after performing steps #1-3 above.

Zip has following structure

assets
css
fonts
js
slider.html

In slider html you can find the source code for the slider. You need to copy assets, css, fonts and js folder to your html site corresponding folders. Js and CSS includes can be found in head section of slider.html Slider source can be found in body section of slider.html

PHP Embed Method

back to menu

Open the following file and review its contents:

revslider-standalone/embed_example.php


<!-- update the path to the "embed.php" file here -->
<?php include 'revslider-standalone/embed.php'; ?>
<!DOCTYPE html>
<html>
    <head>
        <title>Example of Revslider embedding</title>
        <?php RevSliderEmbedder::headIncludes(); ?>
    </head>
    <body>
        <!-- change "example" in the code below to match your slider's alias -->
        <?php RevSliderEmbedder::putRevSlider('example'); ?>
    </body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<?php include 'revslider-standalone/embed.php'; ?>

<!DOCTYPE html>

<html>

<head>

<title>Example of Revslider embedding</title>

<?php RevSliderEmbedder::headIncludes(); ?>

</head>

<body>

<?php RevSliderEmbedder::putRevSlider('example'); ?>

</body>

</html>

Code explanation:

1. Import the editor's "Embed" class.


<!-- Include slider embed library -->
<?php include "revslider-standalone/embed.php"; ?>

1

2

3

4

<?php include "revslider-standalone/embed.php"; ?>

2. Load the slider's CSS/JS files.


<!-- Add CSS and JS libraries to html header -->
<?php RevSliderEmbedder::headIncludes(); ?>

<!-- Add false parameter if you want to disable jQuery library that comes with slider Revolution -->
<?php RevSliderEmbedder::headIncludes(false); ?>

1

2

3

4

5

6

7

<?php RevSliderEmbedder::headIncludes(); ?>

<?php RevSliderEmbedder::headIncludes(false); ?>

3. Embed the slider's HTML markup somewhere on the page,
and replaced the "example" part with your slider's "Alias" (see screenshot below).


<!-- change "example" in the code below to match your slider's alias -->
<?php RevSliderEmbedder::putRevSlider("example"); ?>

1

2

3

4

<?php RevSliderEmbedder::putRevSlider("example"); ?>

4. If you need to split CSS / JS check this sample


<?php include 'embed.php'; ?>
<html>
    <head>
        <title>Example of Revslider embedding</title>
        <?php RevSliderEmbedder::cssIncludes(); ?>
    </head>
    <body>
        <?php RevSliderEmbedder::putRevSlider('example'); ?>
        <?php RevSliderEmbedder::jsIncludes(); ?>
    </body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

<?php include 'embed.php'; ?>

<html>

<head>

<title>Example of Revslider embedding</title>

<?php RevSliderEmbedder::cssIncludes(); ?>

</head>

<body>

<?php RevSliderEmbedder::putRevSlider('example'); ?>

<?php RevSliderEmbedder::jsIncludes(); ?>

</body>

</html>

JS Embed Method

back to menu

Open the following file and review its contents:

revslider-standalone/embed_example_js.php


<html>

    <head>

        <title>Example of Revslider embedding with javascript</title>

        <!-- update the path to the "revslider-standalone" folder for your site for the files below -->
        <link rel="stylesheet" type="text/css" media="all" href="revslider-standalone/revslider/public/assets/css/settings.css" />
        <script type="text/javascript" src="revslider-standalone/assets/js/includes/jquery/jquery.js"></script>
        <script type="text/javascript" src="revslider-standalone/revslider/public/assets/js/jquery.themepunch.tools.min.js"></script>
        <script type="text/javascript" src="revslider-standalone/revslider/public/assets/js/jquery.themepunch.revolution.min.js"></script>
        <script type="text/javascript" src="revslider-standalone/assets/js/revslider.js" id="revslider_script"></script>

    </head>

    <body>

        <!-- change "example" in the code below to match your slider's alias -->
        <div class="revslider" data-alias="example"></div>

    </body>

</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<html>

<head>

<title>Example of Revslider embedding with javascript</title>

</head>

<body>

</body>

</html>

Code explanation:

1. The slider's core CSS file


<link rel="stylesheet" type="text/css" media="all" href="revslider-standalone/revslider/public/assets/css/settings.css" />

1

2

3

2. Load a copy of jQuery

Quick Tip:
Only one copy of jQuery ever needs to be loaded on a web page, and it should always be placed above all other scripts on the page.


<script type="text/javascript" src="revslider-standalone/assets/js/includes/jquery/jquery.js"></script>

1

2

3

3. Add the remaining 3 scripts needed for the slider.


<script type="text/javascript" src="revslider-standalone/revslider/public/assets/js/jquery.themepunch.tools.min.js"></script>
<script type="text/javascript" src="revslider-standalone/revslider/public/assets/js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="revslider-standalone/assets/js/revslider.js" id="revslider_script"></script>

1

2

3

4

5

4. Place this div where you want the slider to show up on your page
and replaced the "example" part with your slider's "Alias" (see screenshot below).


<div class="revslider" data-alias="example"></div>

1

2

3

Back

Add Slider to one of your site’s Pages

Contents

Export HTML Method

1. Open the plugin's the "Global Settings"

2. Set "Enable Markup Export option" to "On" and press "Update" button in the bottom of Settings popup.

3. Press F5 on your keyboard to refresh the browser's page (or just reload the admin page manually).

4. Select the "Export to HTML" option for your slider.

PHP Embed Method

Code explanation:

1. Import the editor's "Embed" class.

2. Load the slider's CSS/JS files.

3. Embed the slider's HTML markup somewhere on the page,
and replaced the "example" part with your slider's "Alias" (see screenshot below).

4. If you need to split CSS / JS check this sample

JS Embed Method

Code explanation:

1. The slider's core CSS file

2. Load a copy of jQuery

3. Add the remaining 3 scripts needed for the slider.

4. Place this div where you want the slider to show up on your page
and replaced the "example" part with your slider's "Alias" (see screenshot below).

Add Slider to one of your site’s Pages

Contents

Export HTML Method

1. Open the plugin's the "Global Settings"

2. Set "Enable Markup Export option" to "On" and press "Update" button in the bottom of Settings popup.

3. Press F5 on your keyboard to refresh the browser's page (or just reload the admin page manually).

4. Select the "Export to HTML" option for your slider.

PHP Embed Method

Code explanation:

1. Import the editor's "Embed" class.

2. Load the slider's CSS/JS files.

3. Embed the slider's HTML markup somewhere on the page,and replaced the "example" part with your slider's "Alias" (see screenshot below).

4. If you need to split CSS / JS check this sample

JS Embed Method

Code explanation:

1. The slider's core CSS file

2. Load a copy of jQuery

3. Add the remaining 3 scripts needed for the slider.

4. Place this div where you want the slider to show up on your pageand replaced the "example" part with your slider's "Alias" (see screenshot below).

3. Embed the slider's HTML markup somewhere on the page,
and replaced the "example" part with your slider's "Alias" (see screenshot below).

4. Place this div where you want the slider to show up on your page
and replaced the "example" part with your slider's "Alias" (see screenshot below).