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://ift.tt/OIiP2w);
.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.
Aucun commentaire:
Enregistrer un commentaire