Влево/вправо Стрелки не перемещаются

Question

Я пытаюсь сделать изображение карусели ... Макет был сделан .. Не понял, как его переместить .. Я думаю, что некоторые jquery отсутствуют. Пробовал со многими кодами, но не повезло. . Я не ищу для любой автопрокрутки, я пытаюсь сделать некоторые простые пирушки, когда он щелкает только это движение влево или сторону ..

Вот HTML код:

<div class="slider slider-category"> 
    <div class="slider-clip"> 
     <div class="bx-wrapper" style="max-width: 1248px;"> 
      <div class="bx-viewport" aria-live="polite" style="width: 100%; overflow: hidden; position: relative; height: 317px;"> 
       <ul class="slides" style="width: 24215%; position: relative; transition-duration: 0s; transform: translate3d(-845px, 0px, 0px);"> 

        <li class="slide bx-clone" style="float: left; list-style: none; position: relative; margin-right: 30px; width: 251.667px;" aria-hidden="true"> 
         <div class="slide-image"> 
          <a href="#"><img src="#" data-src="https://eu.frette.com/media/catalog/product/cache/1/image/225x225/9df78eab33525d08d6e5fb8d27136e95/3/F/3FR2954E2400_BE03_02_2_1_44.jpg" width="225" height="225" alt="Bicolore Linen Sheet Set by Frette"></a> 
         </div> 
         <div class="slide-content"> 
          <h4 class="slide-title"><a href="#">Bicolore Linen Sheet Set</a></h4> 
          <p class="slide-price">€1,650 - €1,700</p> 
          <div class="promo_text"></div> 
         </div> 
        </li> 

        <li class="slide bx-clone" style="float: left; list-style: none; position: relative; margin-right: 30px; width: 251.667px;" aria-hidden="true"> 
         <div class="slide-image"> 
          <a href="#"><img src="#" data-src="https://eu.frette.com/media/catalog/product/cache/1/image/225x225/9df78eab33525d08d6e5fb8d27136e95/3/F/3FR5754E2400_B101_02_85.jpg" width="225" height="225" alt="Macram&amp;eacute; Pizzo Sheet Set by Frette"></a> 
         </div> 
         <div class="slide-content"> 
          <h4 class="slide-title"><a href="#">Macramé Pizzo Sheet Set</a></h4> 
          <p class="slide-price">€1,500 - €1,550</p> 
          <div class="promo_text"></div> 
         </div> 
        </li> 

        <li class="slide bx-clone" style="float: left; list-style: none; position: relative; margin-right: 30px; width: 251.667px;" aria-hidden="true"> 
         <div class="slide-image"> 
          <a href="#"><img src="#" data-src="https://eu.frette.com/media/catalog/product/cache/1/image/225x225/9df78eab33525d08d6e5fb8d27136e95/3/F/3FR6165E2400_BN17_02_65.jpg" width="225" height="225" alt="Sirmione Sheet Set by Frette"></a> 
         </div> 
         <div class="slide-content"> 
          <h4 class="slide-title"> 
           <a href="#">Sirmione Sheet Set</a> 
          </h4> 
          <div> 
           <p class="slide-price slide-price-old">€425 - €450</p> 
           <p class="slide-price slide-price-new">€212.50 - €225</p> 
          </div> 
          <div class="promo_text"></div> 
         </div> 
        </li> 
       </ul> 
      </div> 
      <div class="bx-controls bx-has-controls-direction"> 
       <div class="bx-controls-direction"> 
        <a class="bx-prev" href="">Prev</a> 
        <a class="bx-next" href="">Next</a> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Спасибо заранее. .

Answer 1

Я добавил демо ниже с навигацией. Попробуйте с сниппета

и если вы хотите, чтобы удалить текст там prevText:"", nextText:"", изменить код, как таким образом

.cover { 
 
\t position:relative; 
 
} 
 
img { 
 
    width:100%; 
 
} 
 
.cover .bx-next { 
 
\t width:30px; 
 
\t height:30px; 
 
\t background:#000; 
 
\t position:absolute; 
 
\t right:15px; 
 
\t top:45%; 
 
\t z-index:99; 
 
} 
 
.cover .bx-prev { 
 
\t width:30px; 
 
\t height:30px; 
 
\t background:#000; 
 
\t position:absolute; 
 
\t left:15px; 
 
\t top:45%; 
 
\t z-index:99; 
 
}

<div class="cover"> 
 
<ul class="bxslider"> 
 
    <li><img src="http://searchengineland.com/figz/wp-content/seloads/2015/12/google-amp-fast-speed-travel-ss-1920.jpg" title="Funky roots" /></li> 
 
    <li><img src="http://searchengineland.com/figz/wp-content/seloads/2015/12/google-amp-fast-speed-travel-ss-1920.jpg" title="The long and winding road" /></li> 
 
    <li><img src="http://searchengineland.com/figz/wp-content/seloads/2015/12/google-amp-fast-speed-travel-ss-1920.jpg" /></li> 
 
</ul> 
 
</div> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script> 
 
<script> 
 
$('.bxslider').bxSlider({ 
 
    auto: true, 
 
    prevText:"prev", 
 
    nextText:"next", 
 
    pager:false 
 
}); 
 
</script>