"not ready"
Bootstrap 4.0.0 Snippet by mmsphp

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <div id="first-slider" class=""> <div id="carousel-example-generic" class="carousel slide carousel-fade"> <!-- Indicators --> <ol class="carousel-indicators hidden-xs hidden-md"> <li data-target="#carousel-example-generic" data-slide-to="0"> <img src="http://s20.postimg.org/66pjy66dp/image.jpg" /> </li> <li data-target="#carousel-example-generic" data-slide-to="1" class="active"> <img src="http://s20.postimg.org/66pjy66dp/image.jpg" /> </li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <!-- Item 1 --> <div class="item slide" style="background-image: url(http://s20.postimg.org/66pjy66dp/image.jpg); background-repeat: no-repeat"> <div class="row"> <div class="container" > <div class="col-sm-12 col-xs-12 text-left" style=""> <h3 data-animation="animated bounceInDown" class="text-right"> Hi </h3> <h4 data-animation="animated bounceInUp" class="text-right">Salam Alekom</h4> <p data-animation="animated bounceInUp" class="col-md-6 text-center"> <a href="{{$comp['allData']['about'][0]->download_apk}}" target="__blank" class="btn btn-success android"></a> <a href="{{$comp['allData']['about'][0]->download_iph}}" target="__blank" class="btn btn-warning iphone "></a> </p> <h3 data-animation="animated bounceInDown">Welcom </h3> <h4 data-animation="animated bounceInUp">We Are Muslime</h4> <p data-animation="animated bounceInUp" class="text-center"> <a class="btn btn-success androidEN"></a> <a class="btn btn-warning iphoneEN"></a> </p> </div> </div> </div> </div> <div class="item active slide" style="background-image: url({{asset($slide->slide_path)}}); background-repeat: no-repeat"> <div class="row" style="padding: 0px;"> <div class="container" style="padding: 0px;"> <div class="col-md-6 col-sm-12 col-xs-12 text-right" style="position: absolute; right: 0px"> <h3 data-animation="animated bounceInDown"> {{$slide->p1}}</h3> <h4 data-animation="animated bounceInUp">{{$slide->p2}}</h4> <p data-animation="animated bounceInUp" class="col-md-6 text-center"> <a href="{{$comp['allData']['about'][0]->download_apk}}" target="__blank" class="btn btn-success android"></a> <a href="{{$comp['allData']['about'][0]->download_iph}}" target="__blank" class="btn btn-warning iphone "></a> </p> <h3 data-animation="animated bounceInDown"> {{$slide->p1EN}}</h3> <h4 data-animation="animated bounceInUp">{{$slide->p2EN}}</h4> <p data-animation="animated bounceInUp" class="text-center"> <a class="btn btn-success androidEN"></a> <a class="btn btn-warning iphoneEN"></a> </p> </div> </div> </div> </div> </div> <!-- End Wrapper for slides--> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <i class="fa fa-angle-left"></i><span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <i class="fa fa-angle-right"></i><span class="sr-only">Next</span> </a> </div> </div>
#first-slider .main-container { padding: 0; width: 100%; } #first-slider .slide h3, #first-slider .slide h3, #first-slider .slide h3, #first-slider .slide h3{ color: #FFFFFF; padding: 5px; text-align: right; } #first-slider .slide h4,#first-slider .slide h4,#first-slider .slide h4,#first-slider .slide h4{ color: #f3be09; padding: 5px; text-align: right; } #first-slider .slide .text-left ,#first-slider .slide .text-left{ } #first-slider .carousel-indicators { bottom: 0; background: transparent !important; } #first-slider .carousel-control.right, #first-slider .carousel-control.left { background-image: none; } #first-slider .carousel .item { min-height: 425px; height: 100%; width:100%; } .carousel-inner .item .container { display: flex; justify-content: center; align-items: center; position: absolute; bottom: 0; top: 0; left: 0; right: 0; } #first-slider h3{ animation-delay: 1s; } #first-slider h4 { animation-delay: 2s; margin-top: 20px; } #first-slider p { animation-delay: 3s; margin-top: 30px; } #first-slider .carousel-control { width: 6%; text-shadow: none; } #first-slider h1 { text-align: center; margin-bottom: 30px; font-size: 30px; font-weight: bold; } #first-slider .p { padding-top: 125px; text-align: center; } #first-slider .p a { text-decoration: underline; } #first-slider .carousel-indicators li { text-indent: 0; width: 60px; height: 60px; background: transparent !important; } #first-slider .carousel-indicators .active{ text-indent: 0; width: 65px; height: 65px; border: none; background: transparent !important; } #first-slider .carousel-indicators { border: none; background: transparent; } #first-slider .carousel-indicators li { border: none; background: transparent; } /* small images */ #first-slider .carousel-indicators li img{ width: 60px; height: 60px; border: 3px solid #ffffff; background: transparent !important; } #first-slider .carousel-indicators .active img { text-indent: 0; width: 60px; height:60px; background: transparent !important; } .carousel-fade .carousel-inner .item { -webkit-transition-property: opacity; transition-property: opacity; } .carousel-fade .carousel-inner .item, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { opacity: 0; } .carousel-fade .carousel-inner .active, .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; } .carousel-fade .carousel-inner .next, .carousel-fade .carousel-inner .prev, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-control { z-index: 2; } .carousel-control .fa-angle-right, .carousel-control .fa-angle-left { position: absolute; top: 50%; z-index: 5; display: inline-block; } .carousel-control .fa-angle-left{ left: 50%; width: 38px; height: 38px; margin-top: -15px; font-size: 30px; color: #fff; border: 3px solid #ffffff; -webkit-border-radius: 23px; -moz-border-radius: 23px; border-radius: 53px; } .carousel-control .fa-angle-right{ right: 50%; width: 38px; height: 38px; margin-top: -15px; font-size: 30px; color: #fff; border: 3px solid #ffffff; -webkit-border-radius: 23px; -moz-border-radius: 23px; border-radius: 53px; } .carousel-control { opacity: 1; filter: alpha(opacity=100); } /********************************/ /* Slides backgrounds */ /********************************/ #first-slider .slide { background-size: cover; background-repeat: no-repeat; } /********************************/ /* Media Queries */ /********************************/ /*-- Responsive--*/ @media screen and (max-width:1960px) { #first-slider .slide h3, #first-slider .slide h3, #first-slider .slide h3, #first-slider .slide h3 { font-size: 25px; } #first-slider .slide h4,#first-slider .slide h4,#first-slider .slide h4,#first-slider .slide h4{ font-size: 20px; } } @media screen and (max-width:1024px) { #first-slider .slide h3, #first-slider .slide h3, #first-slider .slide h3, #first-slider .slide h3{ font-size: 28px; } #first-slider .slide h4,#first-slider .slide h4,#first-slider .slide h4,#first-slider .slide h4{ font-size: 24px; } } @media screen and (max-width:800px) { #first-slider .slide h3, #first-slider .slide h3, #first-slider .slide h3, #first-slider .slide h3 { font-size: 20px; text-align: center !important; margin-top: -20px; } #first-slider .slide h4,#first-slider .slide h4,#first-slider .slide h4,#first-slider .slide h4{ font-size: 18px; text-align: center !important; } #first-slider .item, .active ,.slide { margin-top: -50px !important; text-align: center !important; padding-top: 50px; } } @media screen and (max-width:600px) { #first-slider h3,h4{ position: absolute !important; text-align: center !important; top: -100% !important; } } @media screen and (max-width:500px) { #first-slider .slide h3, #first-slider .slide h3, #first-slider .slide h3, #first-slider .slide h3{ font-size: 20px; text-align: center; } #first-slider .slide h4,#first-slider .slide h4,#first-slider .slide h4,#first-slider .slide h4{ font-size: 15px; text-align: center; } } @media screen and (max-width:400px) { #first-slider .slide h3, #first-slider .slide h3, #first-slider .slide h3, #first-slider .slide h3{ font-size: 15px; margin-right: 5%; } #first-slider .slide h4,#first-slider .slide h4,#first-slider .slide h4,#first-slider .slide h4{ font-size: 14px; } #first-slider .item { margin-top: -50px !important; padding-top: 50px; } }
//Function to animate slider captions function doAnimations( elems ) { //Cache the animationend event in a variable var animEndEv = 'webkitAnimationEnd animationend'; elems.each(function () { var $this = $(this), $animationType = $this.data('animation'); $this.addClass($animationType).one(animEndEv, function () { $this.removeClass($animationType); }); }); } //Variables on page load var $myCarousel = $('#carousel-example-generic'), $firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']"); //Initialize carousel $myCarousel.carousel(); //Animate captions in first slide on page load doAnimations($firstAnimatingElems); //Pause carousel $myCarousel.carousel('pause'); //Other slides to be animated on carousel slide event $myCarousel.on('slide.bs.carousel', function (e) { var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']"); doAnimations($animatingElems); }); $('#carousel-example-generic').carousel({ interval:3000, pause: "false" }); })(jQuery);

Related: See More


Questions / Comments: