Bootstrap Snippet carousel using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
  <main>
    <div id="carousel">
       <div class="hideLeft">
        <img src="https://s16.postimg.org/vklrwoxtx/cover9.jpg">
      </div>
      <div class="prevLeftSecond">
        <img src="https://s16.postimg.org/cgsggckzp/cover8.jpg">
      </div>
      <div class="prev">
        <img src="https://s16.postimg.org/emmrauog5/cover7.jpg">
      </div>
      <div class="selected">
        <img src="https://s16.postimg.org/9drqcz611/cover1.jpg">
      </div>
      <div class="next">
        <img src="https://s16.postimg.org/pnhwfvgp1/cover6.jpg">
      </div>
      <div class="nextRightSecond">
        <img src="
https://s16.postimg.org/edp6kxbnp/cover4.jpg">
      </div>
      <div class="hideRight">
        <img src="https://s16.postimg.org/fij8qay4l/cover3.jpg">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
html, body, main {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#carousel {
  position: relative;
  height: 400px;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
}
#carousel div {
  position: absolute;
  transition: transform 1s, left 1s, opacity 1s, z-index 0s;
  opacity: 1;
}
#carousel div img {
  width: 400px;
  transition: width 1s;
}
#carousel div.hideLeft {
  left: 0%;
  opacity: 0;
  transform: translateY(50%) translateX(-50%);
}
#carousel div.hideLeft img {
  width: 200px;
}
#carousel div.hideRight {
  left: 100%;
  opacity: 0;
  transform: translateY(50%) translateX(-50%);
}
#carousel div.hideRight img {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"carousel"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"carousel" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"carousel"
Bootstrap 3.0.0 Snippet by evarevirus