"courselist"
Bootstrap 3.3.0 Snippet by ravindra93

<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);

Related: See More


Questions / Comments: