Grid of images for desktop, slideshow for mobile view

  • Hello, guys!


    Uikit is known to be extremelly nice and powerful tool. Some weeks ago I was faced a challenge to display a list of images in a different way depending on user viewport width:

    • Render a 4x2 grid of images when viewport is classified as "Desktop" (or tablet in landscape orientation)
    • Render a standart uikit slideshow when user has a mobile viewport

    This could be easily done with a small <script>placed inside your html:



    This piece of code wraps all of your images with <div> tags with proper classes (either uk-gridor uk-slideshow) with proper data-uk- arguments and adds navigation buttons for slideshow.


    I also added some css to place slide navigation buttons under the image:

    CSS
    1. .slidenav-custom-class {
    2. width: 200px;
    3. height: 70px;
    4. position: inherit;
    5. margin: auto;
    6. }



    And here is the markup for the images:


    HTML
    1. <div>
    2. <li class="picture-custom-class uk-width-1-4"><img src="..." /></li>
    3. <li class="picture-custom-class uk-width-1-4"><img src="..." /></li>
    4. .....
    5. </div>
    6. // I used picture-custom-class just as an id for pictures



    Let's have a look: