光滑的旋转木马固定在箭头内

Question

所以今天我遇到了一个问题，我已经尝试了很多东西来尝试修复它但没有任何效果我目前正在为我的旋转木马使用光滑的旋转木马。我今天遇到的问题是我无法将箭头固定在旋转木马内。我试图让箭头固定在旋转木马的活动项目周围。

如果你能帮助我，我将非常感谢！谢谢！

我想做的是：https://i.stack.imgur.com/BQ2TQ.png

代码：

Jquery -

$('.carousel').slick({
   arrows: true,
   prevArrow: $(".serverArrow1"),
   nextArrow: $(".serverArrow2")
 });

Html -

<div class="quoteCarousel">
        <div class="quoteItem">
            <div class="container">
                <div class="quoteImage">
                    <img src="http://splory.my/blog/wp-content/uploads/2015/03/round-profile-CH.png" alt="">
                </div>
                <p class="quoteText">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <p class="quoteAuthor">John Doe</p>
            </div>
        </div>
        <div class="quoteItem">
            <div class="container">
                <div class="quoteImage">
                    <img src="http://splory.my/blog/wp-content/uploads/2015/03/round-profile-CH.png" alt="">
                </div>
                <p class="quoteText">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <p class="quoteAuthor">John Doe</p>
            </div>
        </div>
        <div class="quoteItem">
            <div class="container">
                <div class="quoteImage">
                    <img src="http://splory.my/blog/wp-content/uploads/2015/03/round-profile-CH.png" alt="">
                </div>
                <p class="quoteText">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <p class="quoteAuthor">John Doe</p>
            </div>
        </div>
        <div class="quoteItem">
            <div class="container">
                <div class="quoteImage">
                    <img src="http://splory.my/blog/wp-content/uploads/2015/03/round-profile-CH.png" alt="">
                </div>
                <p class="quoteText">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <p class="quoteAuthor">John Doe</p>
            </div>
        </div>
        <div class="quoteItem">
            <div class="container">
                <div class="quoteImage">
                    <img src="http://splory.my/blog/wp-content/uploads/2015/03/round-profile-CH.png" alt="">
                </div>
                <p class="quoteText">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <p class="quoteAuthor">John Doe</p>
            </div>
        </div>

    </div>
    <div class="sliderButtons">
            <a href="#" class="serverArrow1">
                <i class="fa fa-arrow-left"></i>
            </a>
            <a href="#" class="serverArrow2">
                <i class="fa fa-arrow-right"></i>
            </a>
        </div>

CSS -

.serverArrow1 {margin-right: 45%;}

.serverArrow2 {
margin-left: 45%;
}

.slick-arrow {margin-bottom: 10px;border: 1px solid #3b3b3b;padding: 10px 12px; border-radius: 50%;color: #060606;font-size: 2rem;}

.sliderButtons {position: absolute;bottom: 80px;right: 50px;left: 50px;}