<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Navigation --> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Amin Bootstrap</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li> <a href="#">About</a> </li> <li> <a href="#">Services</a> </li> <li> <a href="#">Contact</a> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container --> </nav> <!-- Full Page Image Background Carousel Header --> <header id="myCarousel" class="carousel slide"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"> <div class="fill" id="item1"></div> </li> <li data-target="#myCarousel" data-slide-to="1"> <div class="fill" id="item2"></div> </li> <li data-target="#myCarousel" data-slide-to="2"> <div class="fill" id="item3"></div> </li> </ol> <!-- Wrapper for Slides --> <div class="carousel-inner"> <div class="item active"> <div class="fill" id="image1"></div> </div> <div class="item"> <div class="fill" id="image2"></div> </div> <div class="item"> <div class="fill" id="image3"></div> </div> </div> </header> <!-- Page Content --> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1>Full Slider by Bootstrap</h1> <p>The rest of the styles for this template are contained within the <code>full-slider.css</code>file.</p> </div> </div> <hr> <!-- Footer --> <footer> <div class="row"> <div class="col-lg-12"> <p>Free © 2017</p> </div> </div><!-- /.row --> </footer> </div><!-- /.container -->

/* * Amin Bootstrap - Full Slider * Copyright 2017 Amin Bootstrap */ html, body { height: 100%; } footer { margin: 50px 0; } ol.carousel-indicators li{ width: 100px; height: 100px; border-color: transparent; } ol.carousel-indicators li.active{ width: 100px; height: 100px; border-color: transparent; background-color: transparent; } ol.carousel-indicators li div{ border-radius: 50%; background: rgba(0,0,0,0.8); } ol.carousel-indicators li.active div{ border-radius: 50%; background: rgba(255,255,255,0.8); } .carousel, .item, .active { height: 100%; } .carousel-inner { height: 100%; } .fill { width: 100%; height: 100%; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } #image1 { background-image:url('http://vira1368.persiangig.com/bootstrap%20template/full-slider/images/slide-1.jpg'); } #image2 { background-image:url('http://vira1368.persiangig.com/bootstrap%20template/full-slider/images/slide-2.jpg'); } #image3 { background-image:url('http://vira1368.persiangig.com/bootstrap%20template/full-slider/images/slide-3.jpg'); } #item1 { background-image:url('http://vira1368.persiangig.com/bootstrap%20template/full-slider/images/hover-pag-1.png'); } #item2 { background-image:url('http://vira1368.persiangig.com/bootstrap%20template/full-slider/images/hover-pag-2.png'); } #item3 { background-image:url('http://vira1368.persiangig.com/bootstrap%20template/full-slider/images/hover-pag-3.png'); }

$('.carousel').carousel({ interval: 3000 //changes the speed })