Paradise Slider

  • Home
  • Paradise Slider

Paradise Slider

Full Width Animated Layers 002

Required Files And Folders

Please follow the instructions:

  1. 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-4.7.0
    If your Paradise Slider is placed in a different folder, don’t forget to change the file paths in the upcoming examples!

  2. 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:

  • <!-- Paradise Slider Main Style Sheet -->
  • <link href="css/paradise_slider_min.css" rel="stylesheet" media="all">




  • <!-- Touch Swipe JS File Version - 1.6.18 -->
  • <script src="js/jquery.touchSwipe.min.js"></script>

  • <!-- Paradise Slider Main JS File -->
  • <script src="js/paradise_slider_min.js"></script>

HTML Markup

After attaching all of the above files, insert following HTML to the <body> section. This HTML defines your slider content.

<body>

    <!-- Paradise Slider -->
    <div id="fw_al_002" class="carousel slide swipe_x ps_easeInOutSine" data-ride="carousel" data-pause="hover"
    data-interval="5000" data-duration="2500">

        <!-- Wrapper For Slides -->
        <div class="carousel-inner" role="listbox">

            <!-- First Slide -->
            <div class="carousel-item active">

                <!-- Slide Background -->
                <img src="images/fw_al_002_01.jpg" alt="fw_al_002_01" />
				
                <!-- Slide Text Layer -->
                <div class="fw_al_002_slide">
                    <h1 data-animation="animated fadeInRight"><span data-animation="animated fadeInRight">turpi</span> 
                    lorem posuere</h1>
                    <p data-animation="animated fadeInRight">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam 
                    nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet curabitur.</p>
                    <a href="#" data-animation="animated fadeInRight">qui nun</a>
                </div>
            </div>
            <!-- End of Slide -->

            <!-- Second Slide -->
            <div class="carousel-item">

                <!-- Slide Background -->
                <img src="images/fw_al_002_02.jpg" alt="fw_al_002_02" />
				
                <!-- Slide Text Layer -->
                <div class="fw_al_002_slide fw_al_002_slide_right">
                    <h1 data-animation="animated fadeInRight"><span data-animation="animated fadeInRight">turpi</span> 
                    lorem posuere</h1>
                    <p data-animation="animated fadeInRight">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam 
                    nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet curabitur.</p>
                    <a href="#" data-animation="animated fadeInRight">qui nun</a>
                </div>
            </div>
            <!-- End of Slide -->

            <!-- Third Slide -->
            <div class="carousel-item">

                <!-- Slide Background -->
                <img src="images/fw_al_002_03.jpg" alt="fw_al_002_03" />
				
                <!-- Slide Text Layer -->
                <div class="fw_al_002_slide">
                    <h1 data-animation="animated fadeInRight"><span data-animation="animated fadeInRight">turpi</span> 
                    lorem posuere</h1>
                    <p data-animation="animated fadeInRight">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam 
                    nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet curabitur.</p>
                    <a href="#" data-animation="animated fadeInRight">qui nun</a>
                </div>
            </div>
            <!-- End of Slide -->

        </div><!-- End of Wrapper For Slides -->

    </div><!--End Paradise Slider-->

</body>
		

Slider HTML Elements

Bootstrap Carousel is the foundation of this slider. The main structure of Bootstrap Carousel which is used in this template is as following:


    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-pause="hover" data-interval="5000">

        <!-- Wrapper For Slides -->
        <div class="carousel-inner" role="listbox">

            <!-- Slide -->
            <div class="carousel-item">

                <img src="image.jpg" alt="image" />

            </div>

        </div

    </div>
		

We have assigned our own id to the first <div> that is fw_al_002 (FullWidth_AnimatedLayers_002)

Slide Contents

The content for the slide is as following:

  • In bootstrap carousel <div> element which has carousel-item as class name show a single slide.
  • The first <img> element in the slide specifies the slider background image.
  • In this template we have created our own <div> element which has fw_al_002_slide as class name for Text Layer

            <!-- Slide -->
            <div class="carousel-item">

                <!-- Slide Background -->
                <img src="images/fw_al_002_02.jpg" alt="fw_al_002_02" />
				
                <!-- Slide Text Layer -->
                <div class="fw_al_002_slide">
                    <h1><span>turpi</span> lorem posuere</h1>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros.
                    Sed erat. In in velit quis arcu ornare laoreet curabitur.</p>
                    <a href="#">qui nun</a>
                </div>
            </div>
            <!-- End of Slide -->
		

In this template we have used following components for Text Layer

  • <h1>
  • <span>
  • <p>
  • <a>
Note: The active class needs to be added to the first slide. Otherwise, the carousel will not be visible.

Slider Classes

We have used only three of our own classes and one id in this template, that control and change the whole slider.

#fw_al_002 : Describe the Slider's Unique Id.

.swipe_x: This class enables horizontal swipe function

.ps_easeInOutSine : This class enables Transition Timing Function for Slide Effect

.fw_al_002_slide : Enable Styles of Text Layer Portion

.fw_al_002_slide_right: To show right side text

Note: fw_al Stands for " Full Width Animated Layers " and 002 means " Version 002 "
src="js/custom.js">