Bootstrap Snippet Simple bootstrap slider using HTML CSS jQuery

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/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<!-- slider -->
<div class="slider">
  <!-- slide -->
  <ul>
    <li class="active">
      <div class="slide"><div class="container">
  <h2>Simple bootstrap slider</h2>
  <div class="slide-center">
    <p>scrambled it to make a type specimen book has survived not only five centuries when an unknown printer took a galley
      five centuries</p>
    <button>Button One</button>
    <button>Button Two</button>
    <div class="images">
      <img src="https://vetstreet-brightspot.s3.amazonaws.com/a0/63/f621ea184427b644a2ca63fcd1ff/Purple-butterfly-Thinkstock-97503533-335lc052213.jpg" width="100" height="100">
      <img src="https://s-media-cache-ak0.pinimg.com/236x/c6/69/61/c66961a6f181cd3c28d005c714d3d7cc.jpg" width="100" height="100">
      <img src="https://1.bp.blogspot.com/_LFcmuXNnYi0/SFcZoMa_vRI/AAAAAAAAECk/wD4ekEBPmrE/s400/6-16-08-GBBD-Daisy.jpg" width="100" height="100">
      <img src="http://www.cherlaan.com/ekmps/shops/rhanley/resources/Design/red-feather-butterfly-with-metallic-gold-centre-13cm-849-p.jpg" width="100" height="100">
    </div>
  </div>
  <h2>text printing esetting </h2>
</div></div>
      </li>
    <li>
      <div class="slide"><div class="container">
  <h2>Lorem Ipsum dummy</h2>
  <div class="slide-center">
    <p>scrambled it to make a type specimen book has survived not only five centuries when an unknown printer took a galley
      five centuries</p>
    <button>Button One</button>
    <button>Button Two</button>
    <div class="images">
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
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  list-style: none;
  font-family: 'Gudea', sans-serif;
  font-weight: normal
}
h1 {
    width: 100%;
    height: 100vh;
  text-align: center;
  margin-top: 40px;
  font-size: 60px;
  color: #fff;
    background: rgba(239, 105, 116, 1);
    margin: 0;
    padding-top: 40vh
}
h1 a {
  font-size: 14px;
  color: #ccc;
  background: #e5626b;
  border-radius: 5px;
  padding: 2px 5px;
  border: 7px solid #e5626b;
  text-decoration: none
}
h1 a:hover {
  text-decoration: underline
}
.slider {
  width: 100%;
  height: 100vh;
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
   $(function() {
    "use strict";
    
    var body = $("body"),
        active = $(".slider ol li, .slider .controll"),
        controll = $(".slider .controll"),
        playpause = $(".playpause"),
        sliderTime = 1,
        sliderWait = 10000,
        i = 999, o,
        slideStart = $(".slider ul li:first"),
        autoRun,
        stop = false;
    // Reset
    slideStart.css("left", 0);
    
    function slideGSAP(parent) {
    "use strict";
    var str = parent.find(".slide p"), arr = str.text().split(" ");
    for (o = 0; o < arr.length; o++) {
      arr[o] = "<span>" + arr[o] + "</span>";
    }
    str.html(arr.join(" "));
    var tl = new TimelineLite();
    tl
      .set(parent.find(".slide"), { perspective: 400 })
        
      .set(parent.find(".slide h2:first"), { x: 0, autoAlpha: 1 })
      .set(parent.find(".slide h2:last"), { x: 0, autoAlpha: 1 })
      .set(parent.find(".slide p span"), { cycle: { color: ["white", "white"] }, opacity:1, top: 0 })
      .set(parent.find(".slide button:first"), { rotationY: 0, autoAlpha: 1 })
      .set(parent.find(".slide button:last"), { rotationY: 0, autoAlpha: 1 })
      .set(parent.find(".slide img"), { scale: 1, rotation: 1, borderRadius: 1, autoAlpha: 1 })
        
      .from(parent.find(".slide h2:first"), 1.5, { x: -200, autoAlpha: 0 })
      .from(parent.find(".slide h2:last"), 1.5, { x: 200, autoAlpha: 0 }, 0)
      .staggerFrom(parent.find(".slide p span"), 1, { cycle: { color: ["red", "yellow"] }, opacity:0, position: 'relative', cycle: {top: [-80, -40]}, left: 50 }, 0.009, "-=1")
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Simple bootstrap slider"
Bootstrap 3.3.0 Snippet by AllinJS

Related: See More

Questions / Comments:

"Simple bootstrap slider" Bootstrap 3.3.0 Snippet by AllinJS

Related: See More

Questions / Comments:

"Simple bootstrap slider"
Bootstrap 3.3.0 Snippet by AllinJS