Bootstrap Snippet AnirudhaBhowmik 3d 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.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ---------->
<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 ---------->
<!-- Start Slider -->
<section id= "slider">
  <!-- Start Slider Checked -->
  <input type= "radio" name="slider" id= "slide-1-radio" checked />
  <input type= "radio" name="slider" id= "slide-2-radio" />
  <input type= "radio" name="slider" id= "slide-3-radio" />
  <!-- End Slider Checked -->
  <!-- Start Slides -->
  <div class= "slides">
    <div class= "slide">
      <a href= "https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg"><img src= "http://i1079.photobucket.com/albums/w520/hurricane_h10/banner-2_zpsbhnq7ilq.jpg" alt="slide-1" /></a>
    </div>
    <div class= "slide">
      <a href= "https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg"><img src= "http://i1079.photobucket.com/albums/w520/hurricane_h10/banner-4_zps0l2k6veh.jpg" alt="slide-1" /></a>
    </div>
    <div class= "slide">
      <a href= "https://www.youtube.com/channel/UCXTfDJ60DBmA932Du6B1ydg"><img src= "http://i1079.photobucket.com/albums/w520/hurricane_h10/banner-1_zpsdrbee0ys.jpg" alt="slide-1" /></a>
    </div>
  </div>
  <!-- End Slides -->
  <!-- Start Slider Control -->
  <!-- Start Prevese Arrow -->
  <div class="prev-arrow arrow">
    <label for= "slide-1-radio" id= "prev-1-arrow">
      <i class= "fa fa-arrow-left"></i>
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
*
{
  margin: 0;
  padding: 0;
  border: 0
}
body{background-color: #AF392C}
img
{
  display: block;
  width: 100%;
  height: 100%
}
/**-------------- Start Slider ---------------**/
#slider
{
    width: 100%;
    height: 400px;
    position: relative;
    margin: auto;
    padding: 100px 0
}
#slider input{display: none}
#slider .slides
{
    position:absolute; 
    width: 100%;
    height: 400px
}
#slider .slides .slide
{
    width: 33.33333333%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"AnirudhaBhowmik 3d slider"
Bootstrap 4.1.1 Snippet by anirudhabhowmik

Related: See More

Questions / Comments:

"AnirudhaBhowmik 3d slider" Bootstrap 4.1.1 Snippet by anirudhabhowmik

Related: See More

Questions / Comments:

"AnirudhaBhowmik 3d slider"
Bootstrap 4.1.1 Snippet by anirudhabhowmik