<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>
</div>
<div class="photo">
<div class="box">
<div class="ribbon"><span>POPULAR</span></div>
</div>
<ul class="list-inline stars">
<li class="number"><b>4.0</b></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="far fa-star"></i></li>
</ul>
<a href="#"> <img src="https://unsplash.it/500/300?image=0" class="img-responsive" alt="Course" /> </a>
</div>
<div class="info">
<div class="chapter-details">
<h5>Introduction to Finance, Accounting, Modeling and Valuation</h5>
<p><span class="label label-primary">Best Seller</span> in Accounting | Business</p>
<p class="details">
Learn Finance & Accounting from Scratch by an Award Winning MBA Professor
</p>
<ul class="list-inline da_time">
<li><i class="far fa-play-circle"></i> <span>61 </span> lectures</li>
<li>|</li>
<li><i class="fas fa-user-clock"></i> <span>5 </span> hours</li>
</ul>
</div>
</div>
<hr>
<div class="col-md-12">
<button type="button" class="btn btn-primary pull-right enrollbtn"><i class="fas fa-user-edit"></i> Enroll</button>
</div>
</article>
</div>
</div>
<div class="item">
<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>
</div>
<div class="photo">
<div class="box">
<div class="ribbon"><span>POPULAR</span></div>
</div>
<ul class="list-inline stars">
<li class="number"><b>4.0</b></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="far fa-star"></i></li>
</ul>
<a href="#"> <img src="https://unsplash.it/500/300?image=0" class="img-responsive" alt="Course" /> </a>
</div>
<div class="info">
<div class="chapter-details">
<h5>Introduction to Finance, Accounting, Modeling and Valuation</h5>
<p><span class="label label-primary">Best Seller</span> in Accounting | Business</p>
<p class="details">
Learn Finance & Accounting from Scratch by an Award Winning MBA Professor
</p>
<ul class="list-inline da_time">
<li><i class="far fa-play-circle"></i> <span>61 </span> lectures</li>
<li>|</li>
<li><i class="fas fa-user-clock"></i> <span>5 </span> hours</li>
</ul>
</div>
</div>
<hr>
<div class="col-md-12">
<button type="button" class="btn btn-primary pull-right enrollbtn"><i class="fas fa-user-edit"></i> Enroll</button>
</div>
</article>
</div>
</div>
<div class="item">
<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>
</div>
<div class="photo">
<div class="box">
<div class="ribbon"><span>POPULAR</span></div>
</div>
<ul class="list-inline stars">
<li class="number"><b>4.0</b></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="far fa-star"></i></li>
</ul>
<a href="#"> <img src="https://unsplash.it/500/300?image=0" class="img-responsive" alt="Course" /> </a>
</div>
<div class="info">
<div class="chapter-details">
<h5>Introduction to Finance, Accounting, Modeling and Valuation</h5>
<p><span class="label label-primary">Best Seller</span> in Accounting | Business</p>
<p class="details">
Learn Finance & Accounting from Scratch by an Award Winning MBA Professor
</p>
<ul class="list-inline da_time">
<li><i class="far fa-play-circle"></i> <span>61 </span> lectures</li>
<li>|</li>
<li><i class="fas fa-user-clock"></i> <span>5 </span> hours</li>
</ul>
</div>
</div>
<hr>
<div class="col-md-12">
<button type="button" class="btn btn-primary pull-right enrollbtn"><i class="fas fa-user-edit"></i> Enroll</button>
</div>
</article>
</div>
</div>
<div class="item">
<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>
</div>
<div class="photo">
<div class="box">
<div class="ribbon"><span>POPULAR</span></div>
</div>
<ul class="list-inline stars">
<li class="number"><b>4.0</b></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="far fa-star"></i></li>
</ul>
<a href="#"> <img src="https://unsplash.it/500/300?image=0" class="img-responsive" alt="Course" /> </a>
</div>
<div class="info">
<div class="chapter-details">
<h5>Introduction to Finance, Accounting, Modeling and Valuation</h5>
<p><span class="label label-primary">Best Seller</span> in Accounting | Business</p>
<p class="details">
Learn Finance & Accounting from Scratch by an Award Winning MBA Professor
</p>
<ul class="list-inline da_time">
<li><i class="far fa-play-circle"></i> <span>61 </span> lectures</li>
<li>|</li>
<li><i class="fas fa-user-clock"></i> <span>5 </span> hours</li>
</ul>
</div>
</div>
<hr>
<div class="col-md-12">
<button type="button" class="btn btn-primary pull-right enrollbtn"><i class="fas fa-user-edit"></i> Enroll</button>
</div>
</article>
</div>
</div>
<div class="item">
<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>
</div>
<div class="photo">
<div class="box">
<div class="ribbon"><span>POPULAR</span></div>
</div>
<ul class="list-inline stars">
<li class="number"><b>4.0</b></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="far fa-star"></i></li>
</ul>
<a href="#"> <img src="https://unsplash.it/500/300?image=0" class="img-responsive" alt="Course" /> </a>
</div>
<div class="info">
<div class="chapter-details">
<h5>Introduction to Finance, Accounting, Modeling and Valuation</h5>
<p><span class="label label-primary">Best Seller</span> in Accounting | Business</p>
<p class="details">
Learn Finance & Accounting from Scratch by an Award Winning MBA Professor
</p>
<ul class="list-inline da_time">
<li><i class="far fa-play-circle"></i> <span>61 </span> lectures</li>
<li>|</li>
<li><i class="fas fa-user-clock"></i> <span>5 </span> hours</li>
</ul>
</div>
</div>
<hr>
<div class="col-md-12">
<button type="button" class="btn btn-primary pull-right enrollbtn"><i class="fas fa-user-edit"></i> Enroll</button>
</div>
</article>
</div>
</div>
<div class="item">
<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>
</div>
<div class="photo">
<div class="box">
<div class="ribbon"><span>POPULAR</span></div>
</div>
<ul class="list-inline stars">
<li class="number"><b>4.0</b></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="far fa-star"></i></li>
</ul>
<a href="#"> <img src="https://unsplash.it/500/300?image=0" class="img-responsive" alt="Course" /> </a>
</div>
<div class="info">
<div class="chapter-details">
<h5>Introduction to Finance, Accounting, Modeling and Valuation</h5>
<p><span class="label label-primary">Best Seller</span> in Accounting | Business</p>
<p class="details">
Learn Finance & Accounting from Scratch by an Award Winning MBA Professor
</p>
<ul class="list-inline da_time">
<li><i class="far fa-play-circle"></i> <span>61 </span> lectures</li>
<li>|</li>
<li><i class="fas fa-user-clock"></i> <span>5 </span> hours</li>
</ul>
</div>
</div>
<hr>
<div class="col-md-12">
<button type="button" class="btn btn-primary pull-right enrollbtn"><i class="fas fa-user-edit"></i> Enroll</button>
</div>
</article>
</div>
</div>
<div class="item">
<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>
</div>
<div class="photo">
<div class="box">
<div class="ribbon"><span>POPULAR</span></div>
</div>
<ul class="list-inline stars">
<li class="number"><b>4.0</b></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="far fa-star"></i></li>
</ul>
<a href="#"> <img src="https://unsplash.it/500/300?image=0" class="img-responsive" alt="Course" /> </a>
</div>
<div class="info">
<div class="chapter-details">
<h5>Introduction to Finance, Accounting, Modeling and Valuation</h5>
<p><span class="label label-primary">Best Seller</span> in Accounting | Business</p>
<p class="details">
Learn Finance & Accounting from Scratch by an Award Winning MBA Professor
</p>
<ul class="list-inline da_time">
<li><i class="far fa-play-circle"></i> <span>61 </span> lectures</li>
<li>|</li>
<li><i class="fas fa-user-clock"></i> <span>5 </span> hours</li>
</ul>
</div>
</div>
<hr>
<div class="col-md-12">
<button type="button" class="btn btn-primary pull-right enrollbtn"><i class="fas fa-user-edit"></i> Enroll</button>
</div>
</article>
</div>
</div>
<div class="item">
<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>
</div>
<div class="photo">
<div class="box">
<div class="ribbon"><span>POPULAR</span></div>
</div>
<ul class="list-inline stars">
<li class="number"><b>4.0</b></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="fas fa-star"></i></li>
<li><i class="far fa-star"></i></li>
</ul>
<a href="#"> <img src="https://unsplash.it/500/300?image=0" class="img-responsive" alt="Course" /> </a>
</div>
<div class="info">
<div class="chapter-details">
<h5>Introduction to Finance, Accounting, Modeling and Valuation</h5>
<p><span class="label label-primary">Best Seller</span> in Accounting | Business</p>
<p class="details">
Learn Finance & Accounting from Scratch by an Award Winning MBA Professor
</p>
<ul class="list-inline da_time">
<li><i class="far fa-play-circle"></i> <span>61 </span> lectures</li>
<li>|</li>
<li><i class="fas fa-user-clock"></i> <span>5 </span> hours</li>
</ul>
</div>
</div>
<hr>
<div class="col-md-12">
<button type="button" class="btn btn-primary pull-right enrollbtn"><i class="fas fa-user-edit"></i> Enroll</button>
</div>
</article>
</div>
</div>
</div>
<a class="left carousel-control arrows" href="#courseDatalist" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control arrows" href="#courseDatalist" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
@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;
}
.da_courselist .photo .options {
display:none;
}
.da_courselist .photo img {
margin: 0 auto;
width: 100%;
}
.da_courselist .options .btn-default {
background: rgba(155, 39, 176, 0.58);
color: #fff;
border: none;
border-radius: 30px;
padding: 5px 10px;
}
.da_courselist .options .btn-default:focus{outline: 0px;}
.da_courselist .options-cart {
position:absolute;
left:22px;
top:5px;
z-index: 9;
display:none;
}
.da_courselist:hover .options,
.da_courselist:hover .options-cart {
display:block;
-webkit-animation: fadeIn .5s ease;
-moz-animation: fadeIn .5s ease;
-ms-animation: fadeIn .5s ease;
-o-animation: fadeIn .5s ease;
animation: fadeIn .5s ease;
}
.da_courselist .options-cart-round {
position:absolute;
left:42%;
top:12%;
z-index: 9;
display:none;
}
.da_courselist .options-cart-round button {
border-radius: 50%;
padding:7px 10px;
background: rgba(255, 152, 0, 0.72);
border: none;
color: #fff;
}
.da_courselist .options-cart-round button .fa {
font-size:22px;
}
.da_courselist:hover .options-cart-round {
display:block;
-webkit-animation: fadeInDown .5s ease;
-moz-animation: fadeInDown .5s ease;
-ms-animation: fadeInDown .5s ease;
-o-animation: fadeInDown .5s ease;
animation: fadeInDown .5s ease;
}
.da_courselist .info {
padding: 5px 10px;
}
.da_courselist .chapter-details {
width: 100%;
}
.da_courselist .chapter-details h1 {
font-size: 14px;
line-height: 20px;
margin: 0;
float:left;
}
.da_courselist .chapter-details .details {
font-size:12px;
}
.chapter-details h5 {
margin: 5px 0px;
font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
height: 36px;
white-space: normal;
font-weight: 600;
}
ul.da_time {
margin-bottom: 0px;
text-align: center;
color: #a5a4a3;
font-weight: normal;
}
.da_courselist hr {
margin: 10px 0px;
border-color: #dedede;
}
.enrollbtn {
background: #9C27B0;
border-color: inherit;
border-radius: 30px;
margin-bottom: 10px;
padding: 6px 20px;
transition: all 0.4s ease-in-out;
}
.enrollbtn:hover{background-color: #f90;border-color: inherit;}
/* ribon */
.box {
position: relative;
border: 1px solid #BBB;
background: #EEE;
}
.ribbon {
position: absolute;
left: -5px; top: -5px;
z-index: 1;
overflow: hidden;
width: 75px; height: 75px;
text-align: right;
}
.ribbon span {
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#9BC90D 0%, #79A70A 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px; left: -21px;
}
.ribbon span::before {
content: "";
position: absolute; left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #79A70A;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #79A70A;
}
.ribbon span::after {
content: "";
position: absolute; right: 0px; top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #79A70A;
border-bottom: 3px solid transparent;
border-top: 3px solid #79A70A;
}
/* course slider */
a.right.carousel-control.arrows, a.left.carousel-control.arrows {
width: auto;opacity: 1;
}
a.left.carousel-control.arrows {
left: -7px;
}
a.right.carousel-control.arrows {
right: -7px;
}
.carousel-control.arrows .glyphicon-chevron-right, .carousel-control.arrows .glyphicon-chevron-left {
border: 1px solid #efefef;
border-radius: 30px;
width: 40px;
height: 40px;
font-size: 16px;
line-height: 35px;
background: #f9f9f9;
color: #9c27b0;
text-shadow: none;
box-shadow: 0px 1px 11px #dedede;
}
.carousel-showmanymoveone .carousel-control {
background-image: none;
}
.carousel-showmanymoveone .cloneditem-1,
.carousel-showmanymoveone .cloneditem-2,
.carousel-showmanymoveone .cloneditem-3 {
display: none;
}
@media all and (min-width: 768px) {
.carousel-showmanymoveone .carousel-inner > .active.left,
.carousel-showmanymoveone .carousel-inner > .prev {
left: -50%;
}
.carousel-showmanymoveone .carousel-inner > .active.right,
.carousel-showmanymoveone .carousel-inner > .next {
left: 50%;
}
.carousel-showmanymoveone .carousel-inner > .left,
.carousel-showmanymoveone .carousel-inner > .prev.right,
.carousel-showmanymoveone .carousel-inner > .active {
left: 0;
}
.carousel-showmanymoveone .carousel-inner .cloneditem-1 {
display: block;
}
}
@media all and (min-width: 768px) and (transform-3d), all and (min-width: 768px) and (-webkit-transform-3d) {
.carousel-showmanymoveone .carousel-inner > .item.active.right,
.carousel-showmanymoveone .carousel-inner > .item.next {
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0);
left: 0;
}
.carousel-showmanymoveone .carousel-inner > .item.active.left,
.carousel-showmanymoveone .carousel-inner > .item.prev {
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
left: 0;
}
.carousel-showmanymoveone .carousel-inner > .item.left,
.carousel-showmanymoveone .carousel-inner > .item.prev.right,
.carousel-showmanymoveone .carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
}
@media all and (min-width: 992px) {
.carousel-showmanymoveone .carousel-inner > .active.left,
.carousel-showmanymoveone .carousel-inner > .prev {
left: -25%;
}
.carousel-showmanymoveone .carousel-inner > .active.right,
.carousel-showmanymoveone .carousel-inner > .next {
left: 25%;
}
.carousel-showmanymoveone .carousel-inner > .left,
.carousel-showmanymoveone .carousel-inner > .prev.right,
.carousel-showmanymoveone .carousel-inner > .active {
left: 0;
}
.carousel-showmanymoveone .carousel-inner .cloneditem-2,
.carousel-showmanymoveone .carousel-inner .cloneditem-3 {
display: block;
}
}
@media all and (min-width: 992px) and (transform-3d), all and (min-width: 992px) and (-webkit-transform-3d) {
.carousel-showmanymoveone .carousel-inner > .item.active.right,
.carousel-showmanymoveone .carousel-inner > .item.next {
-webkit-transform: translate3d(25%, 0, 0);
transform: translate3d(25%, 0, 0);
left: 0;
}
.carousel-showmanymoveone .carousel-inner > .item.active.left,
.carousel-showmanymoveone .carousel-inner > .item.prev {
-webkit-transform: translate3d(-25%, 0, 0);
transform: translate3d(-25%, 0, 0);
left: 0;
}
.carousel-showmanymoveone .carousel-inner > .item.left,
.carousel-showmanymoveone .carousel-inner > .item.prev.right,
.carousel-showmanymoveone .carousel-inner > .item.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
left: 0;
}
}
$(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();
}
};
checkitem();
$("#courseDatalist").on("slid.bs.carousel", "", checkitem);
