禁用和啟用輪播圖標不適用於第一張和最后一張幻燈片之間的幻燈片-Bootstrap

Question

當幻燈片位於中間時，我嘗試為自舉輪播中的左右圖標添加背景顏色。 當左側沒有幻燈片時，背景會完美添加，反之亦然。 但是，當我們在中間的幻燈片中時，不要同時添加兩個圖標。 我如何下車呢？ 請解釋。

 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

您的邏輯不正確。 您有條件，如果它是第一張幻燈片，請禁用（以視覺方式）上一個箭頭並啟用下一個箭頭。 如果是最后一張幻燈片，請禁用下一個箭頭並啟用上一個箭頭。 但是對於所有其他情況（這是代碼中的else塊），您尚未啟用/禁用箭頭。 這些剩余條件是您希望同時啟用兩個箭頭的條件。

因此，您應該在else塊中同時啟用下一個和上一個箭頭。

 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>