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> <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> <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> <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