Bootstrap Snippet slide anime 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
<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="wrap">
        <div class="shape"></div>
        <div class="shape2">This will be where you can place the text to go down the right hand side of the slider</div>
        <div class="slider">
            <div class="slide">
                <img src="http://lorempixel.com/800/600" />
                <h1>Slide 1</h1>
                <p>Text to do with slide 1</p>
            </div>
            <div class="slide">
                <img src="http://lorempixel.com/600/400" />
                <h1>Slide 2</h1>
                <p>Text to do with slide 2</p>
            </div>
            <div class="slide">
                <img src="http://lorempixel.com/1200/800" />
                <h1>Slide 3</h1>
                <p>Text to do with slide 3</p>
            </div>
            <div class="slide">
                <img src="http://lorempixel.com/1800/1200" />
                <h1>Slide 4</h1>
                <p>Text to do with slide 4</p>
            </div>
        </div>
    </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
.wrap {
    position:relative;
    height:400px;
    width:100%;
    margin:0 auto;
    max-width:1024px;
    
}
.shape {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:50%;
    overflow:hidden;
    z-index:10;
}
.shape:after {
    content:"";
    position:absolute;
    top:10%;
    left:0;
    width:100%;
    height:90%;
    border-radius:0 50% 0 0;
    box-shadow: 0 0 0 999px lightgray;
}
.shape2 {
    position:absolute;
    top:0;
    left:50%;
    height:100%;
    width:50%;
    background:lightgray;
    border-radius:0 0 0 50%;
    z-index:10;
    box-shadow: 20px 10px 20px 5px black;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"slide anime"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"slide anime" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"slide anime"
Bootstrap 3.0.0 Snippet by evarevirus