Paradise Slider

Paradise Slider

Full Width Animated Layers 002

Required Files And Folders

Please follow the instructions:

  1. Please upload the paradisefolder 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 -->
  • <linkhref="css/paradise_slider_min.css"rel="stylesheet"media="all">




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

  • <!-- Paradise Slider Main JS File -->
  • <scriptsrc="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 --><divid="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 --><divclass="carousel-inner"role="listbox"><!-- First Slide --><divclass="carousel-item active"><!-- Slide Background --><imgsrc="images/fw_al_002_01.jpg"alt="fw_al_002_01"/><!-- Slide Text Layer --><divclass="fw_al_002_slide"><h1data-animation="animated fadeInRight"><spandata-animation="animated fadeInRight">turpi</span>                    lorem posuere</h1><pdata-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><ahref="#"data-animation="animated fadeInRight">qui nun</a></div></div><!-- End of Slide --><!-- Second Slide --><divclass="carousel-item"><!-- Slide Background --><imgsrc="images/fw_al_002_02.jpg"alt="fw_al_002_02"/><!-- Slide Text Layer --><divclass="fw_al_002_slide fw_al_002_slide_right"><h1data-animation="animated fadeInRight"><spandata-animation="animated fadeInRight">turpi</span>                    lorem posuere</h1><pdata-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><ahref="#"data-animation="animated fadeInRight">qui nun</a></div></div><!-- End of Slide --><!-- Third Slide --><divclass="carousel-item"><!-- Slide Background --><imgsrc="images/fw_al_002_03.jpg"alt="fw_al_002_03"/><!-- Slide Text Layer --><divclass="fw_al_002_slide"><h1data-animation="animated fadeInRight"><spandata-animation="animated fadeInRight">turpi</span>                    lorem posuere</h1><pdata-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><ahref="#"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 Carouselis the foundation of this slider. The main structure of Bootstrap Carouselwhich is used in this template is as following:

<divid="myCarousel"class="carousel slide"data-ride="carousel"data-pause="hover"data-interval="5000"><!-- Wrapper For Slides --><divclass="carousel-inner"role="listbox"><!-- Slide --><divclass="carousel-item"><imgsrc="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-itemas 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_slideas class name for Text Layer
<!-- Slide --><divclass="carousel-item"><!-- Slide Background --><imgsrc="images/fw_al_002_02.jpg"alt="fw_al_002_02"/><!-- Slide Text Layer --><divclass="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><ahref="#">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 activeclass 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_alStands for " Full Width Animated Layers " and 002means " Version 002 "

Theme Created By Enegix.All Rights Reserved.