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.
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>Hi Mariusz Wachowski,
Thanks a bunch for that. I should've looked closely at my code. 🙂 It worked.