Slider between two full width divs

Question

I am looking for a way to have a JavaScript/jQuery function which can be used as a full page slider on a function. My HTML structure is as follows:

Now I want to do two things:

I want both slide1 and slide2 to be full width elements.
Furthermore, I want a function that can be called to elegantly slide from slide1 to slide2 and back if you call it again.

I found a solution in fullpage.js, but that code has too much unwanted side effects (e.g., no vertical scrolling; centering of content; no smooth responsive resizing of font-size) and can do more things and therefore uses more code than I want.

I think it must be easy to accomplish in less lines, but I don't know how to go about it. I hope someone can provide me with some pointers on how to make two full-width divs (basically two "body-elements") that can be slided when calling a JavaScript/jQuery function.

http://stackoverflow.com/help/how-to-ask – Starmetal Nov 25 '14 at 07:44 — Starmetal, Nov 25 '14 at 07:44

score 2 · Answer 1 · answered Nov 25 '14 at 08:55

2

I think this is what you want?

JSfiddle

Simple jquery code:

$( "#s1" ).click(function() {
  $("#s1").css("left","-100%");
  $("#s2").css("left","0");    
});

$( "#s2" ).click(function() {
  $("#s2").css("left","100%");
  $("#s1").css("left","0");    
});

This slides the div with css to the left and right with a 1s transition.

answered Nov 25 '14 at 08:55

Stefan

1,905
7
24
38

It seems like my preferred solution. I will try to implement it at home. – user2609980 Nov 25 '14 at 14:05
Thanks, but `position: absolute;` does not work with the responsive squares unfortunatey. – user2609980 Nov 25 '14 at 19:01

score 1 · Accepted Answer · answered Nov 25 '14 at 10:34

1

I wouldn't worry too much about the number of lines. fullPage.js its only 6Kb gzipped...

And it provides compatibility with old browsers (IE 8+, Opera 12, no CSS3 browsers...), works on touch devices detecting the touch movements, provide URL anchors, and the functions you want plus many other useful ones.

You can disable the vertical centering and the resize of the text if you want. Those are optional.

Not sure what you mean with the vertical scrolling, but you could use autoScrolling:false to accomplish something like this, which has the horizontal slides and the normal vertical scrolling.

answered Nov 25 '14 at 10:34

Alvaro

40,778
30
164
336

Hi Alvaro thanks for your answer. I think you and the other contributors made a really nice product. For my current project it does a bit too much and I am looking for a more simple solutions as possibly the other current answer. – user2609980 Nov 25 '14 at 14:04
It's fine, no worries :) – Alvaro Nov 25 '14 at 16:18
Alvaro, could you tell me how to get the content on fullpage slider pages towards the top of the screen? It is now centered. – user2609980 Nov 29 '14 at 23:26
Okay found the solution: putting `verticalCentered: false` :-). – user2609980 Dec 02 '14 at 18:21

Slider between two full width divs

2 Answers2