Responsive Full screen slider using Bootstrap | 2my4edge

09 January 2015

Responsive Full screen slider using Bootstrap

We have already discussed some features about bootstrap. Like wise, this is responsive carousel style full screen slider using bootstrap, here we are going to see responsive slider for all kind of web browser support by using bootstrap. lets see the coding.

Full screen responsive slider

DOWNLOAD                     LIVE DEMO

We already know that bootstrap need bootstrap files with jquery. so lets add that in head tag.

JQUERY and BOOTSTRAP
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

HTML CODE
data-interval="3500" is for speed of the slider, you can change it.
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="3500" id="bs-carousel">
  <!-- Overlay -->
  <div class="overlay"></div>

  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
    <li data-target="#bs-carousel" data-slide-to="1"></li>
    <li data-target="#bs-carousel" data-slide-to="2"></li>
    <li data-target="#bs-carousel" data-slide-to="3"></li>
  </ol>
  
  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item slides active">
      <div class="slide-1"></div>
      <div class="hero">
        <hgroup>
            <h1>Slide 1</h1>
        </hgroup>
        <button class="btn btn-hero btn-lg" role="button">Responsive full screen slider</button>
      </div>
    </div>
    <div class="item slides">
      <div class="slide-2"></div>
      <div class="hero">        
        <hgroup>
            <h1>Slide 2</h1>
        </hgroup>       
        <button class="btn btn-hero btn-lg" role="button">See more tutorials</button>
      </div>
    </div>
    <div class="item slides">
      <div class="slide-3"></div>
      <div class="hero">        
        <hgroup>
            <h1>Slide 3</h1>
        </hgroup>
        <button class="btn btn-hero btn-lg" role="button">See more demos</button>
      </div>
    </div>
    <div class="item slides">
      <div class="slide-4"></div>
      <div class="hero">        
        <hgroup>
            <h1>Slide 4</h1>
        </hgroup>
        <button class="btn btn-hero btn-lg" role="button">www.2my4edge.com</button>
      </div>
    </div>
  </div> 

</div>

FOR NAVIGATION ARROW
<a class="left carousel-control" href="#bs-carousel" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left"></span>
</a>
 
<a class="right carousel-control" href="#bs-carousel" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right"></span>
</a>

CSS
<style type="text/css">

/********************************/
/*   Fade Bootstrap-carousel    */
/********************************/
.fade-carousel {
    position: relative;
    height: 100vh;
}
.fade-carousel .carousel-inner .item {
    height: 100vh;
}
.fade-carousel .carousel-indicators > li {
    margin: 0 2px;
    background-color: #FF0000;
    border-color: #FF0000;
    opacity: .7;
}
.fade-carousel .carousel-indicators > li.active {
  width: 10px;
  height: 10px;
  opacity: 1;
}

/********************************/
/*          Hero Headers        */
/********************************/
.hero {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(0,0,0,.75);
      -webkit-transform: translate3d(-50%,-50%,0);
         -moz-transform: translate3d(-50%,-50%,0);
          -ms-transform: translate3d(-50%,-50%,0);
           -o-transform: translate3d(-50%,-50%,0);
              transform: translate3d(-50%,-50%,0);
}
.hero h1 {
    font-size: 6em;    
    font-weight: bold;
    margin: 0;
    padding: 0;
    color: #fff;
}

.fade-carousel .carousel-inner .item .hero {
    opacity: 0;
    -webkit-transition: 2s all ease-in-out .1s;
       -moz-transition: 2s all ease-in-out .1s; 
        -ms-transition: 2s all ease-in-out .1s; 
         -o-transition: 2s all ease-in-out .1s; 
            transition: 2s all ease-in-out .1s; 
}
.fade-carousel .carousel-inner .item.active .hero {
    opacity: 1;
    -webkit-transition: 2s all ease-in-out .1s;
       -moz-transition: 2s all ease-in-out .1s; 
        -ms-transition: 2s all ease-in-out .1s; 
         -o-transition: 2s all ease-in-out .1s; 
            transition: 2s all ease-in-out .1s;    
}

/********************************/
/*            Overlay           */
/********************************/
.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: #080d15;
    opacity: .1;
    display: none;
}

/********************************/
/*          Custom Buttons      */
/********************************/
.btn.btn-lg {padding: 10px 40px;}
.btn.btn-hero,
.btn.btn-hero:hover,
.btn.btn-hero:focus {
    color: #f5f5f5;
    background-color: #1abc9c;
    border-color: #1abc9c;
    outline: none;
    margin: 20px auto;
}

/********************************/
/*       Slides backgrounds     */
/********************************/
.fade-carousel .slides .slide-1, 
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3,
.fade-carousel .slides .slide-4 {
  height: 100vh;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.fade-carousel .slides .slide-1 {
  background-image: url(img/1.jpg); 
}
.fade-carousel .slides .slide-2 {
  background-image: url(img/2.jpg);
}
.fade-carousel .slides .slide-3 {
  background-image: url(img/3.jpg);
}
.fade-carousel .slides .slide-4 {
  background-image: url(img/4.jpg);
}

/********************************/
/*          Media Queries       */
/********************************/
@media screen and (min-width: 980px){
    .hero { width: 980px; }    
}
@media screen and (max-width: 640px){
    .hero h1 { font-size: 4em; }    
}

</style>
in css 100vh in height is for viewport height. that is supports the responsive browser sliders. we have already discussed about some sliders

RELATED POSTS:

3 comments:

  1. Currently it looks like Movable Type is the top blogging platform
    availablke right now. (from what I've read) Is that what you are using on your blog?

    ReplyDelete
  2. I am actually glad to read this blog posts which consists of plenty of valuable facts,
    thanks for providing these information.

    ReplyDelete
  3. This is very interesting, You're a very skilled blogger.
    I've joineed your feed and look forward too seeking more
    of your fantastic post. Also, I've shared your site in my socil networks!

    ReplyDelete

^