Revolution Slider Download code...

For Revolution Slider



For supporting file is use in online link below :-


<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>



For css or js download  file link below :-

<script src="js/revolution.min.js"></script>


Html


    <!--Main Slider-->
    <section class="main-slider" data-start-height="800" data-slide-overlay="yes">
   
        <div class="tp-banner-container">
            <div class="tp-banner">
                <ul>
                    <li data-transition="fade" data-slotamount="1" data-masterspeed="1000" data-thumb="images/image-2.jpg"  data-saveperformance="off"  data-title="Awesome Title Here">
                    <img src="images/image-2.jpg"  alt=""  data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat"> 
                    
                    <div class="tp-caption sfl sfb tp-resizeme"
                    data-x="left" data-hoffset="15"
                    data-y="center" data-voffset="-70"
                    data-speed="1500"
                    data-start="0"
                    data-easing="easeOutExpo"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.3"
                    data-endspeed="1200"
                    data-endeasing="Power4.easeIn"><h3>Best for you</h3></div>
                    
                    <div class="tp-caption sfl sfb tp-resizeme"
                    data-x="left" data-hoffset="15"
                    data-y="center" data-voffset="-20"
                    data-speed="1500"
                    data-start="500"
                    data-easing="easeOutExpo"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.3"
                    data-endspeed="1200"
                    data-endeasing="Power4.easeIn"><h2>Drive Safe & Get License</h2></div>
                    
                    <div class="tp-caption sfl sfb tp-resizeme"
                    data-x="left" data-hoffset="15"
                    data-y="center" data-voffset="40"
                    data-speed="1500"
                    data-start="1000"
                    data-easing="easeOutExpo"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.3"
                    data-endspeed="1200"
                    data-endeasing="Power4.easeIn"><div class="normal-text">Lorem ipsum dolLorem ipsum dolor sit amet, consectetur adipiscing elit. <br> Sed ultrices ipsum nonltrices ipsum non</div></div>
                    
                    <div class="tp-caption sfl sfb tp-resizeme"
                    data-x="left" data-hoffset="15"
                    data-y="center" data-voffset="110"
                    data-speed="1500"
                    data-start="1500"
                    data-easing="easeOutExpo"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.3"
                    data-endspeed="1200"
                    data-endeasing="Power4.easeIn"><a href="services.html" class="theme-btn btn-style-one">Read More</a> &nbsp; &nbsp; <a href="#" class="theme-btn btn-style-two">see Pricing</a></div>
                 </li>
                    
                    <li data-transition="fade" data-slotamount="1" data-masterspeed="1000" data-thumb="images/image-3.jpg"  data-saveperformance="off"  data-title="Awesome Title Here">
                    <img src="images/image-3.jpg"  alt=""  data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">    
                    <div class="tp-caption sft sfb tp-resizeme"
                    data-x="center" data-hoffset="0"
                    data-y="center" data-voffset="-70"
                    data-speed="1500"
                    data-start="0"
                    data-easing="easeOutExpo"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.3"
                    data-endspeed="1200"
                    data-endeasing="Power4.easeIn"><h3>Best for you</h3></div>
                    
                    <div class="tp-caption sft sfb tp-resizeme"
                    data-x="center" data-hoffset="0"
                    data-y="center" data-voffset="-20"
                    data-speed="1500"
                    data-start="500"
                    data-easing="easeOutExpo"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.3"
                    data-endspeed="1200"
                    data-endeasing="Power4.easeIn"><h2>make a sucessful drive with us!</h2></div>
                    
                    <div class="tp-caption sfb sfb tp-resizeme"
                    data-x="center" data-hoffset="0"
                    data-y="center" data-voffset="40"
                    data-speed="1500"
                    data-start="1000"
                    data-easing="easeOutExpo"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.3"
                    data-endspeed="1200"
                    data-endeasing="Power4.easeIn"><div class="normal-text text-center">Lorem ipsum dolLorem ipsum dolor sit amet, consectetur adipiscing elit <br> dolLorem ipsum dolor sit amet, consectetur adipiscin.</div></div>
                    
                    <div class="tp-caption sfb sfb tp-resizeme"
                    data-x="center" data-hoffset="0"
                    data-y="center" data-voffset="110"
                    data-speed="1500"
                    data-start="1500"
                    data-easing="easeOutExpo"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.3"
                    data-endspeed="1200"
                    data-endeasing="Power4.easeIn"><a href="services.html" class="theme-btn btn-style-one">Read More</a> &nbsp; &nbsp; <a href="#" class="theme-btn btn-style-two">see Pricing</a></div>
                    
                    </li>
                    
                    <li data-transition="fade" data-slotamount="1" data-masterspeed="1000" data-thumb="images/image-1.jpg"  data-saveperformance="off"  data-title="Awesome Title Here">
                    <img src="images/image-1.jpg"  alt=""  data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat"> 
                    
                    <div class="tp-caption sfl sfb tp-resizeme"
                    data-x="left" data-hoffset="15"
                    data-y="center" data-voffset="-80"
                    data-speed="1500"
                    data-start="0"
                    data-easing="easeOutExpo"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.3"
                    data-endspeed="1200"
                    data-endeasing="Power4.easeIn"><h4>welcome to our driving school</h4></div>
                    
                    <div class="tp-caption sfl sfb tp-resizeme"
                    data-x="left" data-hoffset="15"
                    data-y="center" data-voffset="-10"
                    data-speed="1500"
                    data-start="500"
                    data-easing="easeOutExpo"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.3"
                    data-endspeed="1200"
                    data-endeasing="Power4.easeIn"><h2>WE ARE FOCUSED ON YOUR <br> SUCCESS</h2></div>
                    
                    <div class="tp-caption sfl sfb tp-resizeme"
                    data-x="left" data-hoffset="15"
                    data-y="center" data-voffset="70"
                    data-speed="1500"
                    data-start="1000"
                    data-easing="easeOutExpo"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.3"
                    data-endspeed="1200"
                    data-endeasing="Power4.easeIn"><div class="normal-text">Lorem ipsum dolLorem ipsum dolor sit amet, consectetur adipiscing elit. <br> Sed ultrices ipsum nonltrices ipsum non</div></div>
                    
                    <div class="tp-caption sfl sfb tp-resizeme"
                    data-x="left" data-hoffset="15"
                    data-y="center" data-voffset="140"
                    data-speed="1500"
                    data-start="1500"
                    data-easing="easeOutExpo"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.3"
                    data-endspeed="1200"
                    data-endeasing="Power4.easeIn"><a href="services.html" class="theme-btn btn-style-one">Read More</a> &nbsp; &nbsp; <a href="#" class="theme-btn btn-style-two">see Pricing</a></div>
                    </li>
                 </ul>
              <div class="tp-bannertimer"></div>
            </div>
        </div>
     </section>
  <!--End Main Slider-->





