<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 ---------->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="css/slick.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css">
</head>
<body>
<section id="balnk">
<h2>Ayush thakur</h2>
<h1>ANIMIATION-SLIDER </h1></section>
<section id="slider-text">
<div class="slider-area">
<div class="first">
<img src="
http://dsconcerts.com/wp-content/uploads/nature-backgrounds-how-to-draw-a-nature-background-in-adobe-illustrator-using-gradient-mesh.jpg
">
<div class="text">
<h1 class="wow bounceInLeft" data-wow-duration="3.6s"> What is Lorem Ipsum?</h1>
<p class=" wow bounceInRight center" data-wow-duration="2.5s" data-wow-delay="0.5s" ">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley</p>
<h4 class="wow wow fadeInUp" data-wow-duration="2.4s">Where does it come from?</h4>
</div>
</div>
<div class="first">
<img src="http://s1.1zoom.net/big3/924/354560-admin.jpg">
<div class="text">
<h1 class="wow bounceInLeft" data-wow-duration="3.6s"> What is Lorem Ipsum?</h1>
<p class=" wow bounceInRight center" data-wow-duration="2.5s" data-wow-delay="0.5s" ">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley</p>
<h4 class="wow wow fadeInUp" data-wow-duration="2.4s">Where does it come from?</h4>
</div>
</div>
<div class="first">
<img src="http://xinature.com/wp-content/uploads/2016/10/lakes-mirrored-trees-lake-beautiful-crystal-mountain-clear-nature-reflections-sky-water-shore-ipad-wallpaper-district.jpg">
<div class="text">
<h1 class="wow bounceInLeft" data-wow-duration="3.6s"> What is Lorem Ipsum?</h1>
<p class=" wow bounceInRight center" data-wow-duration="2.5s" data-wow-delay="0.5s" ">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley</p>
<h4 class="wow wow fadeInUp" data-wow-duration="2.4s">Where does it come from?</h4>
</div>
</div>
</div>
</section>
<body>
<body></body>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script src="js/custome.js"></script>
</html>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');
body{font-family: 'Open Sans', sans-serif;}
#balnk {
text-align: center;
display: block;
margin-bottom: -8px;
background: -moz-linear-gradient(45deg, rgb(255, 255, 0) 0%, rgb(0, 128, 0) 55%, rgb(255, 255, 0) 99%, rgb(255, 255, 0) 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(255,255,0,1)), color-stop(55%, rgba(0,128,0,1)), color-stop(99%, rgba(255,255,0,1)), color-stop(100%, rgba(255,255,0,1)));
background: -webkit-linear-gradient(45deg, rgba(255,255,0,1) 0%, rgba(0,128,0,1) 55%, rgba(255,255,0,1) 99%, rgba(255,255,0,1) 100%);
background: -o-linear-gradient(45deg, rgba(255,255,0,1) 0%, rgba(0,128,0,1) 55%, rgba(255,255,0,1) 99%, rgba(255,255,0,1) 100%);
background: -ms-linear-gradient(45deg, rgba(255,255,0,1) 0%, rgba(0,128,0,1) 55%, rgba(255,255,0,1) 99%, rgba(255,255,0,1) 100%);
background: linear-gradient(45deg, rgb(255, 255, 0) 0%, rgb(0, 128, 0) 55%, rgb(255, 255, 0) 99%, rgb(255, 255, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#FFFF00',GradientType=1 );
}
#balnk h2 {
color: red;
}
#slider-text {
display: block;
overflow: hidden;
width: 100%;
}
#slider-text img {
width: 100%;height: 785px;
position: relative;
}
.text {
position: absolute;
top: 28%;
width: 50%;
left: 0;
right: 0;
margin: auto;
z-index: 999;
overflow: hidden;
display: block;
}
.text h1 {
color: white;
font-size: 43px;
font-weight: 600;
text-transform: uppercase;
}
.text p {
color: white;
margin-top: 5%;
font-size: 19px;
font-weight: 600;
text-transform: capitalize;
}
.text h4 {
color: white;
font-size: 26px;
font-weight: 600;
}
.first::after {
position: absolute;
background: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
color: ;
content: "";
top: 0;
}
.first{position: relative;}
.a-right.control-c.next.slick-next.slick-arrow, .a-left.control-c.prev.slick-prev.slick-arrow {
width: 42px !important;
height: 62px !important;
position: absolute !important;
top: 39%;
right: 21px;
}
.a-left.control-c.prev.slick-prev.slick-arrow {
z-index: 99;
left: 21px;
}
$('.slider-area').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplaySpeed: 5000,
arrows: true,
prevArrow:"<img class='a-left control-c prev slick-prev' src ='images/next.png'>",
nextArrow:"<img class='a-right control-c next slick-next'src='images/pre.png'>",
});
//////Amination///////////////
wow = new WOW(
{
animateClass: 'animated',
offset: 100,
callback: function(box) {
console.log("WOW: animating <" + box.tagName.toLowerCase() + ">")
}
}
);
wow.init();
document.getElementById('moar').onclick = function() {
var section = document.createElement('section');
section.className = 'section--purple wow fadeInDown';
this.parentNode.insertBefore(section, this);
};
