daSlider/index.html at master · anarchyta/daSlider · GitHub

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>daSlider</title>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="assets/css/animate.min.css"/>
    <link rel="stylesheet" href="assets/css/main.css"/>
  </head>
  <body>
    <header class="header jumbotron mb0">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-sm-4 col-md-5 col-lg-5">
            <div class="text-center text-right-pc">
              <h1>daSlider</h1>
              <p class="lead">A responsive slider jQuery plugin<br/>with CSS animations</p>
              <a class="btn btn-lg btn-default" href="#"><i class="glyphicon glyphicon-download-alt"></i> Download</a>
            </div>
          </div>
          <div class="col-xs-12 col-sm-8 col-md-7 col-lg-7">
            <div class="laptop">
              <div class="daSlider-container intro">
                <div class="item"><img src="assets/img/1.1.jpg" alt="example image" /></div>
                <div class="item"><img src="assets/img/1.2.jpg" alt="example image" /></div>
                <div class="item"><img src="assets/img/1.3.jpg" alt="example image" /></div>
                <div class="item"><img src="assets/img/1.4.jpg" alt="example image" /></div>
              </div>
            </div>
          </div>
        </div>
        <!-- .row -->
      </div>
      <!-- .container -->
    </header>
    <!-- .jumbotron -->
    <section class="one">
      <div class="container text-center">
        <h2 class="mt0">What"s the difference with other sliders?</h2>
        <p class="text-info lead">This plugin does not use jQuery animations. Only CSS3, because performance matters.<br/>
          No need to calculate distances, sizes or whatever, only add and remove classes to elements to animate them.<br/>
          It couldn"t be easier!</p>
        <ul class="text-info lead list-unstyled">
          <li>Only 1 js file</li>
          <li>1Kb minified</li>
          <li>Responsive</li>
          <li>Multiple effects (more than 60!)</li>
          <li>Works with html, images... whatever you want to animate</li>
        </ul>
      </div>
    </section>
    <section class="two">
      <div class="container text-center">
        <h2 class="mt0">Testimonial Example</h2>
          <div class="daSlider-container testimonial">
            <blockquote class="item">Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.</blockquote>
          </div>
      </div>
    </section>
    <section class="two">
      <div class="container text-center">
        <h2 class="mt0">More Example</h2>
        <div class="row">
          <div class="col-md-6">
            <div class="ipad">
              <div class="daSlider-container moreDemo1">
                <div class="item"><img src="assets/img/2.1.jpg" alt="example image" /></div>
                <div class="item"><img src="assets/img/2.2.jpg" alt="example image" /></div>
                <div class="item"><img src="assets/img/2.3.jpg" alt="example image" /></div>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="ipad">
              <div class="daSlider-container moreDemo2">
                <div class="item"><img src="assets/img/3.1.jpg" alt="example image" /></div>
                <div class="item"><img src="assets/img/3.2.jpg" alt="example image" /></div>
                <div class="item"><img src="assets/img/3.3.jpg" alt="example image" /></div>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="ipad">
              <div class="daSlider-container moreDemo3">
                <div class="item"><img src="assets/img/4.1.jpg" alt="example image" /></div>
                <div class="item"><img src="assets/img/4.2.jpg" alt="example image" /></div>
                <div class="item"><img src="assets/img/4.3.jpg" alt="example image" /></div>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="ipad">
              <div class="daSlider-container moreDemo4">
                <div class="item"><img src="assets/img/5.1.jpg" alt="example image" /></div>
                <div class="item"><img src="assets/img/5.2.jpg" alt="example image" /></div>
                <div class="item"><img src="assets/img/5.3.jpg" alt="example image" /></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <footer class="footer">
      <div class="container">
        <p class="copyright">© <a href="https://themeforest.net/user/anarchyta?ref=anarchyta">Dian Anarchyta</a></p>
      </div>
    </footer>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/daSlider.min.js"></script>
    <script src="assets/js/main.min.js"></script>
  </body>
</html>