Блог

Я использую скользкую карусель this, и мои стрелки «next» и «previous» отображаются над и под моей текстовой каруселью, а не с каждой стороны. Как это исправить. Как исправить эти стрелки. Я использую гладкую карусель и fontawsome. Вот мой HTML

  <div class="nav-wrapper">
            <div class="nav-slider">
                <i class="fa fa-angle-left prev"></i>
          <i class="fa fa-angle-right next"></i>
                <div class="navItem-wrapper">
                    <div class="navItem-car"><a href="#">General Microbiology</a></div>
                    <div class="navItem-car"><a href="#">Biochemistry</a></div>
                    <div class="navItem-car"><a href="#">Biotechnology</a></div>
                    <div class="navItem-car"><a href="#">Bacteriology</a></div>
                    <div class="navItem-car"><a href="#">Cell Biology</a></div>
                    <div class="navItem-car"><a href="#">Difference</a></div>
                    <div class="navItem-car"><a href="#">Phycology</a></div>
                    <div class="navItem-car"><a href="#">Virology</a></div>
                    <div class="navItem-car"><a href="#">Disease</a></div>
                    <div class="navItem-car"><a href="#">Food Microbiology</a></div>
                    <div class="navItem-car"><a href="#">Epidemiology</a></div>
                    <div class="navItem-car"><a href="#">Antimicrobial Drugs</a></div>
                    <div class="navItem-car"><a href="#">Genetics</a></div>
                    <div class="navItem-car"><a href="#">Molecular Biology</a></div>
                    <div class="navItem-car"><a href="#">Mycology</a></div>
                    <div class="navItem-car"><a href="#">Bioinformatics</a></div>
                    <div class="navItem-car"><a href="#">Immunology</a></div>
                    <div class="navItem-car"><a href="#">Environmental Microbiology</a></div>
                    <div class="navItem-car"><a href="#">Medical Microbiology</a></div>
                    <div class="navItem-car"><a href="#">IPR</a></div>
                    <div class="navItem-car"><a href="#">Microscope</a></div>
                    <div class="navItem-car"><a href="#">Parasitology</a></div>
                    <div class="navItem-car"><a href="#">Microbiologists</a></div>
                    <div class="navItem-car"><a href="#">Biosafety</a></div>
                    <div class="navItem-car"><a href="#">Biochemical Test</a></div>
                    <div class="navItem-car"><a href="#">Staining</a></div>
                    <div class="navItem-car"><a href="#">Protocols</a></div>
                    <div class="navItem-car"><a href="#">Instruments</a></div>
    
                </div>
            </div>
        </div>
    
  

и вот CSS (который, я уверен, здесь не играет роли):

  .navItem-wrapper{
        width: 60%;
        margin: 0px auto;
        overflow: hidden;
    }
    .navItem-wrapper .navItem-car{
        display: inline-block;
        margin-right: 15px;
    }
    .nav-slider .next{
        position: absolute;
        top: 1%;
        right: 14%;
        cursor: pointer;
        font-size: 20px;
    }
    .nav-slider .prev{
        position: absolute;
        top: 1%;
        left: 14%;
        cursor: pointer;
        font-size: 20px;
    }
    ul.slick-dots {
        display: none;
    }
    ul.slick-dots {
        display: none;
        visibility: hidden;
    }
    .navItem-wrapper{
        height: 20px;
    }
  

вот JS: $ (документ).готово (функция () {

 <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script type="text/javascript">
    $(function(){
      $('.navItem-wrapper').slick({
        center: false,
        loop: false,
        useCSS: false,
        initialSlide: 0,
        dots: false,
        infinite: true,
        variableWidth: true,
        speed: 300,
        nextArrow: $('.next'),
        prevArrow: $('.prev'),
        slidesToShow: 8,
        slidesToScroll: 1,
        responsive: [
          {
            breakpoint: 1024,
            settings: {
              slidesToShow: 5,
              slidesToScroll: 1,
              infinite: true,
              dots: true
            }
          },
          {
            breakpoint: 600,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 2
            }
          },
          {
            breakpoint: 480,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 2
            }
          }
          
        ]
      });
    });
    </script>   
  

просто сделайте так, без тега i для стрелки

 <div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>
  

и используйте это в файле js

 $(document).ready(function(){
      $('.your-class').slick({
        setting-name: setting-value
      });
    });
  

это генерирует HTML-тег для стрелки