CSS



/*Btn Style One*/

.btn-style-one{
position:relative;
padding:9px 36px;
line-height:24px;
color:#ffffff;
font-size:14px;
font-weight:700;
border-radius:50px;
background:#005dbe;
border:2px solid #005dbe;
text-transform:uppercase;
font-family: 'Ubuntu', sans-serif;
}

.btn-style-one:hover{
color:#005dbe;
background:none;
border-color:#005dbe;
}

/*Btn Style Two*/

.btn-style-two{
position:relative;
padding:9px 36px;
line-height:24px;
color:#005dbe;
font-size:14px;
font-weight:700;
border-radius:50px;
background:#ffffff;
border:2px solid #ffffff;
text-transform:uppercase;
font-family: 'Ubuntu', sans-serif;
}

.btn-style-two:hover{
background:#005dbe;
color:#ffffff;
border-color:#005dbe;
}



/*slider code start*/

.main-slider .overlay-layer{
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
display:block;
background-color:rgba(0,0,0,0.55);
}

.main-slider .tp-caption{
z-index:5 !important;
}

.main-slider .tp-dottedoverlay{
background-color:rgba(0,0,0,0.35) !important;
}

.main-slider h2{
font-size:36px;
color:#ffffff;
font-weight:700;
line-height:1.2em;
text-transform:uppercase;
}

.main-slider h3{
font-size:30px;
color:#ffffff;
font-weight:500;
line-height:1.2em;
text-transform:uppercase;
}

.main-slider .normal-text{
font-weight:400;
line-height:1.8em;
color:#ffffff;
font-size:15px;
font-family: 'Ubuntu', sans-serif;
}

