最初のスライドと最後のスライドとの間のスライドでカルーセルアイコンを無効にして有効にしていません - ブートストラップ

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>