Bootstrap Snippet gallery using HTML CSS jQuery

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
<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 ---------->
<div class="slider">
  <figure class="slider__item"><img class="slider__image" src="https://unsplash.it/600/360?image=#{itemsImg}"/>
    <figcaption class="slider__caption">Image - 533</figcaption>
  </figure>
  <figure class="slider__item"><img class="slider__image" src="https://unsplash.it/600/360?image=#{itemsImg}"/>
    <figcaption class="slider__caption">Image - 623</figcaption>
  </figure>
  <figure class="slider__item"><img class="slider__image" src="https://unsplash.it/600/360?image=#{itemsImg}"/>
    <figcaption class="slider__caption">Image - 419</figcaption>
  </figure>
  <figure class="slider__item"><img class="slider__image" src="https://unsplash.it/600/360?image=#{itemsImg}"/>
    <figcaption class="slider__caption">Image - 490</figcaption>
  </figure>
  <figure class="slider__item"><img class="slider__image" src="https://unsplash.it/600/360?image=#{itemsImg}"/>
    <figcaption class="slider__caption">Image - 695</figcaption>
  </figure>
  <figure class="slider__item"><img class="slider__image" src="https://unsplash.it/600/360?image=#{itemsImg}"/>
    <figcaption class="slider__caption">Image - 458</figcaption>
  </figure>
  <figure class="slider__item"><img class="slider__image" src="https://unsplash.it/600/360?image=#{itemsImg}"/>
    <figcaption class="slider__caption">Image - 702</figcaption>
  </figure>
</div>
<div class="slider__btn"></div>
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 {
  height: 100%;
}
body {
  background-color: #222;
  overflow: hidden;
}
img {
  max-width: 100%;
  height: auto;
}
.slider {
  width: 90vmin;
  height: 90vmin;
  -webkit-perspective: 100vmin;
          perspective: 100vmin;
  margin: auto;
  -webkit-perspective-origin: top center;
          perspective-origin: top center;
  position: relative;
  box-sizing: border-box;
}
.slider__item {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: 15vmin;
  box-sizing: border-box;
  -webkit-transition: -webkit-transform 0.18s ease;
  transition: -webkit-transform 0.18s ease;
  transition: transform 0.18s ease;
  transition: transform 0.18s ease, -webkit-transform 0.18s ease;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
$(function(){
    var btn = $(".slider__btn");
    
    btn.on("click",function(){
        $(".slider__item").first().clone().appendTo(".slider");
        $(".slider__image").first().css({transform: "rotateX(-180deg)", opacity: 0});
        setTimeout(function(){
            $(".slider__item").first().remove();
        },200);
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"gallery"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"gallery" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"gallery"
Bootstrap 3.0.0 Snippet by evarevirus