Making horizontal sliding sections?

Question

Here is an example of exactly what I am trying to create.

I've tried to create on my own a page that kind of worked like that with 3 paragraphs. I only want 1 paragraph to be shown at a time and I want the left and right arrows to take me to the previous and next paragraphs respectively.

I'm not exactly sure how to get only one paragraph showing at a time (I put them all in a container, I'm assuming I would have to do something with that), and I don't really know how to begin with the horizontal sliding (I'm assuming I would need to do something with JS).

Here is what I have so far:

HTML:

<body>
  <div class="slide_container">
    <p id="slide1" class="slide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <p id="slide2" class="slide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <p id="slide3" class="slide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <button id="prev">←</button>
    <button id="next">→</button>
  </div>
</body>

CSS:

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

.slide_container {
  width: 960px;
  margin: 0 auto;
  font-family: 'Open Sans';
}
#prev, #next {
  border: none;
  padding: 10px 20px;
  background-color: #efefef;
  color: #c2c2c2;
  transition: background .2s ease-in-out;
}
#prev:hover, #next:hover {
  background: #dedede;
  cursor: pointer;
}
#prev:focus, #next:focus {
  outline: none;
}
#prev {
  float: left;
  margin-left: 400px;
}
#next {
  float: right;
  margin-right: 400px;
}

JavaScript:

var prev = document.getElementById('prev');
var next = document.getElementById('next');

prev.addEventListener('click', function() {
  // Somehow to go to the previous slide
});

next.addEventListener('click', function() {
  // Somehow to go to the next slide
});

Any help would be very appreciated!

EDIT: Here is the jsfiddle if it is any help.

If you could, I would recommend jQuery or some other JavaScript library. It would take lots of illegible code to produce the animation you desire. [.animate()](http://api.jquery.com/animate/) — Downgoat, Mar 27 '15 at 02:04

score 0 · Answer 1 · edited May 23 '17 at 10:24

Since I was a bit bored at the moment, I made a pure CSS solution. It doesn't quite match the animation style you're after, since the previous frame doesn't move left, but this is just a proof of concept.
Firefox won't style the inputs if I recall correctly so you can use some additional elements for that, see this question, for example.

* {
  box-sizing: border-box;
}
body,
html {
  height: 100%;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
}
input[type="checkbox"] {
  display: none;
  z-index: 3;
  position: absolute;
  right: 0;
  top: 50px;
  width: 100px;
  height: 100px;
}
input[type="checkbox"]:first-of-type {
  display: block;
}
input[type="checkbox"]:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: blue;
}
input[type="checkbox"]:checked {
  left: 0;
}
input[type="checkbox"]:checked + div + input[type="checkbox"] {
  display: block;
}
input[type="checkbox"]:checked:before {
  background: red;
}
.frame {
  width: 100%;
  height: 100%;
  position: absolute;
  right: -100%;
  background: white;
  z-index: 2;
  transition: all 0.6s ease;
}
.frame:nth-child(4n + 1) {
  background: lightgray;
}
.frame:first-child {
  right: 0;
  z-index: 1;
}
input[type="checkbox"]:checked + .frame {
  right: 0;
}

<div class="frame">First</div>
<input type="checkbox" />
<div class="frame">Second</div>
<input type="checkbox" />
<div class="frame">Third</div>
<input type="checkbox" />
<div class="frame">Fourth</div>

Making horizontal sliding sections?

1 Answers1