> For the complete documentation index, see [llms.txt](https://javascriptuse.gitbook.io/javascript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://javascriptuse.gitbook.io/javascript/how-can-i-add-class-to-the-first-and-last-item-among-the-visible-items-of-owl-carousel-2-ok.md). # How can I add class to the first and last item among the visible items of Owl Carousel 2? (ok) dev.vieclam123.vn Toic ```

Southland Arthritis Branding • UX/UI • Web

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec tortor finibus, blandit leo sed, tincidunt turpis. Morbi iaculis tortor eu sodales aliquam. Integer nibh purus,

View cASE Study

Southland Arthritis Branding • UX/UI • Web

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec tortor finibus, blandit leo sed, tincidunt turpis. Morbi iaculis tortor eu sodales aliquam. Integer nibh purus,

View cASE Study

Southland Arthritis Branding • UX/UI • Web

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec tortor finibus, blandit leo sed, tincidunt turpis. Morbi iaculis tortor eu sodales aliquam. Integer nibh purus,

View cASE Study

Southland Arthritis Branding • UX/UI • Web

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec tortor finibus, blandit leo sed, tincidunt turpis. Morbi iaculis tortor eu sodales aliquam. Integer nibh purus,

View cASE Study

Southland Arthritis Branding • UX/UI • Web

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec tortor finibus, blandit leo sed, tincidunt turpis. Morbi iaculis tortor eu sodales aliquam. Integer nibh purus,

View cASE Study
``` ``` // Code goes here jQuery(document).ready(function($) { var carousel = $(".latest-work-carousel"); carousel.owlCarousel({ loop : true, items : 3, margin:0, nav : true, dots : false, }); checkClasses(); carousel.on('translated.owl.carousel', function(event) { checkClasses(); }); function checkClasses(){ var total = $('.latest-work-carousel .owl-stage .owl-item.active').length; $('.latest-work-carousel .owl-stage .owl-item').removeClass('firstActiveItem lastActiveItem'); $('.latest-work-carousel .owl-stage .owl-item.active').each(function(index){ if (index === 0) { // this is the first one $(this).addClass('firstActiveItem'); } if (index === total - 1 && total>1) { // this is the last one $(this).addClass('lastActiveItem'); } }); } }); ``` ``` /* Styles go here */ .firstActiveItem { background: red; } .lastActiveItem { background: blue; } ```