Bootstrap Snippet Slide Giratório 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 ---------->
<div class="carousel_wrapper">
  <div class="carousel">
    <div class="slide one">
      <img src="https://i.imgur.com/zZe3pmt.png" />
    </div>
    <div class="slide two">
      <img src="https://i.imgur.com/saxtbe5.png" />
    </div>
    <div class="slide three">
      <img src="https://i.imgur.com/edqikTT.png" />
    </div>
    <div class="slide four">
      <img src="https://i.imgur.com/dvfmMua.png" />
    </div>
    <div class="slide five">
      <img src="http://hdwallpaperfun.com/wp-content/uploads/2014/08/Outer-Space-Wallpaper-Background-HQ.jpg" />
    </div>
    <div class="slide six">
      <img src="https://images.unsplash.com/photo-1479409286066-c0b2f4f4a332" />
    </div>
    <div class="slide seven">
      <img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/space-wallpaper-4.jpg" />
    </div>
    <div class="slide eight">
      <img src="http://shareyourwallpapers.com/upload/wallpaper/3d-and-digital-art/3d-space/3d-space_f48db6ca.jpg" />
    </div>
    <div class="slide nine">
      <img src="https://images.unsplash.com/photo-1446776709462-d6b525c57bd3" />
    </div>
  </div><!-- / .carousel -->
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
*, *::before, *::after {
  box-sizing: border-box; /* Too much math below to be concerned with standard CSS Box 
    Model element dimensions calculations. Let's not have to account for padding/margins/borders on anything here. */
}
.carousel_wrapper {
  position: relative;
  width: 320px;
  margin: 0px auto 0 auto;
  perspective: 1000px;
  margin-bottom:350px;
}
.carousel {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(-360deg) translateZ(-412px); /* add reverse transformation from the slides */
  animation: swirl 40s steps(10000, end) infinite; /* run `swirl` animation (defined at end of CSS) infitely, with animation lasting 40 seconds, and 10,000 steps between the FROM and TO values in the animation for a smooth rotation */
}
.slide {
  position: absolute;
  top: -10px;
  left: 10px;
  width: 300px;
  height: 187px;
}
.slide img {
  width: 280px;
  height: 175px;
  border: 3px inset rgba(47, 115, 201, 0.75);
  box-shadow: 0px 2px 15px 0px rgba(116,186,190,0.5);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Slide Giratório"
Bootstrap 4.1.1 Snippet by alanvr

Related: See More

Questions / Comments:

"Slide Giratório" Bootstrap 4.1.1 Snippet by alanvr

Related: See More

Questions / Comments:

"Slide Giratório"
Bootstrap 4.1.1 Snippet by alanvr