Bootstrap Snippet carousel js 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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
  <link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.css
" />
    <link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.css
" />
<script async src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.js
"></script>
<!-- / photos from stocksnap.io -->
<div class='owl-carousel' id='owlCarousel'>
  <div class='slide'>
    <img class='owl-item-bg' src='https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/30LJYJGOMY.jpg'>
    <div class='slide-content'>
      <div class='overlay'></div>
      <h3>Welcome</h3>
      <h2>Mea Vocibus Eloquentiam</h2>
      <p>erant aperiri sapientem senserit quo et. Sea aliquid interpretaris te, in his erant aperiri sapientem</p>
    </div>
  </div>
  <div class='slide'>
    <img class='owl-item-bg' src='https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/9UX9KSL4AB.jpg'>
    <div class='slide-content'>
      <div class='overlay'></div>
      <h3>Welcome</h3>
      <h2>Aperiri Sapientem</h2>
      <p>Nam ante est, euismod id consequat eget, congue et lacus, Sed consequat laoreet purus.</p>
    </div>
  </div>
  <div class='slide'>
    <img class='owl-item-bg' src='https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/DI64TAJTIS.jpg'>
    <div class='slide-content'>
      <div class='overlay'></div>
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
html,body{
  width: 100%;
  height: 100%;
}
/* sliders container */
#owlCarousel, 
.owl-stage-outer, 
.owl-stage,
.owl-item-bg,
.owl-item { 
  height: 100%;
  min-height: 200px;
}
#owlCarousel{
  width: 100%;
  overflow: hidden;
  position: relative;
}
#owlCarousel:hover .owl-nav{
    opacity: 1;
}
/* slider container */
.owl-item {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
/*     -webkit-transform: translateZ(0) scale(1.0, 1.0); */
}
.owl-item .owl-item-bg {
    width: 100%;
    display: inline-block;
    position: absolute;
    background-size: 100% 100%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"carousel js"
Bootstrap 4.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"carousel js" Bootstrap 4.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"carousel js"
Bootstrap 4.0.0 Snippet by evarevirus