Bootstrap Snippet new slider type using HTML CSS Bootstrap jQuery

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<section cite="slider">
    <section class="web_disigner">
<div class="web_disigner_contain">
  <center><h1  style=" display:inline;">Featured Web Developer</h1></center>
  <div class="container">
  <div class='row'>
    <div class='col-md-12'>
      <div class="carousel slide media-carousel" id="media">
        <div class="carousel-inner">
          <div class="item  active">
            <div class="row">
              <div class="col-md-4 padtop30">
                <center><div class="parent_circle">
                  <div class="parent_circle_contain">
                  <p>R JOSHI </p>
                  <p>Developer PROFILE</p>
                  <a href="#">Know More...</a>
                </div>
                <div class=" child_round_circle child_round_circle_img1">
                  
                </div>
                </div>
                </center>
              </div>          
              <div class="col-md-4 padtop30">
               <center><div class="parent_circle">
               <div class="parent_circle_contain">
                  <p>ABHISHEK</p>
                  <p>DESIGNER PROFILE</p>
                  <a href="#">Know More...</a>
                </div>
                <div class="child_round_circle child_round_circle_img2  ">
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
@charset "utf-8";
/* CSS Document */
body {
    position: relative;
    overflow-x: hidden;
}
body,
html { height: 100%;}
.nav .open > a, 
.nav .open > a:hover, 
.nav .open > a:focus {background-color: transparent;}
/*-------------------------------*/
/*           Wrappers            */
/*-------------------------------*/
#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#wrapper.toggled {
    padding-left: 220px;
}
#sidebar-wrapper {
    z-index: 1000;
    left: 220px;
    width: 0;
    height: 100%;
    margin-left: -220px;
    overflow-y: auto;
    overflow-x: hidden;
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
 <script>
     $(document).ready(function() {
  $('#media').carousel({
    pause: true,
    interval: false,
  });
});
  </script>
  
  <script>
$(document).ready(function () {
  var trigger = $('.hamburger'),
      overlay = $('.overlay'),
     isClosed = false;
    trigger.click(function () {
      hamburger_cross();      
    });
    function hamburger_cross() {
      if (isClosed == true) {          
        overlay.hide();
        trigger.removeClass('is-open');
        trigger.addClass('is-closed');
        isClosed = false;
      } else {   
        overlay.show();
        trigger.removeClass('is-closed');
        trigger.addClass('is-open');
        isClosed = true;
      }
  }
  
  $('[data-toggle="offcanvas"]').click(function () {
        $('#wrapper').toggleClass('toggled');
  });  
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"new slider type"
Bootstrap 3.3.0 Snippet by Roshankrsoni

Related: See More

Questions / Comments:

"new slider type" Bootstrap 3.3.0 Snippet by Roshankrsoni

Related: See More

Questions / Comments:

"new slider type"
Bootstrap 3.3.0 Snippet by Roshankrsoni