Skip to content

Instantly share code, notes, and snippets.

@nielk

nielk/app.js

Last active December 22, 2015 00:28
Show Gist options
  • Save nielk/6389282 to your computer and use it in GitHub Desktop.
Save nielk/6389282 to your computer and use it in GitHub Desktop.
Download ZIP
A simple horizontal content slider with 2 slides
Raw
app.js
$(document).ready(function() {
$('.slide-01').click(function() {
$(this).toggleClass('hide-section');
$(this).parent().find('.slide-02').toggleClass('show-section');
});
$('.slide-02').click(function() {
$(this).parent().find('.slide-01').toggleClass('hide-section');
$(this).toggleClass('show-section');
});
});
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="main.css"></link>
</head>
<body>
<div class="container-slide">
<ul class="slide">
<li class="slide-01">page 01</li>
<li class="slide-02"> page 02</li>
</ul>
</div>
<script src="bower_components/jquery/jquery.js"></script>
<script src="app.js"></script>
</body>
</html>
Raw
main.css
.container-slide {
width: 100%;
overflow: hidden;
}
.slide {
width: 200%;
list-style: none;
}
.slide-01 {
background-color: blue;
width: 50%;
display: inline;
float: left;
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
}
.slide-02 {
background-color: yellow;
width: 50%;
display: inline;
float: right;
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
}
.show-section {
opacity: 1;
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
}
.hide-section {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0;
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
}
@xseignard
Copy link

cool!
le code complet de l'index

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <link rel="stylesheet" href="main.css"></link>
  </head>
  <body>
    <div class="container-slide">
      <ul class="slide">
        <li class="slide-01">page 01</li>
        <li class="slide-02"> page 02</li>
      </ul>
    </div>

    <script src="bower_components/jquery/jquery.js"></script>
    <script src="app.js"></script>
  </body>
</html>

@xseignard
Copy link

tiens pour le fun essaye de le faire sans jquery, juste en vanilla js!

@nielk
Copy link
Author

nielk commented Sep 2, 2013

Yep, j'essaye de faire ça plus tard

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment