如何使用jquery禁用或隐藏轮播下一个/上一个图标

Posted 2023-01-21

我使用bootstrap4轮播，我在表内使用轮播。我只是使用轮播下一个/上一个图标创建表分页。现在，当我们在轮播的第一页中并且仅显示下一个图标时，我很难创建隐藏上一个图标，然后当我们转到第二页时，上一个图标要显示。

同样，当我们转到上一页时，下一个图标也要隐藏并仅显示上一个图标。

[任何新方法或建议，请告诉我。。

这是我尝试过的代码。

$(document).ready(function() 
  $("#myCarousel").carousel(
    interval: false
  );
);

pageSize = 3
incremSlide = 4
startPage = 0;
numberPage = 0;

var pageCount = $(".line-content").length / pageSize;
var totalSlidepPage = Math.floor(pageCount / incremSlide);

for (var i = 0; i < pageCount; i++) 
  $("#pagin").append('<li><a href="#">' + (i + 1) + '</a></li> ');
  if (i > pageSize) 
    $("#pagin li").eq(i).hide();
  


var prev = $("<li/>").addClass("<").html(">").click(function() 
  startPage -= 3
  incremSlide -= 3
  slide();
);

prev.hide();

var next = $("<li/>").addClass("<").html(">").click(function() 
  startPage += 3;
  incremSlide += 3;
  slide();
);

$("#pagin").prepend(prev).append(next);

$("#pagin li").first().find("a").addClass("current");

slide = function(sens) 
  $("#pagin li").hide();

  for (t = startPage; t < incremSlide; t++) 
    $("#pagin li").eq(t + 1).show();
  
  if (startPage == 0) 
    next.show();
    prev.hide();
   else if (numberPage == totalSlidepPage) 
    next.hide();
    prev.show();
   else 
    next.show();
    prev.show();
  


showPage = function(page) 
  $(".line-content").hide();
  $(".line-content").each(function(n) 
    if (n >= pageSize * (page - 1) && n < pageSize * page)
      $(this).show();
  );


showPage(1);
$("#pagin li a").eq(0).addClass("current");

$("#pagin li a").click(function() 
  $("#pagin li a").removeClass("current");
  $(this).addClass("current");
  showPage(parseInt($(this).text()));
);
$('.carousel-control-prev').click(function(e) 
  var currentPage = parseInt($("#pagin li a.current").text());
  var prevPage = currentPage - 1;
  if (prevPage < pageSize) 
    showPage(prevPage);
    var currentObj = $("#pagin li a.current");
    $("#pagin li a.current").parent().prev().find('a').addClass('current');
    currentObj[0].className = "";

   else 
    e.preventDefault();
  
);
$('.carousel-control-next').click(function(e) 
  var currentPage = parseInt($("#pagin li a.current").text());
  var nextPage = currentPage + 1;
  if (nextPage < pageSize) 
    showPage(nextPage);
    $("#pagin li a.current").parent().next().find('a').addClass('current');
    var currentObj = $("#pagin li a.current");
    currentObj[0].className = "";
   else 
    e.preventDefault();
  
);

// tried another way

function carouselPage() 
  var checkitem = function() 
    var $this;
    $this = $("#myCarousel");
    if ($("#myCarousel .carousel-inner .item:first").hasClass("active")) 
      $this.children(".left").hide();
      $this.children(".right").show();
     else if ($("#myCarousel .carousel-inner .item:last").hasClass("active")) 
      $this.children(".right").hide();
      $this.children(".left").show();
     else 
      $this.children(".carousel-control").show();
    
  ;

  checkitem();

  $("#myCarousel").on("slid.bs.carousel", "", checkitem);
;

#preModal .viewing 
  -webkit-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  transform: translate(0, -50%);
  top: 50%;
  margin: 0 auto;


input[type=checkbox] 
  /* left: 23px; */
  width: 15px;


.carousel-control-prev 
  height: fit-content;
  width: fit-content;
  top: 40%;
  left: 10px;


.carousel-control-next 
  right: 10px;
  height: fit-content;
  width: fit-content;
  top: 40%;


.contd 
  /* width: 160%;
            right: 30%; */
  width: 132%;
  right: 16%;


.predefineModal 
  padding-bottom: 0px;
  padding-top: 0px;


.current,
.carousel_li,
.carousel_a 
  display: none;



/* .contd:hover .carousel-control-next-icon 
        display: block;
    
    
    .contd:hover .carousel-control-prev-icon 
        display: block;
     */

.second 
  position: relative;
  right: 6%;


.modal-footer 
  max-width: 86%;


.indexBtn 
  color: #fff;
  background-color: #680f79;
  border-color: #680f79;
  box-shadow: none;
  display: inline-block;
  font-weight: 400;
  border: 1px solid transparent;
  padding: 3px .75rem;
  font-size: 1rem;
  border-radius: .25rem;


.indexBtn:hover 
  background-color: #c178cf;


.diss 
  color: #5f5e5e;
  background-color: #cecece;
  border-color: #cecece;


.btn 
  padding: 3px .75rem !important;


.periodTime 
  padding: 15px;
  padding-bottom: 0px;


.carousel 
  /* background: #2f4357; */
  margin-top: 20px;


.carousel-control-prev-icon 
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23680f79' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
  position: relative;
  right: 37px;


.carousel-control-next-icon 
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23680f79' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
  position: relative;
  left: 37px;


ul#pagin 
  display: none;



/* .carousel-control-next,
    .carousel-control-prev 
        filter: invert(100%);
     */


/* .carousel-control-prev-icon,
    .carousel-control-next-icon 
        position: relative;
        right: 2%;
        height: fit-content;
        width: fit-content;
        outline: black;
        background-size: 100%, 100%;
        border-radius: 50%;
        border: 1px solid black;
        background-image: none;
    
    
    .carousel-control-next-icon:after 
        content: '>';
        font-size: 35px;
        color: #680f79;
        font-weight: 800;
    
    
    .carousel-control-prev-icon:after 
        content: '<';
        font-size: 35px;
        color: #680f79;
        font-weight: 800;
     */

.carousel-item 
  min-height: 180px;
  filter: blur(.0px) !important;
  /* transform: translateZ(0) !important; */
  backface-visibility: hidden !important;
  /* Prevent carousel from being distorted if for some reason image doesn't load */


.bs-example 
  margin: 20px;
  margin-bottom: 0px;
  margin-top: 0px;


.carousel-indicators li 
  background-color: #9C27B0 !important;


.ui-widget.ui-widget-content 
  right: 0px !important;
  width: 100%;
  padding: 17px;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>



<div class="modal-body predefineModal">
  <div class="bs-example">
    <div id="myCarousel" class="carousel slide">
      <!-- Wrapper for carousel items -->
      <div class="carousel-inner">
        <div class="carousel-item active">
          <div class="table-responsive">
            <table class="table table-bordered">
              <thead class="party_head">
                <tr>
                  <th>#</th>
                  <th>S.No</th>
                  <th>Trans.Type</th>
                  <th>Voucher Date</th>
                  <th>To A/c Name</th>
                  <th>Narration</th>
                  <th>Debit</th>
                  <th>Credit</th>
                </tr>
              </thead>
              <tbody>
                <tr class="line-content">
                  <td><input id="indeterminate-checkbox" type="checkbox" /></td>
                  <td>1</td>
                  <td>CP</td>
                  <td>DD-MM-YYYY</td>
                  <td>JOE</td>
                  <td>Narration</td>
                  <td>Debit</td>
                  <td>Credit</td>
                </tr>
                <tr class="line-content">
                  <td>
                    <input type="checkbox" id="indeterminate-checkbox" />
                  </td>
                  <td>2</td>
                  <td>BP</td>
                  <td>DD-MM-YYYY</td>
                  <td>PLUMZ</td>
                  <td>Narration</td>
                  <td>Debit</td>
                  <td>Credit</td>
                </tr>
                <tr class="line-content">
                  <td><input id="indeterminate-checkbox" type="checkbox" /></td>
                  <td>3</td>
                  <td>CR</td>
                  <td>DD-MM-YYYY</td>
                  <td>text</td>
                  <td>Narration</td>
                  <td>Debit</td>
                  <td>Credit</td>
                </tr>
                <tr class="line-content">
                  <td><input id="indeterminate-checkbox" type="checkbox" /></td>
                  <td>4</td>
                  <td>CR</td>
                  <td>DD-MM-YYYY</td>
                  <td>text</td>
                  <td>Narration</td>
                  <td>Debit</td>
                  <td>Credit</td>
                </tr>
                <tr class="line-content">
                  <td><input type="checkbox" id="indeterminate-checkbox" /></td>
                  <td>5</td>
                  <td>CR</td>
                  <td>DD-MM-YYYY</td>
                  <td>text</td>
                  <td>Narration</td>
                  <td>Debit</td>
                  <td>Credit</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

    </div>
    <!-- Carousel controls -->
    <ul id="pagin"></ul>
    <a class="left carousel-control-prev" href="#" role="button" data-slide="prev" onload="carouselPage()">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <!-- <span class="sr-only">Previous</span> -->
    </a>
    <a class="right carousel-control-next" href="#" role="button" data-slide="next" onload="carouselPage()">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <!-- <span class="sr-only">Next</span> -->
    </a>
  </div>
</div>

小提琴：tried code fiddle

答案

blyat只需在js代码中添加它，它将起作用

    $(document).ready(function() 
  $("#myCarousel").carousel(
    interval: false
  nav:false,
  dots:false,

  );
);

另一答案

仅隐藏特定元素。首先使用display none属性隐藏上一个按钮，然后单击下一个按钮，更改上一个按钮的显示属性以阻止并隐藏下一个按钮。

$('.carousel-control-prev').click(function(e) 

  var nxt = document.getElementsByClassName("carousel-control-next")[0];
  nxt.style.display="block";  

  var currentPage = parseInt($("#pagin li a.current").text());
  var prevPage = currentPage - 1;      
  if (prevPage < pageSize) 
    showPage(prevPage);
    var currentObj = $("#pagin li a.current");
    $("#pagin li a.current").parent().prev().find('a').addClass('current');
    currentObj[0].className = "";   
   else 
    e.preventDefault();


  var prv = document.getElementsByClassName("carousel-control-prev")[0];
  prv.style.display="none";


);
$('.carousel-control-next').click(function(e) 

  var prv = document.getElementsByClassName("carousel-control-prev")[0];
  prv.style.display="block";


  var currentPage = parseInt($("#pagin li a.current").text());
  var nextPage = currentPage + 1;
  if (nextPage < pageSize) 
    showPage(nextPage);
    $("#pagin li a.current").parent().next().find('a').addClass('current');
    var currentObj = $("#pagin li a.current");
    currentObj[0].className = "";
   else 
    e.preventDefault();
  


  var nxt = document.getElementsByClassName("carousel-control-next")[0];
  nxt.style.display="none";
);

查看我的答案：jsfiddle link

$(document).ready(function() 
  $("#myCarousel").carousel(
    interval: false
  );
);

pageSize = 3
incremSlide = 4
startPage = 0;
numberPage = 0;

var pageCount = $(".line-content").length / pageSize;
var totalSlidepPage = Math.floor(pageCount / incremSlide);

for (var i = 0; i < pageCount; i++) 
  $("#pagin").append('<li><a href="#">' + (i + 1) + '</a></li> ');
  if (i > pageSize) 
    $("#pagin li").eq(i).hide();
  


var prev = $("<li/>").addClass("<").html(">").click(function() 
  startPage -= 3
  incremSlide -= 3
  slide();
);

prev.hide();

var next = $("<li/>").addClass("<").html(">").click(function() 
  startPage += 3;
  incremSlide += 3;
  slide();
);

$("#pagin").prepend(prev).append(next);

$("#pagin li").first().find("a").addClass("current");

slide = function(sens) 
  $("#pagin li").hide();

  for (t = startPage; t < incremSlide; t++) 
    $("#pagin li").eq(t + 1).show();
  
  if (startPage == 0) 
    next.show();
    prev.hide();
   else if (numberPage == totalSlidepPage) 
    next.hide();
    prev.show();
   else 
    next.show();
    prev.show();
  


showPage = function(page) 
  $(".line-content").hide();
  $(".line-content").each(function(n) 
    if (n >= pageSize * (page - 1) && n < pageSize * page)
      $(this).show();
  );


showPage(1);
$("#pagin li a").eq(0).addClass("current");

$("#pagin li a").click(function() 
  $("#pagin li a").removeClass("current");
  $(this).addClass("current");
  showPage(parseInt($(this).text()));
);
$('.carousel-control-prev').click(function(e) 

  var nxt = document.getElementsByClassName("carousel-control-next")[0];
  nxt.style.display="block";
  var currentPage = parseInt($("#pagin li a.current").text());
  var prevPage = currentPage - 1;
  
  if (prevPage < pageSize) 
    showPage(prevPage);
    var currentObj = $("#pagin li a.current");
    $("#pagin li a.current").parent().prev().find('a').addClass('current');
    currentObj[0].className = "";

   else 
    e.preventDefault();
  
  
  var prv = document.getElementsByClassName("carousel-control-prev")[0];
  prv.style.display="none";
);
$('.carousel-control-next').click(function(e) 
  var prv = document.getElementsByClassName("carousel-control-prev")[0];
  prv.style.display="block";
  var currentPage = parseInt($("#pagin li a.current").text());
  var nextPage = currentPage + 1;
  if (nextPage < pageSize) 
    showPage(nextPage);
    $("#pagin li a.current").parent().next().find('a').addClass('current');
    var currentObj = $("#pagin li a.current");
    currentObj[0].className = "";
   else 
    e.preventDefault();
  
  
  var nxt = document.getElementsByClassName("carousel-control-next")[0];
  nxt.style.display="none";
);

// tried another way

function carouselPage() 
  var checkitem = function() 
    var $this;
    $this = $("#myCarousel");
    if ($("#myCarousel .carousel-inner .item:first").hasClass("active")) 
      $this.children(".left").hide();
      $this.children(".right").show();
     else if ($("#myCarousel .carousel-inner .item:last").hasClass("active")) 
      $this.children(".right").hide();
      $this.children(".left").show();
     else 
      $this.children(".carousel-control").show();
    
  ;

  checkitem();

  $("#myCarousel").on("slid.bs.carousel", "", checkitem);
;

    #preModal .viewing 
      -webkit-transform: translate(0, -50%);
      -o-transform: translate(0, -50%);
      transform: translate(0, -50%);
      top: 50%;
      margin: 0 auto;
    

    input[type=checkbox] 
      /* left: 23px; */
      width: 15px;
    

    .carousel-control-prev 
      height: fit-content;
      width: fit-content;
      top: 40%;
      left: 10px;
    

    .carousel-control-next 
      right: 10px;
      height: fit-content;
      width: fit-content;
      top: 40%;
    

    .contd 
      /* width: 160%;
            right: 30%; */
      width: 132%;
      right: 16%;
    

    .predefineModal 
      padding-bottom: 0px;
      padding-top: 0px;
    

    .current,
    .carousel_li,
    .carousel_a 
      display: none;
    

    /* .contd:hover .carousel-control-next-icon 
        display: block;
    
    
    .contd:hover .carousel-control-prev-icon 
        display: block;
     */

    .second 
      position: relative;
      right: 6%;
    

    .modal-footer 
      max-width: 86%;
    

    .indexBtn 
      color: #fff;
      background-color: #680f79;
      border-color: #680f79;
      box-shadow: none;
      display: inline-block;
      font-weight: 400;
      border: 1px solid transparent;
      padding: 3px .75rem;
      font-size: 1rem;
      border-radius: .25rem;
    

    .indexBtn:hover 
      background-color: #c178cf;
    

    .diss 
      color: #5f5e5e;
      background-color: #cecece;
      border-color: #cecece;
    

    .btn 
      padding: 3px .75rem !important;
    

    .periodTime 
      padding: 15px;
      padding-bottom: 0px;
    

    .carousel 
      /* background: #2f4357; */
      margin-top: 20px;
    

    .carousel-control-prev-icon 
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23680f79' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
      position: relative;
      right: 37px;
    

    .carousel-control-next-icon 
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23680f79' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
      position: relative;
      left: 37px;
    

    ul#pagin 
      display: none;
    

    /* .carousel-control-next,
    .carousel-control-prev 
        filter: invert(100%);
     */
    /* .carousel-control-prev-icon,
    .carousel-control-next-icon 
        position: relative;
        right: 2%;
        height: fit-content;
        width: fit-content;
        outline: blac
以上是关于如何使用jquery禁用或隐藏轮播下一个/上一个图标的主要内容，如果未能解决你的问题，请参考以下文章
 
 jquery图片轮播思路
 jQuery 或 PHP - 如果启用/禁用另一个 DIV，则显示/隐藏 DIV 或 LI
 jquery简单无缝轮播图实现
 卡片轮播按钮正在触发其他轮播卡片按钮
 如何在引导轮播下使缩略图可滚动？
 如何使用markerwithlabel隐藏或禁用谷歌地图上的默认标记