Slick carousel next and prev icon showing above/below - carousel

Question

I'm using Slick Carousel this and my "next" and "previous" arrows are appearing above and below my text carousel, rather than on each side. How to fix this. How to fix these arrowe. I am using slick carousel and fontawsome.
Here is my 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">General Microbiology</div>
<div class="navItem-car">Biochemistry</div>
<div class="navItem-car">Biotechnology</div>
<div class="navItem-car">Bacteriology</div>
<div class="navItem-car">Cell Biology</div>
<div class="navItem-car">Difference</div>
<div class="navItem-car">Phycology</div>
<div class="navItem-car">Virology</div>
<div class="navItem-car">Disease</div>
<div class="navItem-car">Food Microbiology</div>
<div class="navItem-car">Epidemiology</div>
<div class="navItem-car">Antimicrobial Drugs</div>
<div class="navItem-car">Genetics</div>
<div class="navItem-car">Molecular Biology</div>
<div class="navItem-car">Mycology</div>
<div class="navItem-car">Bioinformatics</div>
<div class="navItem-car">Immunology</div>
<div class="navItem-car">Environmental Microbiology</div>
<div class="navItem-car">Medical Microbiology</div>
<div class="navItem-car">IPR</div>
<div class="navItem-car">Microscope</div>
<div class="navItem-car">Parasitology</div>
<div class="navItem-car">Microbiologists</div>
<div class="navItem-car">Biosafety</div>
<div class="navItem-car">Biochemical Test</div>
<div class="navItem-car">Staining</div>
<div class="navItem-car">Protocols</div>
<div class="navItem-car">Instruments</div>
</div>
</div>
</div>
and here's the CSS (which I'm pretty sure isn't playing a role here):
.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;
}
here's the 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>

Answer 1

just do like this without tag i for arrow
<div class="your-class">
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
and use this in js file
$(document).ready(function(){
$('.your-class').slick({
setting-name: setting-value
});
});
this is generate html tag for arrow