![](https://beanscommunity.wpenginepowered.com/wp-content/uploads/beans/images/a03121a3e38479ec4a199925e56d8fe3-87a1c39.jpg)
Hi Theirry & everyone,
I just want to know why the arrows from UIKit's Slider does not appear when I implemented it in this website: http://samuelgoldwyn.wpengine.com/ in this section: http://prntscr.com/d8v925
Although I can manually grab these:http://prntscr.com/d8v9be HTML, whenever I click them (assuming left and right arrows appear), it does not work.
Can you please let me know if I need further scripts aside from
beans_uikit_enqueue_components( array('slider'),'add-ons');
I would also like to implement the same position of these arrows based on UIKit.
Thank you.
![](https://beanscommunity.wpenginepowered.com/wp-content/uploads/beans/images/e67760900a71f197b8694cc7832ca68b-87a1c39.jpg)
Hi Bobby, you forgot to add slider navigation to your markup. First you have to add "uk-slidenav-position" class to parent element with data-uk-slider attribute to tell uikit where your slider is, and then just before closing data-uk-slider div you have to add links, like this:
<a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slider-item="previous"></a>
<a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slider-item="next"></a>
I copied your code, and add missing elements:
<div class="uk-slidenav-position" data-uk-slider="{center:true}">
<div class="uk-slider-container">
<div class="fade-left"></div>
<div class="fade-right"></div>
<ul class="uk-slider uk-grid uk-grid-width-medium-1-4 " style="min-width: 7042.5px; min-height: 420px; transform: translateX(704px);">
<li data-slide="0" style="left: 0px; width: 469.5px;" class="uk-active">
<a href="https://www.youtube.com/watch?v=UUwZ5Yo3Urg" class="slider-link" draggable="false">
<div style="background:url(http://samuelgoldwyn.wpengine.com/wp-content/uploads/2016/11/film-poster-5.jpg) no-repeat top center; background-size:cover; width:auto; height:420px;">
</div>
<div class="slider-title uk-position-absolute">Finding Altamira</div>
</a>
</li>
<li data-slide="1" style="left: 469.5px; width: 469.5px;" class="uk-slide-after">
<a href="https://www.youtube.com/watch?v=UUwZ5Yo3Urg" class="slider-link" draggable="false">
<div style="background:url(http://samuelgoldwyn.wpengine.com/wp-content/uploads/2016/11/film-poster-4.jpg) no-repeat top center; background-size:cover; width:auto; height:420px;">
</div>
<div class="slider-title uk-position-absolute">Who gets the dog?</div>
</a>
</li>
<li data-slide="2" style="left: 939px; width: 469.5px;" class="uk-slide-after">
<a href="https://www.youtube.com/watch?v=UUwZ5Yo3Urg" class="slider-link" draggable="false">
<div style="background:url(http://samuelgoldwyn.wpengine.com/wp-content/uploads/2016/11/film-poster-3.jpg) no-repeat top center; background-size:cover; width:auto; height:420px;">
</div>
<div class="slider-title uk-position-absolute">Chicken People</div>
</a>
</li>
<li data-slide="3" style="left: 1408.5px; width: 469.5px;" class="uk-slide-after">
<a href="https://www.youtube.com/watch?v=UUwZ5Yo3Urg" class="slider-link" draggable="false">
<div style="background:url(http://samuelgoldwyn.wpengine.com/wp-content/uploads/2016/11/film-poster-2.jpg) no-repeat top center; background-size:cover; width:auto; height:420px;">
</div>
<div class="slider-title uk-position-absolute">Transpecos</div>
</a>
</li>
<li data-slide="4" style="left: 1878px; width: 469.5px;" class="uk-slide-after">
<a href="https://www.youtube.com/watch?v=UUwZ5Yo3Urg" class="slider-link" draggable="false">
<div style="background:url(http://samuelgoldwyn.wpengine.com/wp-content/uploads/2016/11/film-poster-1.jpg) no-repeat top center; background-size:cover; width:auto; height:420px;">
</div>
<div class="slider-title uk-position-absolute">No Men Beyond This Point</div>
</a>
</li>
<li data-slide="5" style="left: 2347.5px; width: 469.5px;" id="" class="uk-slide-after">
<a href="https://www.youtube.com/watch?v=UUwZ5Yo3Urg" class="slider-link" draggable="false">
<div style="background:url(http://samuelgoldwyn.wpengine.com/wp-content/uploads/2016/11/film-poster-5.jpg) no-repeat top center; background-size:cover; width:auto; height:420px;">
</div>
<div class="slider-title uk-position-absolute">Finding Altamira</div>
</a>
</li>
<li data-slide="6" style="left: 2817px; width: 469.5px;" id="" class="uk-slide-after">
<a href="https://www.youtube.com/watch?v=UUwZ5Yo3Urg" class="slider-link" draggable="false">
<div style="background:url(http://samuelgoldwyn.wpengine.com/wp-content/uploads/2016/11/film-poster-4.jpg) no-repeat top center; background-size:cover; width:auto; height:420px;">
</div>
<div class="slider-title uk-position-absolute">Who gets the dog?</div>
</a>
</li>
<li data-slide="7" style="left: 3286.5px; width: 469.5px;" id="" class="uk-slide-after">
<a href="https://www.youtube.com/watch?v=UUwZ5Yo3Urg" class="slider-link" draggable="false">
<div style="background:url(http://samuelgoldwyn.wpengine.com/wp-content/uploads/2016/11/film-poster-3.jpg) no-repeat top center; background-size:cover; width:auto; height:420px;">
</div>
<div class="slider-title uk-position-absolute">Chicken People</div>
</a>
</li>
<li data-slide="8" style="left: 3756px; width: 469.5px;" id="" class="uk-slide-after">
<a href="https://www.youtube.com/watch?v=UUwZ5Yo3Urg" class="slider-link" draggable="false">
<div style="background:url(http://samuelgoldwyn.wpengine.com/wp-content/uploads/2016/11/film-poster-2.jpg) no-repeat top center; background-size:cover; width:auto; height:420px;">
</div>
<div class="slider-title uk-position-absolute">Transpecos</div>
</a>
</li>
<li data-slide="9" style="left: 4225.5px; width: 469.5px;" id="" class="uk-slide-after">
<a href="https://www.youtube.com/watch?v=UUwZ5Yo3Urg" class="slider-link" draggable="false">
<div style="background:url(http://samuelgoldwyn.wpengine.com/wp-content/uploads/2016/11/film-poster-1.jpg) no-repeat top center; background-size:cover; width:auto; height:420px;">
</div>
<div class="slider-title uk-position-absolute">No Men Beyond This Point</div>
</a>
</li>
<li data-slide="10" style="left: 4695px; width: 469.5px;" id="" class="uk-slide-after">
<a href="https://www.youtube.com/watch?v=UUwZ5Yo3Urg" class="slider-link" draggable="false">
<div style="background:url(http://samuelgoldwyn.wpengine.com/wp-content/uploads/2016/11/film-poster-5.jpg) no-repeat top center; background-size:cover; width:auto; height:420px;">
</div>
<div class="slider-title uk-position-absolute">Finding Altamira</div>
</a>
</li>
<li data-slide="11" style="left: -1878px; width: 469.5px;" id="" class="uk-slide-before">
<a href="https://www.youtube.com/watch?v=UUwZ5Yo3Urg" class="slider-link" draggable="false">
<div style="background:url(http://samuelgoldwyn.wpengine.com/wp-content/uploads/2016/11/film-poster-4.jpg) no-repeat top center; background-size:cover; width:auto; height:420px;">
</div>
<div class="slider-title uk-position-absolute">Who gets the dog?</div>
</a>
</li>
<li data-slide="12" style="left: -1408.5px; width: 469.5px;" id="" class="uk-slide-before">
<a href="https://www.youtube.com/watch?v=UUwZ5Yo3Urg" class="slider-link" draggable="false">
<div style="background:url(http://samuelgoldwyn.wpengine.com/wp-content/uploads/2016/11/film-poster-3.jpg) no-repeat top center; background-size:cover; width:auto; height:420px;">
</div>
<div class="slider-title uk-position-absolute">Chicken People</div>
</a>
</li>
<li data-slide="13" style="left: -939px; width: 469.5px;" id="" class="uk-slide-before">
<a href="https://www.youtube.com/watch?v=UUwZ5Yo3Urg" class="slider-link" draggable="false">
<div style="background:url(http://samuelgoldwyn.wpengine.com/wp-content/uploads/2016/11/film-poster-2.jpg) no-repeat top center; background-size:cover; width:auto; height:420px;">
</div>
<div class="slider-title uk-position-absolute">Transpecos</div>
</a>
</li>
<li data-slide="14" style="left: -469.5px; width: 469.5px;" id="" class="uk-slide-before">
<a href="https://www.youtube.com/watch?v=UUwZ5Yo3Urg" class="slider-link" draggable="false">
<div style="background:url(http://samuelgoldwyn.wpengine.com/wp-content/uploads/2016/11/film-poster-1.jpg) no-repeat top center; background-size:cover; width:auto; height:420px;">
</div>
<div class="slider-title uk-position-absolute">No Men Beyond This Point</div>
</a>
</li>
</ul>
</div>
<a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slider-item="previous"></a>
<a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slider-item="next"></a>
</div>
![](https://beanscommunity.wpenginepowered.com/wp-content/uploads/beans/images/a03121a3e38479ec4a199925e56d8fe3-87a1c39.jpg)
Hi Mariusz Wachowski,
Thanks a bunch for that. I should've looked closely at my code. 🙂 It worked.