Disabling & enabling the carousel icons are not working for the slides between first & last slide - Bootstrap

Question

I tried to add background color for left & right icons in my bootstrap carousels when slides are in middle. The background is adding perfectly when there are no slides on the left & vice versa. But, not adding on both the icons when we are in middle slides.As i'm new to this, its struggling. How can i get out off it? Please explain.

 if (window.matchMedia('(max-width: 800px)').matches) { $('.pi-carousel').css({ 'width': '100%' }); $('.company-img').hide(); $('.comny-desc').css({ 'margin-top': '20px' }); $('.bdr-top-btm>p').css({ 'padding-top': '10px', 'padding-bottom': '10px' }); $('.company-btn').parent().addClass('text-center').removeClass('text-right'); $('.company-btn>button').addClass('btn-md').removeClass('btn-lg').css({ 'margin-bottom': '15px' }); $('.company-btn>button:first-child').removeClass('mrgn-right-15'); } /*Changing the carousel's left & right icon's background*/ var checkitem = function() { var $this; $this = $("#myCarousel"); if ($("#myCarousel .carousel-inner .item:first").hasClass("active")) { $this.children(".right").css({ 'background': '#1E6C97' }); $this.children(".left").css({ 'background': '#B8C0C5' }); } else if ($("#myCarousel .carousel-inner .item:last").hasClass("active")) { $this.children(".left").css({ 'background': '#1E6C97' }); $this.children(".right").css({ 'background': '#B8C0C5' }); } else { $this.children(".carousel-control").show(); } }; checkitem(); $("#myCarousel").on("slid.bs.carousel", "", checkitem); /*Changing the carousel's left & right icon's background-ends*/ 

 .success-quotations>h4 { font-size: 1.28em; margin: 0px; font-family: "Montserrat"; color: #505253; line-height: 1.556; text-align: center; border-bottom: 1px solid #D5DBDE; padding: 30px 0px; } .crousel-title>h3 { font-size: 2.42em; margin: 0px; font-family: "Montserrat"; color: #383F42; line-height: 0.824; text-align: center; padding: 32px 0px; } .pi-carousel { background-color: #fff; border: 1px solid #D5DBDE; position: relative; width: 87.76%; margin-left: auto; margin-right: auto; font-family: 'montserrat'; } .pi-carousel .carousel-inner>.item>.row /*, .pi-carousel .carousel-inner > .item > a > img*/ { width: 90%; margin: auto; } .pi-carousel .carousel-inner { min-height: 305px; } .invite-crousel { min-height: 250px; } .invite-suppliers-cmpny { -webkit-box-shadow: 0 0 4px #ccc; -moz-box-shadow: 0 0 4px #ccc; -o-box-shadow: 0 0 4px #ccc; box-shadow: 0 0 4px #ccc; border: 1px solid #ccc; margin-top: 24px; min-height: 200px; padding-left: 0px; padding-right: 0px; display: flex; align-items: center; justify-content: center } .invite-suppliers-btn { margin-top: 10px; margin-bottom: 20px; } .invite-suppliers-btn>button { padding-right: 25px; padding-left: 25px; } .right.carousel-control.right-carousel-control { background: #1E6C97; color: #fff; opacity: 1; width: 5%; } .verification { padding: 10px 0px; } .verification>p img { vertical-align: top; } .verification>p { display: inline-block; padding-right: 80px; margin-bottom: 0px; } .company-img { position: relative; min-height: 305px; width: 206px; border-right: 2px solid #B8C0C5; } .company-img>img { position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); } .lft-carousel-control, .lft-carousel-control:hover { opacity: 1; } .right-carousel-control>i, .lft-carousel-control>i { font-size: 32px; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); } .carousel-control.lft-carousel-control { color: #fff; opacity: 1; width: 5%; } .company-content>h3 { font-family: "Montserrat"; color: #1E6C97; font-size: 1.30em; margin-top: 15px; } .company-content>h3>a:hover { font-weight: 600; } .company-content>p { font-size: 0.85em; } .compny-desc { border-top: 5px solid #D7DDE0; border-bottom: 5px solid #D7DDE0; border-radius: 5px; font-size: 1.07em; padding-top: 10px; padding-bottom: 10px; margin-top: 20px; max-height: 94px; overflow-y: auto; } 

 <script src="https://use.fontawesome.com/aacdcb9275.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="pi-carousel"> <div id="myCarousel" class="carousel slide" data-ride="carousel" data-wrap="false" data-interval="false"> <div class="carousel-inner" role="listbox"> <div class="item active invite-crousel"> <div class="row"> <div class="col-sm-3 pad-lft-0"> <div class="company-img"> <img src="https://cdn.paperindex.com/piimages/dummy/vivek.png" width="180"> </div> </div> <div class="col-sm-9 pad-lft-0"> <div class="company-content"> <h3>XYZ Ltd.</h3> <p class="mrgn-btm-0">Bangalore, Karnataka, India <img src="https://cdn.paperindex.com/piimages/flags/India.jpg" width="17" height="12"></p> <p class="margin-top-20 mrgn-btm-0">Manufacturer, Exporter</p> </div> <div class="compny-desc bdr-top-btm scroll-bar"> <p class="mrgn-btm-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et ante nec lacus pellentesque feugiat non quis nulla. Morbi eget ligula eu justo iaculis pharetra eu pharetra dui.</p> </div> <div class="verification"> <p><img src="https://cdn.paperindex.com/piimages-new/common/verified-icon.png" height="19" width="19"> Phone Verified</p> <p><img src="https://cdn.paperindex.com/piimages-new/common/verified-icon.png" height="19" width="19"> Office Address Verified</p> </div> <div class="text-right"> <div class="company-btn"> <button id="" type="button" class="btn btn-lg btn-pi radius-2">Invite <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button> <!-- <button type="button" class="btn btn-lg btn-pi radius-2">Undo Invite <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button> --> </div> </div> </div> </div> </div> <div class="item invite-crousel"> <div class="row"> <div class="col-sm-3 pad-lft-0"> <div class="company-img"> <img src="https://cdn.paperindex.com/piimages/dummy/vivek.png" width="180"> </div> </div> <div class="col-sm-9 pad-lft-0"> <div class="company-content"> <h3>XYZ Ltd.</h3> <p class="mrgn-btm-0">Bangalore, Karnataka, India <img src="https://cdn.paperindex.com/piimages/flags/India.jpg" width="17" height="12"></p> <p class="margin-top-20 mrgn-btm-0">Manufacturer, Exporter</p> </div> <div class="compny-desc bdr-top-btm scroll-bar"> <p class="mrgn-btm-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et ante nec lacus pellentesque feugiat non quis nulla. Morbi eget ligula eu justo iaculis pharetra eu pharetra dui.</p> </div> <div class="verification"> <p><img src="https://cdn.paperindex.com/piimages-new/common/verified-icon.png" height="19" width="19"> Phone Verified</p> <p><img src="https://cdn.paperindex.com/piimages-new/common/verified-icon.png" height="19" width="19"> Office Address Verified</p> </div> <div class="text-right"> <div class="company-btn"> <button id="" type="button" class="btn btn-lg btn-pi radius-2">Invite <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button> <!-- <button type="button" class="btn btn-lg btn-pi radius-2">Undo Invite <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button> --> </div> </div> </div> </div> </div> <div class="item invite-crousel"> <div class="row"> <div class="col-sm-3 pad-lft-0"> <div class="company-img"> <img src="https://cdn.paperindex.com/piimages/dummy/vivek.png" width="180"> </div> </div> <div class="col-sm-9 pad-lft-0"> <div class="company-content"> <h3>XYZ Ltd.</h3> <p class="mrgn-btm-0">Bangalore, Karnataka, India <img src="https://cdn.paperindex.com/piimages/flags/India.jpg" width="17" height="12"></p> <p class="margin-top-20 mrgn-btm-0">Manufacturer, Exporter</p> </div> <div class="compny-desc bdr-top-btm scroll-bar"> <p class="mrgn-btm-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et ante nec lacus pellentesque feugiat non quis nulla. Morbi eget ligula eu justo iaculis pharetra eu pharetra dui.</p> </div> <div class="verification"> <p><img src="https://cdn.paperindex.com/piimages-new/common/verified-icon.png" height="19" width="19"> Phone Verified</p> <p><img src="https://cdn.paperindex.com/piimages-new/common/verified-icon.png" height="19" width="19"> Office Address Verified</p> </div> <div class="text-right"> <div class="company-btn"> <button id="" type="button" class="btn btn-lg btn-pi radius-2">Invite <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button> <!-- <button type="button" class="btn btn-lg btn-pi radius-2">Undo Invite <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button> --> </div> </div> </div> </div> </div> <div class="item invite-crousel"> <div class="row"> <div class="col-sm-3 pad-lft-0"> <div class="company-img"> <img src="https://cdn.paperindex.com/piimages/dummy/vivek.png" width="180"> </div> </div> <div class="col-sm-9 pad-lft-0"> <div class="company-content"> <h3>XYZ Ltd.</h3> <p class="mrgn-btm-0">Bangalore, Karnataka, India <img src="https://cdn.paperindex.com/piimages/flags/India.jpg" width="17" height="12"></p> <p class="margin-top-20 mrgn-btm-0">Manufacturer, Exporter</p> </div> <div class="compny-desc bdr-top-btm scroll-bar"> <p class="mrgn-btm-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et ante nec lacus pellentesque feugiat non quis nulla. Morbi eget ligula eu justo iaculis pharetra eu pharetra dui.</p> </div> <div class="verification"> <p><img src="https://cdn.paperindex.com/piimages-new/common/verified-icon.png" height="19" width="19"> Phone Verified</p> <p><img src="https://cdn.paperindex.com/piimages-new/common/verified-icon.png" height="19" width="19"> Office Address Verified</p> </div> <div class="text-right"> <div class="company-btn"> <button id="" type="button" class="btn btn-lg btn-pi radius-2">Invite <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button> <!-- <button type="button" class="btn btn-lg btn-pi radius-2">Undo Invite <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button> --> </div> </div> </div> </div> </div> </div> <!-- Left and right controls --> <a class="left carousel-control lft-carousel-control" href="#myCarousel" role="button" data-slide="prev"> <i class="fa fa-chevron-circle-left" aria-hidden="true"></i> <span class="sr-only">Previous</span> </a> <a class="right carousel-control right-carousel-control" href="#myCarousel" role="button" data-slide="next"> <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> <span class="sr-only">Next</span> </a> </div> </div> 

Answer 1

Your logic is incorrect. You have conditions that if it is first slide, disable (visually) previous arrow and enable next arrow. And if it is last slide, disable next arrow and enable previous arrow. But for all other cases (which is the else block in your code) you have not enabled/disabled the arrows. These remaining conditions are the ones where you want both of your arrows to be enabled.

So you should enable both next and previous arrows in your else block.

 if (window.matchMedia('(max-width: 800px)').matches) { $('.pi-carousel').css({ 'width': '100%' }); $('.company-img').hide(); $('.comny-desc').css({ 'margin-top': '20px' }); $('.bdr-top-btm>p').css({ 'padding-top': '10px', 'padding-bottom': '10px' }); $('.company-btn').parent().addClass('text-center').removeClass('text-right'); $('.company-btn>button').addClass('btn-md').removeClass('btn-lg').css({ 'margin-bottom': '15px' }); $('.company-btn>button:first-child').removeClass('mrgn-right-15'); } /*Changing the carousel's left & right icon's background*/ var checkitem = function() { var $this; $this = $("#myCarousel"); if ($("#myCarousel .carousel-inner .item:first").hasClass("active")) { $this.children(".right").css({ 'background': '#1E6C97' }); $this.children(".left").css({ 'background': '#B8C0C5' }); } else if ($("#myCarousel .carousel-inner .item:last").hasClass("active")) { $this.children(".left").css({ 'background': '#1E6C97' }); $this.children(".right").css({ 'background': '#B8C0C5' }); } else { $this.children(".carousel-control").show(); $this.children(".left").css({ 'background': '#1E6C97' }); $this.children(".right").css({ 'background': '#1E6C97' }); } }; checkitem(); $("#myCarousel").on("slid.bs.carousel", "", checkitem); /*Changing the carousel's left & right icon's background-ends*/ 

 .success-quotations>h4 { font-size: 1.28em; margin: 0px; font-family: "Montserrat"; color: #505253; line-height: 1.556; text-align: center; border-bottom: 1px solid #D5DBDE; padding: 30px 0px; } .crousel-title>h3 { font-size: 2.42em; margin: 0px; font-family: "Montserrat"; color: #383F42; line-height: 0.824; text-align: center; padding: 32px 0px; } .pi-carousel { background-color: #fff; border: 1px solid #D5DBDE; position: relative; width: 87.76%; margin-left: auto; margin-right: auto; font-family: 'montserrat'; } .pi-carousel .carousel-inner>.item>.row /*, .pi-carousel .carousel-inner > .item > a > img*/ { width: 90%; margin: auto; } .pi-carousel .carousel-inner { min-height: 305px; } .invite-crousel { min-height: 250px; } .invite-suppliers-cmpny { -webkit-box-shadow: 0 0 4px #ccc; -moz-box-shadow: 0 0 4px #ccc; -o-box-shadow: 0 0 4px #ccc; box-shadow: 0 0 4px #ccc; border: 1px solid #ccc; margin-top: 24px; min-height: 200px; padding-left: 0px; padding-right: 0px; display: flex; align-items: center; justify-content: center } .invite-suppliers-btn { margin-top: 10px; margin-bottom: 20px; } .invite-suppliers-btn>button { padding-right: 25px; padding-left: 25px; } .right.carousel-control.right-carousel-control { background: #1E6C97; color: #fff; opacity: 1; width: 5%; } .verification { padding: 10px 0px; } .verification>p img { vertical-align: top; } .verification>p { display: inline-block; padding-right: 80px; margin-bottom: 0px; } .company-img { position: relative; min-height: 305px; width: 206px; border-right: 2px solid #B8C0C5; } .company-img>img { position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); } .lft-carousel-control, .lft-carousel-control:hover { opacity: 1; } .right-carousel-control>i, .lft-carousel-control>i { font-size: 32px; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); } .carousel-control.lft-carousel-control { color: #fff; opacity: 1; width: 5%; } .company-content>h3 { font-family: "Montserrat"; color: #1E6C97; font-size: 1.30em; margin-top: 15px; } .company-content>h3>a:hover { font-weight: 600; } .company-content>p { font-size: 0.85em; } .compny-desc { border-top: 5px solid #D7DDE0; border-bottom: 5px solid #D7DDE0; border-radius: 5px; font-size: 1.07em; padding-top: 10px; padding-bottom: 10px; margin-top: 20px; max-height: 94px; overflow-y: auto; } 

 <script src="https://use.fontawesome.com/aacdcb9275.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="pi-carousel"> <div id="myCarousel" class="carousel slide" data-ride="carousel" data-wrap="false" data-interval="false"> <div class="carousel-inner" role="listbox"> <div class="item active invite-crousel"> <div class="row"> <div class="col-sm-3 pad-lft-0"> <div class="company-img"> <img src="https://cdn.paperindex.com/piimages/dummy/vivek.png" width="180"> </div> </div> <div class="col-sm-9 pad-lft-0"> <div class="company-content"> <h3>XYZ Ltd.</h3> <p class="mrgn-btm-0">Bangalore, Karnataka, India <img src="https://cdn.paperindex.com/piimages/flags/India.jpg" width="17" height="12"></p> <p class="margin-top-20 mrgn-btm-0">Manufacturer, Exporter</p> </div> <div class="compny-desc bdr-top-btm scroll-bar"> <p class="mrgn-btm-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et ante nec lacus pellentesque feugiat non quis nulla. Morbi eget ligula eu justo iaculis pharetra eu pharetra dui.</p> </div> <div class="verification"> <p><img src="https://cdn.paperindex.com/piimages-new/common/verified-icon.png" height="19" width="19"> Phone Verified</p> <p><img src="https://cdn.paperindex.com/piimages-new/common/verified-icon.png" height="19" width="19"> Office Address Verified</p> </div> <div class="text-right"> <div class="company-btn"> <button id="" type="button" class="btn btn-lg btn-pi radius-2">Invite <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button> <!-- <button type="button" class="btn btn-lg btn-pi radius-2">Undo Invite <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button> --> </div> </div> </div> </div> </div> <div class="item invite-crousel"> <div class="row"> <div class="col-sm-3 pad-lft-0"> <div class="company-img"> <img src="https://cdn.paperindex.com/piimages/dummy/vivek.png" width="180"> </div> </div> <div class="col-sm-9 pad-lft-0"> <div class="company-content"> <h3>XYZ Ltd.</h3> <p class="mrgn-btm-0">Bangalore, Karnataka, India <img src="https://cdn.paperindex.com/piimages/flags/India.jpg" width="17" height="12"></p> <p class="margin-top-20 mrgn-btm-0">Manufacturer, Exporter</p> </div> <div class="compny-desc bdr-top-btm scroll-bar"> <p class="mrgn-btm-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et ante nec lacus pellentesque feugiat non quis nulla. Morbi eget ligula eu justo iaculis pharetra eu pharetra dui.</p> </div> <div class="verification"> <p><img src="https://cdn.paperindex.com/piimages-new/common/verified-icon.png" height="19" width="19"> Phone Verified</p> <p><img src="https://cdn.paperindex.com/piimages-new/common/verified-icon.png" height="19" width="19"> Office Address Verified</p> </div> <div class="text-right"> <div class="company-btn"> <button id="" type="button" class="btn btn-lg btn-pi radius-2">Invite <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button> <!-- <button type="button" class="btn btn-lg btn-pi radius-2">Undo Invite <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button> --> </div> </div> </div> </div> </div> <div class="item invite-crousel"> <div class="row"> <div class="col-sm-3 pad-lft-0"> <div class="company-img"> <img src="https://cdn.paperindex.com/piimages/dummy/vivek.png" width="180"> </div> </div> <div class="col-sm-9 pad-lft-0"> <div class="company-content"> <h3>XYZ Ltd.</h3> <p class="mrgn-btm-0">Bangalore, Karnataka, India <img src="https://cdn.paperindex.com/piimages/flags/India.jpg" width="17" height="12"></p> <p class="margin-top-20 mrgn-btm-0">Manufacturer, Exporter</p> </div> <div class="compny-desc bdr-top-btm scroll-bar"> <p class="mrgn-btm-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et ante nec lacus pellentesque feugiat non quis nulla. Morbi eget ligula eu justo iaculis pharetra eu pharetra dui.</p> </div> <div class="verification"> <p><img src="https://cdn.paperindex.com/piimages-new/common/verified-icon.png" height="19" width="19"> Phone Verified</p> <p><img src="https://cdn.paperindex.com/piimages-new/common/verified-icon.png" height="19" width="19"> Office Address Verified</p> </div> <div class="text-right"> <div class="company-btn"> <button id="" type="button" class="btn btn-lg btn-pi radius-2">Invite <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button> <!-- <button type="button" class="btn btn-lg btn-pi radius-2">Undo Invite <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button> --> </div> </div> </div> </div> </div> <div class="item invite-crousel"> <div class="row"> <div class="col-sm-3 pad-lft-0"> <div class="company-img"> <img src="https://cdn.paperindex.com/piimages/dummy/vivek.png" width="180"> </div> </div> <div class="col-sm-9 pad-lft-0"> <div class="company-content"> <h3>XYZ Ltd.</h3> <p class="mrgn-btm-0">Bangalore, Karnataka, India <img src="https://cdn.paperindex.com/piimages/flags/India.jpg" width="17" height="12"></p> <p class="margin-top-20 mrgn-btm-0">Manufacturer, Exporter</p> </div> <div class="compny-desc bdr-top-btm scroll-bar"> <p class="mrgn-btm-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et ante nec lacus pellentesque feugiat non quis nulla. Morbi eget ligula eu justo iaculis pharetra eu pharetra dui.</p> </div> <div class="verification"> <p><img src="https://cdn.paperindex.com/piimages-new/common/verified-icon.png" height="19" width="19"> Phone Verified</p> <p><img src="https://cdn.paperindex.com/piimages-new/common/verified-icon.png" height="19" width="19"> Office Address Verified</p> </div> <div class="text-right"> <div class="company-btn"> <button id="" type="button" class="btn btn-lg btn-pi radius-2">Invite <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button> <!-- <button type="button" class="btn btn-lg btn-pi radius-2">Undo Invite <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></button> --> </div> </div> </div> </div> </div> </div> <!-- Left and right controls --> <a class="left carousel-control lft-carousel-control" href="#myCarousel" role="button" data-slide="prev"> <i class="fa fa-chevron-circle-left" aria-hidden="true"></i> <span class="sr-only">Previous</span> </a> <a class="right carousel-control right-carousel-control" href="#myCarousel" role="button" data-slide="next"> <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> <span class="sr-only">Next</span> </a> </div> </div>