material-design-kit/demo/src/html/pages/carousel.html at master · csseditor/material-design-kit · 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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
---
title: Carousel
---
{% extends "layouts/demo.html" %}
{% block page %}

  <style>
    body {
      background-color: #ddd;
      padding: 1rem 0;
    }
    @media (min-width: 768px) {
      body {
        padding: 2rem 0;
      }
    }
    .card {
      background-color: #fff;
      position: relative;
      overflow: hidden;
      margin-bottom: 2rem;
    }
    .card__title {
      font-size: 1.5rem;
      font-weight: 300;
      margin: 0;
      line-height: 1;
    }
    .card__title--raised {
      position: absolute;
      top: 0;
      left: 0;
      transition: transform .2s;
      transform: translate3d(0, -100%, 0);
      color: #fff;
      text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
      margin: 0;
      padding: 1.25rem;
      font-size: 2rem;
    }
    .card__block {
      padding: 1rem;
      position: relative;
    }
    .card-image--overlay {
      position: relative;
      z-index: 0;
    }
    .card-image--overlay::after {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      content: '';
      background-color: rgba(0, 0, 0, .5);
    }
    .avatar {
      margin-right: 1rem;
    }
    @media (max-width: 554px) {
      .avatar img {
        max-width: 40px;
      }
    }
    blockquote {
      margin-bottom: 0;
      display: flex;
    }
    blockquote p {
      flex: 1;
    }
    .img-fluid {
      max-width: none;
      width: 100%;
    }
  </style>


  <div class="container">
    <h1>Carousel</h1>
    <p>A component for cycling through elements with Mouse Grab (desktop) and Touch support.</p>
    <hr>
    <div class="row mdk-js-carousel">
      <div class="mdk-carousel__content">
        {% for item in [1,2,3] %}
        <div class="col-xs-12 col-md-6">
          <div class="card card__block">
            <blockquote>
              <div class="avatar">
                <img src="https://api.adorable.io/avatars/80/dude{{ item }}%40adorable.io" alt="avatar" class="img-circle">
              </div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia distinctio reiciendis iusto id, doloribus optio soluta laborum nobis dolor tempore velit porro maiores eveniet voluptas officia ipsa magnam aliquam. Perferendis?</p>
            </blockquote>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>

    <div class="row mdk-js-carousel">
      <div class="mdk-carousel__content">
        {% for item in [1,2,3,4,5,6,7,8] %}
        <div class="col-xs-12 col-sm-6 col-md-4 col-xl-3">
          <div class="card">
            <img class="img-fluid card-img-top" src="https://unsplash.it/500/300?random&amp;{{ item }}" alt="Image">
            <div class="card__block">
              <h4 class="card__title">Card title</h4>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>

    <div style="max-width: 500px; margin: 0 auto;">
      <div class="row mdk-js-carousel">
        <div class="mdk-carousel__content">
          {% for item in [4,5,6] %}
          <div class="col-xs-12">
            <div class="card">
              <div class="card-img card-image--overlay">
                <img class="img-fluid" src="https://unsplash.it/500/300?random&amp;{{ item }}" alt="Image">
              </div>
              <div class="card__block" style="padding-top: 0;
              padding-bottom: 0;">
                <h4 class="card__title card__title--raised">Card title</h4>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>

{% endblock %}