Bootstrap Snippet swip carousel using HTML CSS 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/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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- http://lazcreative.com/blog/adding-swipe-support-to-bootstrap-carousel-3-0/ -->
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
<div class="content-area">
 <div id="myCarousel" class="carousel slide">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="carousel-item item active">
       <img src="http://placekitten.com/960/600">
     </div>
     <div class="carousel-item item">
       <img src="http://placebear.com/960/600">
   </div>
   <div class="carousel-item item">
       <img src="http://lorempixel.com/960/600">
   </div>
       
      
    </div>
  
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.content-area {
    position: relative;
    width: 960px; 
    margin: 0 auto;
}
.carousel-indicators li { 
border-radius: 50%; 
height: 20px;
width: 20px;
}
.carousel-indicators .active {
height: 25px;
width: 25px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
    $(document).ready(function() {  
         $(".carousel-inner").swiperight(function() {  
              $(this).parent().carousel('prev');  
                });  
           $(".carousel-inner").swipeleft(function() {  
              $(this).parent().carousel('next');  
       });  
    });  
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"swip carousel"
Bootstrap 4.0.0 Snippet by camilogalvez

Related: See More

Questions / Comments:

"swip carousel" Bootstrap 4.0.0 Snippet by camilogalvez

Related: See More

Questions / Comments:

"swip carousel"
Bootstrap 4.0.0 Snippet by camilogalvez