光滑的轮播下一个和上一个图标显示在上方/下方答案

【问题标题】：Slick carousel next and prev icon showing above/below光滑的轮播下一个和上一个图标显示在上方/下方
【发布时间】：2020-10-10 03:59:59
【问题描述】：

我正在使用 Slick Carousel 这个，我的“下一个”和“上一个”箭头出现在我的文本轮播上方和下方，而不是在每一侧。如何解决这个问题。如何修复这些箭头。我正在使用光滑的旋转木马和字体。 这是我的 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：$(document).ready(function(){

<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>

【问题讨论】：

标签： carousel slick.js

【解决方案1】：

只要这样做，不要标记 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标签

【讨论】：