UIkit Slider with slider content effects

index.html

<div class="uk-container">
  <h2>Content Widths</h2>

            <div uk-slider="center: true; velocity: 1.5; easing: cubic-bezier(.4,0,.2,1)">

                <div class="uk-position-relative">

                    <div class="uk-slider-container uk-light">
                        <ul class="test uk-slider-items uk-child-width-1-1 uk-grid uk-grid-small">
                            <li class="uk-width-3-4">
                              <div uk-slider-parallax="scale:0.85,1,0.85; opacity:0.3,1,0.3">
                                <canvas width="900" height="300"></canvas>
                                <div class="uk-position-center uk-panel"><h1>1</h1></div>
                              </div>
                                
                            </li>
                          <li class="uk-width-3-4">
                              <div uk-slider-parallax="scale:0.85,1,0.85; opacity:0.3,1,0.3">
                                <canvas width="900" height="300"></canvas>
                                <div class="uk-position-center uk-panel"><h1>2</h1></div>
                              </div>
                                
                            </li>
                          <li class="uk-width-3-4">
                              <div uk-slider-parallax="scale:0.85,1,0.85; opacity:0.3,1,0.3">
                                <canvas width="900" height="300"></canvas>
                                <div class="uk-position-center uk-panel"><h1>3</h1></div>
                              </div>
                                
                            </li>
                          <li class="uk-width-3-4">
                              <div uk-slider-parallax="scale:0.85,1,0.85; opacity:0.3,1,0.3">
                                <canvas width="900" height="300"></canvas>
                                <div class="uk-position-center uk-panel"><h1>4</h1></div>
                              </div>
                                
                            </li>
                          <li class="uk-width-3-4">
                              <div uk-slider-parallax="scale:0.85,1,0.85; opacity:0.3,1,0.3">
                                <canvas width="900" height="300"></canvas>
                                <div class="uk-position-center uk-panel"><h1>5</h1></div>
                              </div>
                                
                            </li>
                          <li class="uk-width-3-4">
                              <div uk-slider-parallax="scale:0.85,1,0.85; opacity:0.3,1,0.3">
                                <canvas width="900" height="300"></canvas>
                                <div class="uk-position-center uk-panel"><h1>6</h1></div>
                              </div>
                                
                            </li>
                        </ul>
                    </div>

                    <div class="uk-hidden@xl uk-light">
                        <a class="uk-position-center-left uk-position-small" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
                        <a class="uk-position-center-right uk-position-small" href="#" uk-slidenav-next uk-slider-item="next"></a>
                    </div>

                    <div class="uk-visible@xl">
                        <a class="uk-position-center-left-out uk-position-small" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
                        <a class="uk-position-center-right-out uk-position-small" href="#" uk-slidenav-next uk-slider-item="next"></a>
                    </div>

                    <!-- Alternative markup

                    <div class="uk-visible@s uk-dark"  uk-toggle="cls: uk-dark uk-light; mode: media; media: @xl">
                        <a class="uk-position-center-left-out uk-position-small" uk-toggle="cls: uk-position-center-left-out uk-position-center-left; mode: media; media: @xl" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
                        <a class="uk-position-center-right-out uk-position-small" uk-toggle="cls: uk-position-center-right-out uk-position-center-right; mode: media; media: @xl" href="#" uk-slidenav-next uk-slider-item="next"></a>
                    </div>

                    -->

                </div>

                <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>

            </div>
</div>

script.js

// If i use jquery i have to link the file

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.2/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.2/js/uikit-icons.min.js"></script>

style.css

.test > li > div > canvas { background: #0e8790; }
            

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.2/css/uikit.min.css" rel="stylesheet" />

uikit-slider-with-slider-content-effects.markdown

UIkit Slider with slider content effects

A Pen by Beibit Sakhanov on CodePen.

License.