Bootstrap Snippet creative slider with text and image using HTML CSS Javascript

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 rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
 <div class="hero-wrapper">
      <div class="hero-rectangle hero-rectangle--black hero-rectangle--big"></div>
      <div class="hero-rectangle hero-rectangle--primary hero-rectangle--small"></div>
      <div class="hero-container">
        <div class="hero-left-wrapper">
          <div class="hero-left-carousel">
            <div class="hero-left-carousel-item"><span class="title-small">RECENT PROJECT</span><span class="title">Build</span><span class="subtitle">STRONG STRUCTURES</span>
              <p class="description">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small.</p>
              <div class="underlined-link-wrapper"><a class="underlined-link" href="#">READ MORE</a></div>
            </div>
            <div class="hero-left-carousel-item"><span class="title-small">RECENT PROJECT</span><span class="title">Design</span><span class="subtitle">MODERN OFFICES</span>
              <p class="description">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small.</p>
              <div class="underlined-link-wrapper"><a class="underlined-link" href="#">READ MORE</a></div>
            </div>
            <div class="hero-left-carousel-item"><span class="title-small">RECENT PROJECT</span><span class="title">Trust</span><span class="subtitle">OUR EXPERIENCE</span>
              <p class="description">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small.</p>
              <div class="underlined-link-wrapper"><a class="underlined-link" href="#">READ MORE</a></div>
            </div>
          </div>
        </div>
        <div class="hero-right">
          <div class="hero-carousel-navigation">
            <p class="text">
              +90 553 760 35 39<span>or</span>hello@themeflex.com</p>
            <button class="hero-carousel-navigation-btn next"><i class="fas fa-arrow-right"></i></button>
            <button class="hero-carousel-navigation-btn prev"><i class="fas fa-arrow-left"></i></button>
          </div>
          <div class="hero-right-carousel">
            <div class="hero-right-carousel-item"><img alt="StrucFlex" src="http://themeflex.com/strucflex-demo/en/structures/assets/img/heroslide_1.png"></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
* {
  margin: 0;
  padding: 0;
}
.real-fluid {
  padding-left: 0;
  padding-right: 0;
}
.container {
  max-width: 1200px;
}
html,
body {
  height: 100%;
}
body {
  background: #eeeeee;
  font-family: 'Overpass', sans-serif;
}
.slick-slider {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}
.underlined-link {
  color: #757575;
  font-size: 14px;
  letter-spacing: 2.8px;
  position: relative;
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
jQuery(function($) {
  "use strict";
  var _extends =
    Object.assign ||
    function(target) {
      for (var i = 1; i < arguments.length; i++) {
        var source = arguments[i];
        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
          }
        }
      }
      return target;
    };
  // parallax effect
  var parallaxEffect = function parallaxEffect(container, els) {
    var moveX, moveY;
    if (container && els) {
      container.addEventListener("mousemove", function(e) {
        moveX = (e.clientX * -1) / 20;
        moveY = (e.clientY * -1) / 20;
        els.forEach(function(el, index) {
          if (index % 2 != 0) {
            moveX = -1 * moveX;
            moveY = -1 * moveY;
          }
          el.style.transform = "translate3d(" + moveX + "px," + moveY + "px,0)";
        });
      });
    }
  };
  // isScrolledIntoView
  var isScrolledIntoView = function isScrolledIntoView(el) {
    var rect = el.getBoundingClientRect(),
      elemTop = rect.top,
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"creative slider with text and image"
Bootstrap 4.1.1 Snippet by koshikojha

Related: See More

Questions / Comments:

"creative slider with text and image" Bootstrap 4.1.1 Snippet by koshikojha

Related: See More

Questions / Comments:

"creative slider with text and image"
Bootstrap 4.1.1 Snippet by koshikojha