Bootstrap Snippet slider 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 ---------->
<div class="container">
    
    <div data-am-fadeshow="next-prev-navigation">
        <!-- Radio -->
        <input type="radio" name="css-fadeshow" id="slide-1" />
        <input type="radio" name="css-fadeshow" id="slide-2" />
        <input type="radio" name="css-fadeshow" id="slide-3" />
        <!-- Slides -->
        <div class="fs-slides">
            <div class="fs-slide" style="background-image: url(https://images.unsplash.com/photo-1460500063983-994d4c27756c?crop=entropy&fit=crop&fm=jpg&h=1325&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=2550);">
                <!-- Add content to images (sample) -->
                <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-family: sans-serif; text-align: center; text-shadow: 0 0 20px rgba(0,0,0,0.5);">
                    <h1 style="margin-top: 0; margin-bottom: 0.8vw; font-size: 5vw; font-weight: bold;">CSS Fadeshow</h1>
                    <p style="font-size: 2vw; font-weight: 100; margin-top: 0;">Easy to implement and use on <strong>your</strong> site!</p>
                </div>
            </div>
            <div class="fs-slide" style="background-image: url(https://images.unsplash.com/photo-1440557653082-e8e186733eeb?crop=entropy&fit=crop&fm=jpg&h=1325&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=2500);"></div>
            <div class="fs-slide" style="background-image: url(https://images.unsplash.com/photo-1449057528837-7ca097b3520c?crop=entropy&fit=crop&fm=jpg&h=1325&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=2500);"></div>
        </div>
        <!-- Quick Navigation -->
        <div class="fs-quick-nav">
            <label class="fs-quick-btn" for="slide-1"></label>
            <label class="fs-quick-btn" for="slide-2"></label>
            <label class="fs-quick-btn" for="slide-3"></label>
        </div>
        
        <!-- Prev Navigation -->
        <div class="fs-prev-nav">
            <label class="fs-prev-btn" for="slide-1"></label>
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
@charset "UTF-8";
/*
 * CSS Fadeshow by @alexerlandsson
 * This is a fadeshow built in CSS and with customization in focus.
 * Supports quick navigation, prev/next navigation and autoplay.
 * 
 * For better documentation and implementation guide, check out the GitHub repository:
 * https://github.com/alexerlandsson/css-fadeshow
*/
/*
 * ===== VARIABLES =====
 *
 * Change these variables to match your preferences. For a more detailed
 * description of what each variable do, visit https://github.com/alexerlandsson/css-fadeshow
 */
/*
 * ===== MIXINS =====
 *
 * This section contains mixin used
 * Do not change anything here unless you know what you are doing.
 */
/* Mixins to handle prefixes */
/* Mixins to handle Quick Navigation Button states */
/*
 * ===== FADESHOW =====
 *
 * Base functionality for the fadeshow.
 * Do not change anything here unless you know what you are doing.
 */
[data-am-fadeshow] {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
  /* Slides */
  /* Quick Navigation */
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"slider"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"slider" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"slider"
Bootstrap 3.0.0 Snippet by evarevirus