.main-slider h4{
font-weight:500;
line-height:1.4em;
color:#ffffff;
font-size:16px;
letter-spacing:1px;
text-transform:uppercase;
}

.main-slider .btn-style-one{
color:#ffffff !important;
}

.main-slider .btn-style-one:hover{
color:#005dbe !important;
}

.main-slider .btn-style-two{
color: #005dbe !important;
}

.main-slider .btn-style-two:hover{
color: #ffffff !important;
}

.main-slider .tparrows.preview3,
.main-slider .tparrows.preview3{
background:none !important;
width:50px !important;
overflow:hidden;
margin-top:-10px !important;
height:55px !important;
}

.main-slider .tparrows.preview3::after{
top:0px;
color:#777777;
font-size:16px;
height:55px !important;
line-height:55px;
width:35px !important;
padding:0px;
background-color:rgba(255,255,255,0.4);
border-radius:50px;
-moz-transition:all 300ms ease;
-webkit-transition:all 300ms ease;
-ms-transition:all 300ms ease;
-o-transition:all 300ms ease;
transition:all 300ms ease;
}

.main-slider .tparrows.tp-leftarrow.preview3::after{
content: "\f104";
font-family: 'FontAwesome';
}

.main-slider .tparrows.tp-rightarrow.preview3::after{
content: "\f105";
font-family: 'FontAwesome';
}

.main-slider .tparrows.preview3.tp-leftarrow{
left:30px !important;
}

.main-slider .tparrows.preview3.tp-rightarrow{
right:20px !important;
}

.main-slider .tparrows.preview3:hover::after{
color:#777777;
background:#ffffff;
}

.main-slider .tparrows.preview3 .tp-arr-iwrapper{
visibility:hidden;
opacity:0;
display:none;
}

.main-slider .tp-bannertimer,
.main-slider .tp-bullets{
display:none !important;
}









Js

<script type="text/javascript">

(function($) {
//Revolution Slider
if($('.main-slider .tp-banner').length){
var MainSlider = $('.main-slider');
var strtHeight = MainSlider.attr('data-start-height');
var slideOverlay =  "'"+ MainSlider.attr('data-slide-overlay') +"'";
$('.main-slider .tp-banner').show().revolution({
 dottedOverlay: slideOverlay,
 delay:5000,
 startwidth:1200,
 startheight:strtHeight,
 hideThumbs:600,

 thumbWidth:80,
 thumbHeight:50,
 thumbAmount:5,

 navigationType:"bullet",
 navigationArrows:"0",
 navigationStyle:"preview3",

 touchenabled:"on",
 onHoverStop:"off",

 swipe_velocity: 0.7,
 swipe_min_touches: 1,
 swipe_max_touches: 1,
 drag_block_vertical: false,

 parallax:"mouse",
 parallaxBgFreeze:"on",
 parallaxLevels:[7,4,3,2,5,4,3,2,1,0],

 keyboardNavigation:"off",

 navigationHAlign:"center",
 navigationVAlign:"bottom",
 navigationHOffset:0,
 navigationVOffset:50,

 soloArrowLeftHalign:"left",
 soloArrowLeftValign:"bottom",
 soloArrowLeftHOffset:20,
 soloArrowLeftVOffset:0,

 soloArrowRightHalign:"right",
 soloArrowRightValign:"center",
 soloArrowRightHOffset:20,
 soloArrowRightVOffset:0,

 shadow:0,
 fullWidth:"on",
 fullScreen:"off",

 spinner:"spinner4",

 stopLoop:"off",
 stopAfterLoops:-1,
 stopAtSlide:-1,

 shuffle:"off",

 autoHeight:"off",
 forceFullWidth:"on",

 hideThumbsOnMobile:"on",
 hideNavDelayOnMobile:1500,
 hideBulletsOnMobile:"on",
 hideArrowsOnMobile:"on",
 hideThumbsUnderResolution:0,

 hideSliderAtLimit:0,
 hideCaptionAtLimit:0,
 hideAllCaptionAtLilmit:0,
 startWithSlide:0,
 videoJsPath:"",
 fullScreenOffsetContainer: ""
 });
}

})(window.jQuery);

</script>




No comments:

Post a Comment