UIKit Slider Component


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.

Write a reply

Login or register to write a reply, it's free!