"App Screen slider"
Bootstrap 4.1.1 Snippet by koshikojha

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
26
27
28
29
30
31
32
33
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<section class="pt-120 pb-115" id='app'>
<div class="app-scrin-inner">
<div class="app-carousel-inner">
<div class="app-carousel owl-carousel">
<div class="single-app-image">
<img src="http://layerdrops.com/jironis/assets/img/feature/app-img.png" data-rjs="2" alt="">
</div>
<div class="single-app-image">
<img src="http://layerdrops.com/jironis/assets/img/feature/app-img2.png" data-rjs="2" alt="">
</div>
<div class="single-app-image">
<img src="http://layerdrops.com/jironis/assets/img/feature/app-img3.png" data-rjs="2" alt="">
</div>
<div class="single-app-image">
<img src="http://layerdrops.com/jironis/assets/img/feature/app-img4.png" data-rjs="2" alt="">
</div>
<div class="single-app-image">
<img src="http://layerdrops.com/jironis/assets/img/feature/app-img5.png" data-rjs="2" alt="">
</div>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.8.1/parsley.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
26
27
28
29
30
31
32
33
34
35
36
37
.pt-120 { padding-top: 120px; }
.pb-115{ padding-bottom: 115px; }
.app-scrin-inner {
position: relative;
overflow: hidden;
max-width: 1500px;
margin: 0 auto;
padding: 0px 20px;
margin-top: -72px;
}
.app-carousel-inner {
position: relative;
width: 450px;
height: 770px;
margin: 0 auto;
padding: 108px 70px;
background: url(http://layerdrops.com/jironis/assets/img/feature/mockup.png);
margin-top: 12px;
}
.app-carousel .owl-stage-outer {
overflow: visible;
}
.app-carousel .single-app-image img {
display: block;
width: 90%;
height: 95%;
margin: 40px auto;
top: 20px;
}
.app-carousel button.owl-dot {
height: 7px;
width: 7px;
background: #ded7f4 !important;
margin-right: 5px;
border-radius: 50%;
-webkit-transition: .3s all linear;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
26
27
28
29
30
31
32
33
34
35
36
37
(function($){$.fn.menumaker=function(options){var cssmenu=$(this),settings=$.extend({title:"Menu",format:"dropdown",sticky:false},options);return this.each(function(){cssmenu.prepend('<div id="menu-button">'+settings.title+'</div>');$(this).find("#menu-button").on('click',function(){$(this).toggleClass('menu-opened');var mainmenu=$(this).next('ul');if(mainmenu.hasClass('open')){mainmenu.slideUp('fast').removeClass('open');}else{mainmenu.slideDown('fast').addClass('open');if(settings.format==="dropdown"){mainmenu.find('ul').slideDown();}}});cssmenu.find('li ul').parent().addClass('has-sub-item');multiTg=function(){cssmenu.find(".has-sub-item").prepend('<span class="submenu-button"></span>');cssmenu.find('.submenu-button').on('click',function(){$(this).toggleClass('submenu-opened');if($(this).siblings('ul').hasClass('open')){$(this).siblings('ul').removeClass('open').slideUp('fast');}else{$(this).siblings('ul').addClass('open').slideDown('fast');}});};if(settings.format==='multitoggle')multiTg();else cssmenu.addClass('dropdown');if(settings.sticky===true)cssmenu.css('position','fixed');resizeFix=function(){if($(window).width()>992){cssmenu.find('ul').show();} if($(window).width()<992){cssmenu.find('ul').hide().removeClass('open');}};resizeFix();return $(window).on('resize',resizeFix);});};})(jQuery);
(function($) {
"use strict";
/* 01: Main menu
==============================================*/
$('.header-menu a[href="#"]').on('click', function(event) {
event.preventDefault();
});
$(".header-menu").menumaker({
title: '<i class="fa fa-bars"></i>',
format: "multitoggle"
});
var mainHeader = $('.main-header');
if($(window).scrollTop() > 100) $('.main-header').addClass('sticky fadeInDown')
$(window).on('scroll', function(e){
if($(this).scrollTop() < 100){
$('.main-header').removeClass('sticky fadeInDown')
}else
$('.main-header').addClass('sticky fadeInDown')
});
/* 02: Background image
==============================================*/
var bgImg = $('[data-bg-img]');
bgImg.css('background', function(){
return 'url(' + $(this).data('bg-img') + ') center center';
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: