masquer les boutons dans le curseur en premier/dernière page

Question

J'essaye de faire disparaître un curseur avec le bouton "précédent" quand il est sur la première diapositive et le bouton "suivant" disparaît quand il est sur la dernière diapositive. Le format de fabrication du curseur consiste à utiliser php, forms et jscript.

Voici le code HTML:

<form id="formstyle" target="frame" class="formstyle" method="post" action="saveRecord.php"> 

    <?php 
     while($row = mysqli_fetch_assoc($result)){ 
     $i++;  
    ?> 


<div class="imgdiv" <?php if ($i != 1) echo "style='display: none;'" ?>> 

    <input type="hidden" name="<?php echo "SlideID".$i ?>" value="<?php echo $row['Id'] ?>">  
<input type="hidden" name="noRows" value="<?php echo $rowcount ?>"> 
<input type="hidden" name="i" value="<?php echo $i ?>"> 

    <?php 
     /* for($a=0; $a<$row)*/ 
     $imgURL= "images/".$row['folderName']."/".$row['SlideImage']; 

    ?> 

     <section> 
      <div class="sectionsides"></div> 

      <div id="imagepage"> 
       <img id="imgshow" src="<?php echo $imgURL; ?>"><br> 
      </div> 

      <div class="sectionsides"></div> 
     </section> 
     <div id="navarea"> 

      <button id="upimg" type="button" class="button black display-left" onclick="plusDivs(-1);"> 

       <img class="upbutton" src="images/arrow-5.png" alt="logout" /> 

      </button> 

      <article> 
       <img class="enter" src="images/text.png">Enter description: 
      </article> 

      <button id="downimg" type="button" class="button black display-right" onclick="plusDivs(1);"> 

       <img class="downbutton" src="images/arrow-5.png" alt="logout" /> 


      </button> 

     </div> 


     <?php 

    $textvalue=""; 
    $checkText = "SELECT * FROM user where UserId='".$uid."' AND EventId='".$eid."' AND SpeakerId='".$sid."' AND Speaker_SlideId='".$row['Id']."'"; 
    $sltText = mysqli_query($con,$checkText) or die(mysqli_error()); 
    $textRow=mysqli_fetch_assoc($sltText); 

    if(isset($textRow['Text'])) 
    { 
      $textvalue=$textRow['Text']; 
    } 

     ?> 


     <div id="descarea"> 
      <textarea rows="5" cols="20" name="<?php echo "textonly".$i ?>"><?php echo $textvalue; ?> </textarea> 
     </div> 
     <div id="buttonarea"> 
      <div class="thebuttons"> 
      <input type="submit" id="saveThis" value="Save" class="savin"/> 
      </div> 
      <div class="thebuttons"> 
      <input type="button" onclick="location.href='templateTextImage.php';" value="View All"/> 
      </div> 
     </div> 

    </div> 
    <?php 

     } 

    ?> 

</form> 

Et voici le script:

var imgpost = 0; 
    var count; 

    function plusDivs(obj) 
{ 

     var list = document.getElementsByClassName('imgdiv');   
     console.log(list.length); 

     if (obj == 1) { 
      if (imgpost == list.length - 1) { 
       return; 
      } 
      list[imgpost].style.display = "none"; 
      list[++imgpost].style.display = "inline"; 
      $('.upbutton').hide(); 

     } else { 

      if (imgpost == 0) { 
       return; 
      } 
      list[imgpost].style.display = "none"; 
      list[--imgpost].style.display = "inline"; 
      $('.downbutton').hide(); 
     } 


     //alert ("imgpost="+ imgpost); 
     document.getElementById("demo").innerHTML =imgpost +1; 

     setcookie("TestCookie", 100, time() + (86400 * 30), '/'); // 86400 = 1 day  
     document.cookie = "count=" + imgpost; 
     alert (document.cookie); 
    } 

Sans changement à une autre méthode est-il encore possible de créer l'effet désiré?

Answer 1

Je suggère d'utiliser le plugin jQuery pour le curseur, il fournit toutes les fonctionnalités intégrées que vous avez besoin. vous pouvez cacher ensuite, prev. nav en utilisant cette classe dans la hibou carousal.

.disabled.owl-next{display:none;} 
.disabled.owl-prev{display:none;} 

Celui-ci est mon préféré - https://owlcarousel2.github.io/OwlCarousel2/