Slick Carousel前後左右のボタンではなく上下に表示されます

Question

Slick Carousel thisを使用しています。「次」と「前の」矢印がそれぞれの画像の上下に表示されます。私はそれがSlickのドキュメントで表示されるように見ているだけです。

ボタンはHTMLにはなく、滑らかなjsによって生成されます。ここで

は、HTMLです： $（ドキュメント）.ready（関数（）{

$('.albumsCarousel').slick({ 
infinite: true, 
slidesToShow: 3, 
slidesToScroll: 3, 
arrows: true, 
cssEase: "ease", 
autoplay: true, 
autoplaySpeed: 3000, 
nextArrow: '<i class="fa fa-arrow-right"></i>', 
prevArrow: '<i class="fa fa-arrow-left"></i>' 
}); 

と、ここで私はかなり確信してISNよCSSは（だ：

<div class="albumsCarousel"> 
    <div><img class="slickImage" src=./images/betterQuit.png></div> 
    <div><img class="slickImage" src=./images/betterVill.png></div> 
    <div><img class="slickImage" src=./images/casio.jpg></div> 
    <div><img class="slickImage" src=./images/betterWorried.png></div> 
    <div><img class="slickImage" src=./images/betterFrost.png></div> 
    <div><img class="slickImage" src=./images/betterWeird.png></div> 
    <div><img class="slickImage" src=./images/betterOphelia.png></div> 
    <div><img class="slickImage" src=./images/betterEnya.png></div> 
    <div><img class="slickImage" src=./images/betterXiu.png></div> 
    <div><img class="slickImage" src=./images/betterImpasse.png></div> 
    <div><img class="slickImage" src=./images/betterV.png></div> 
    <div><img class="slickImage" src=./images/betterThrone.png></div> 
    <div><img class="slickImage" src=./images/betterSholi.png></div> 
    <div><img class="slickImage" src=./images/betterPGirls2.png></div> 
</div> 

はここにJSですここをクリックしてください）：

.slick-prev, .slick-next { 
    transform: translate3d(0, 0, 0);/* fix for chrome not rendering */ 
    } 
    .slick-dots { 
    transform: translate3d(0, 0, 0); 
    } 

Answer 1

オプションから次のと前の矢印を削除して試してください。ここで作業コードも確認できます。

<div class='container'> 
    <div class='single-item'> 
    <div><h3>1</h3></div> 
    <div><h3>2</h3></div> 
    <div><h3>3</h3></div> 
    <div><h3>4</h3></div> 
    <div><h3>5</h3></div> 
    <div><h3>6</h3></div> 
    </div> 
</div> 

CSS

.container { 
    margin: 0 auto; 
    padding: 40px; 
    width: 80%; 
    color: #333; 
    background: #419be0; 
} 

.slick-slide { 
    text-align: center; 
    color: #419be0; 
    background: white; 
} 

JS

$(".single-item").slick({ 
    dots: true, 
    infinite: true, 
slidesToShow: 3, 
slidesToScroll: 3, 
cssEase: "ease", 
autoplay: true, 
autoplaySpeed: 3000, 
}); 

ここでコードチェック作業

https://jsfiddle.net/v8xbo5sz/

その仕事なら、これを試してみてください

$(".single-item").slick({ 
prevArrow:"<img class='a-left control-c prev slick-prev' src='../images/shoe_story/arrow-left.png'>", 
nextArrow:"<img class='a-right control-c next slick-next' src='../images/shoe_story/arrow-right.png'>" 
});