Announcement

Collapse
No announcement yet.

Responsive Slider for Desktop/Tablet and Image grid for Mobile?

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Responsive Slider for Desktop/Tablet and Image grid for Mobile?

    I am working on a gallery of images that would like to show as a slideshow (currently trying with Flexslider but anything would do).
    I would the slider only to be displayed on Desktop and Tablet, but for Mobile the slider would be too small and I want to show directly all images that are used in the slider.

    What is the best way of getting this result?


    Thanks a lot!

  • #2
    I don´t think the behaviour of a slider (plugin) is related to Dynamik?...
    Not sure there is a plugin doing that - I´d suggest to search Wordpress repo and Codecanyon maybe.

    Comment


    • #3
      Thanks SiGa!
      I found an easy way of solving this.

      I duplicated the content of the images: first as a slideshow, and second as a gallery grid. Each one is place in a different <div> with different class
      The image grid is by default hidden with CSS display:none
      Then I used the Dynamik Design Responsive to hide the slider and make the grid visible on media query (6th).


      Comment


      • SiGa
        SiGa commented
        Editing a comment
        That´s fine but I hope you are aware that nonetheless everything will be loaded on every device (which might slow down loading time), visible or not.... That´s the downside of the CSS method.

      • rgval
        rgval commented
        Editing a comment
        Oh! The images are the same for the slider and the grid. Do you think that would that increase loading time?

    • #4
      Taking this up as a challange. I did this using the Meta Slider (Flexslider), with a couple lines of Custom CSS on media query.

      http://sandbox.sogwap.net/slider-grid-images/

      Here's the CSS.

      <style>
      @media (max-width:750px) {
      ul.slides {transform:none !important; width: 100% !important;}
      ul.slides li {
      box-sizing: border-box;
      padding: 20px !important;
      width: 50% !important;
      }
      }
      </style>

      Comment


      • rgval
        rgval commented
        Editing a comment
        Whoa! thanks for the code!
        Somehow I see the first two images repeated at the bottom of the grid when the screen is less than 750px.

        Also, could it be possible to list the images grid using a masonry style when they are in a grid? So vertical images can fit better, like here...
        http://miromannino.github.io/Justified-Gallery/


        Thanks

      • Sogwap
        Sogwap commented
        Editing a comment
        It's all in the CSS. And in the case of a slider like this, CSS that trumps jQuery.
        Here's the same code, modified that hides the repeat (clone) images. Changes padding to % (optional). And hides navigation.
        http://sandbox.sogwap.net/slider-grid-images/

        <style>
        @media (max-width:750px) {
        ul.slides {
        transform:none !important; width: 100% !important;
        }
        ul.slides li {
        box-sizing: border-box;
        padding: 2% !important;
        width: 50% !important;
        }
        ul.slides li.clone {
        display:none !important;
        }
        ol.flex-control-nav, ul.flex-direction-nav {
        display:none;
        }
        }
        </style>
        Last edited by Sogwap; 04-28-2016, 12:32 PM.
    Working...
    X