"courselist"
Bootstrap 3.3.0 Snippet by ravindra93

Post to Facebook Tweet this

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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
<section class="da_tabs">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="tab_sec">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home">Home</a></li>
<li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
<li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="carousel carousel-showmanymoveone slide" id="courseDatalist">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-6 col-sm-4 col-md-3">
<article class="da_courselist">
<div class="options">
<button class="btn btn-default" type="submit" data-toggle="tooltip" data-placement="bottom" title="Add to wish list">
<i class="far fa-heart"></i>
</button>
<button class="btn btn-default" type="submit" data-toggle="tooltip" data-placement="bottom" title="Share">
<i class="fas fa-share-alt"></i>
</button>
</div>
<div class="options-cart-round">
<button class="btn btn-default" title="Add to cart" data-toggle="tooltip" data-placement="left">
<span class="fas fa-cart-plus"></span>
</button>
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
@import url(https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css);
.da_courselist {
position: relative;
border: 1px solid #E1E1E1;
background: #FFF;
margin:10px 0px;
overflow: hidden;
}
.da_courselist .options {
position:absolute;
top:5px;
right:10px;
z-index: 9;
}
.da_courselist .photo {
overflow: hidden;
position: relative;
width: 100%;
height: 150px;
}
.stars {
position: absolute;
bottom: 0px;
color: #fff;
margin: 5px;
background: #0e0c0c80;
padding: 5px;
border-radius: 3px;
}
.stars li i.fas {
color: #FFEB3B;
}
.stars li {
padding: 0px;
font-size: 12px;
}
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
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
(function(){
$('.carousel-showmanymoveone .item').each(function(){
var itemToClone = $(this);
for (var i=0;i<3;i++) {
itemToClone = itemToClone.next();
// wrap around if at end of item collection
if (!itemToClone.length) {
itemToClone = $(this).siblings(':first');
}
// grab item, clone, add marker class, add to collection
itemToClone.children(':first-child').clone()
.addClass("cloneditem-"+(i))
.appendTo($(this));
}
});
}());
$("#courseDatalist").carousel({
interval: false,
wrap: false
});
var checkitem = function() {
var $this;
$this = $("#courseDatalist");
if ($("#courseDatalist .carousel-inner .item:first").hasClass("active")) {
$this.children(".left").hide();
$this.children(".right").show();
} else if ($("#courseDatalist .carousel-inner .item:last").hasClass("active")) {
$this.children(".right").hide();
$this.children(".left").show();
} else {
$this.children(".carousel-control").show();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Now UI Kit PRO

Questions / Comments: