Bootstrap Snippet ASnirudha Bhowmik full page autometic 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="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="content-slider" class="clr">
        <div class="wrap-slider clr">   
        <h1 class="main-title">automatic slider css only</h1>
        
<!--    ========================Thumbnail ControlNav======================================    -->           
            <input type="radio" id="a-1" name="a" >         
            <input type="radio" id="a-2" name="a" >         
            <input type="radio" id="a-3" name="a" >
            <input type="radio" id="a-4" name="a" >
            
            <nav id="main">
          <label for="a-1" class="first"></label>
          <label for="a-2" class="first"></label>
          <label for="a-3" class="first"></label>
          <label for="a-4" class="first"></label>
          <!-- <label for="a-5" class="first"></label> -->
            </nav>
<!--    ==============================================================    -->
            <nav id="control">
          <label for="a-1" ></label>
          <label for="a-2" ></label>
          <label for="a-3" ></label>
          <label for="a-4" ></label>
          <!-- <label for="a-5" class="first"></label> -->
            </nav>
<!--    ==============================================================    -->
                <!--    IMAGE NAVIGATION pic -->
            <span id="b-1" class="th" tabindex="10">
                <img src="https://github.com/lime7/slider/blob/master/images/pic-1.png?raw=true" alt="" id="p-1">
                <div class="title-1">
            <h1>PAK FA T-50</h1>
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
#content-slider {
    line-height: 1;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 10px;  /* font-size 1em = 10px = 62.5%*/
    /*background: #4e616d;*/
}
/* ------------------------------- > Clearfix */
.clr {
    *zoom: 1;
}
.clr:before,
.clr:after {
    display: table;
    content: "";
    line-height: 0;
}
.clr:after {
    clear: both;
}
/* ---------------------------------> wrapper */
#content-slider .wrap-slider {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    max-width: 1200px;
    /*max-height: 400px;*/
    height: 100%;
    width: 100%;
    margin: 0px auto;
    position: relative;
    text-align: right;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"ASnirudha Bhowmik full page autometic slider"
Bootstrap 4.0.0 Snippet by anirudhabhowmik

Related: See More

Questions / Comments:

"ASnirudha Bhowmik full page autometic slider" Bootstrap 4.0.0 Snippet by anirudhabhowmik

Related: See More

Questions / Comments:

"ASnirudha Bhowmik full page autometic slider"
Bootstrap 4.0.0 Snippet by anirudhabhowmik