Div slider (grid content)

Question

Hi guys,

I spent some time trying to make a div slider (using the slider slick).

I actually have an image gallery containing 6images displayed in a grid. I would like to be able to slide these 6 images at the same time (slide the grid) to display the next not visible on the web page.

I didn't find any solution except coding the JS by myself.

If you guys have any idea or any working slider in this kind of situation, I'm free to get some help.

Draw :

//First grid //Right grid not visible
------------------------------------- Slide it instead of the first grid, the new 6images
| img | img | img | are displayed instead of the 6first
| | | |
-------------------------------------
| img | img | img |
| | | |
-------------------------------------

Answer 1

Here is how the code is supposed to be displayed on the html page (I'm working with php for more dynamics galleries so don't worry about the code) :

https://code.sololearn.com/Wm8ijhfPaFh1/#

The container1 is what is shown and I would like to have a slider to move out the container1 and display the content of container2 instead (still displayed as a grid with this exact css).

Thanks for your interest. Brent Meeusen

Answer 2

Exactly ! Yup I spent yesterday evening trying to do that with no success. I'll tell you here if I success doing something ;-)

Answer 3

yeah i'm trying as well with no success at the moment but i'll do it and post it here no worries ;)

Answer 4

Brent Meeusen just having done a few tests at the moment, the slick framework did put an auto display: block; on the slider images, so I have unset it. It's not the final version but it's an update before adding it to the website I work with :)
(ps : check it on your computer)