How to create 'Slide-in gallery panels' with jQuery/CSS3? [closed]

Answer 1

This is actually very simple using what is called the radio hack. You can do it with only html and CSS (CSS3 for smooth transitions), which is very appreciable as jquery represents a big chunk for your clients to download.

Basically this is how it goes (working demo here: http://codepen.io/anon/pen/jcgxI):

HTML

We use a radio set of inputs to determine which "tab" should appear. Radios are perfect here because when one is check, all other must be unchecked. For that reason, make sure the attribute NAME is the same for your entire set.

We then write our content wrapped within any tag really (the structure section > article seems fitting). The navigation, even though it could be done via clicking on the radio buttons themselves can also be done through clicking on labels that refer to any input through their attribute FOR set to the ID of the one they refer to.

    

        
article 1
        
        
    
    

        
article 2
        
        
    
    

        
article 3
        
        
    
    

        
article 4
        
        
    

CSS

Because we will navigate with easily stylized labels, we can just hide the inputs themselves.

input{ display:none; }

Position all articles next to one another.

article{
    position:absolute;
    width:100vw;
}
article:nth-of-type(1){ left: 0    }
article:nth-of-type(2){ left: 100% }
article:nth-of-type(3){ left: 200% }
article:nth-of-type(4){ left: 300% }

I add "arrows" in the labels (just something to click on, in real design, i'd switch these characters to a font icon).

label:first-of-type::before{content: "<"}
label:last-of-type::before {content: ">"}

Finally, we use the css selector "~" that means "any sibling element after (and their children)". This way, we are saying "after the Nth input checked, the whole section slides to the corresponding position".

input[id$="-1"]:checked ~ section{ transform: translateX(0)     }
input[id$="-2"]:checked ~ section{ transform: translateX(-100%) }
input[id$="-3"]:checked ~ section{ transform: translateX(-200%) }
input[id$="-4"]:checked ~ section{ transform: translateX(-300%) }

It is because we use this selector that it is important that our inputs be outside and before the sliding tag (here "section") so that they are siblings of the moving tag (or siblings of its parents).

And because we want to observe the section moving, we add a transition property:

section{ transition: all 1s; }

And if you wrap the whole HTML into another tag (to prevent the effect of selector "~" to propagate to other sections), you can use an identical HTML structure for other sliders without having to write any additional CSS!

A full blown tutorial with a beautiful working demo (for vertical version but don't worry, it's very similar to horizontal) is available here: http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/

PS: in the CSS, don't forget to add all vendor prefixes for transition and transform. Always check w3schools.com (EDIT: never trust w3schools but do check somewhere else online!) to know which prefixes are needed. Example:

-webkit-transition: all 1s;
transition: all 1s;