<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">
<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">
<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">
<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">
<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>
</ul>
<ol>
<!-- point -->
<li class="active"><i class="fa fa-circle-o"></i></li>
<li><i class="fa fa-circle-o"></i></li>
<li><i class="fa fa-circle-o"></i></li>
<li><i class="fa fa-circle-o"></i></li>
<li><i class="fa fa-circle-o"></i></li>
<!-- playpause -->
<i class="fa playpause fa-pause-circle-o" title="pause"></i>
</ol>
<!-- controll -->
<span class="controll active"></span>
<span class="controll"></span>
</div>
<!-- title -->
<h1>Slider</h1>
* {
-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;
position: relative;
}
.slider ul, .slider ul li {
width: 100%;
height: 100%
}
.slider ul {
position: relative;
overflow: hidden
}
.slider ul li {
position: absolute;
top: 0;
left: -100%;
background-size: cover; /* semon #f98686 */
background-position: center;
color: #fff;
font-family: serif;
}
.slider ul li:first-of-type {
background-image: url("http://www.misr5.news/wp-content/uploads/2015/10/6957804-girl-children-blonde-blue-eyes-autumn-mood.jpg")
}
.slider ul li:nth-of-type(2) {
background-image: url("https://static.pexels.com/photos/87452/flowers-background-butterflies-beautiful-87452.jpeg")
}
.slider ul li:nth-of-type(3) {
background-image: url("http://www.tsitut.net/wp-content/uploads/2016/04/born-to-stand-out.jpg")
}
.slider ul li:nth-of-type(4) {
background-image: url("http://arunnath.com/i/2017/03/landscape-tumblr-wallpapers-high-quality-resolution.jpg")
}
.slider ul li:last-of-type {
background-image: url("https://img1.etsystatic.com/023/1/6294118/il_340x270.568118221_inex.jpg")
}
.slider .controll {
width: 40px;
height: 40px;
position: absolute;
top: 44%;
border-bottom: 3px solid #333;
border-left: 3px solid #333;
cursor: pointer;
color: #333;
z-index: 999999
}
.slider .controll:first-of-type {
transform: rotate(45deg);
left: 20px
}
.slider .controll:last-of-type {
transform: rotate(225deg);
right: 20px
}
.slider .controll:hover, .slider .controll.active {
border-color: #fff;
outline-color: #f00
}
.slider ol {
text-align: center;
padding-top: 10px;
position: absolute;
bottom: 10px;
width: 100%;
z-index: 999999
}
.slider ol li {
display: inline-block;
margin-right: 5px;
}
.slider ol .fa {
font-size: 15px;
color: #fff;
cursor: pointer;
font-weight: normall
}
.slider ol li:hover .fa:before, .slider ol li.active .fa:before {
content: "\f111"
}
@media(max-width: 490px) {
h1 {font-size: 45px}
}
@media(max-width: 350px) {
h1 {font-size: 25px}
}
/* VIRSION 03 */
.slide {
width: 100%;
height: 100vh;
min-height: 550px;
background-image: linear-gradient(rgba(239, 105, 116, .75), rgba(239, 105, 116, .3), rgba(239, 105, 116, .3), rgba(239, 105, 116, .3), rgba(239, 105, 116, .75));
background-size: cover;
text-align: center;
color: #fff;
position: relative;
overflow: hidden
}
.slide .container {
position: relative;
width: 100%;
height: 100%;
max-width: 1000px;
margin: auto;
padding: 0 10px;
text-align:center;
}
.slide h2 {
font-weight: normal;
font-size: 50px;
text-transform: uppercase;
position: absolute;
}
.slide h2:first-of-type {
top: 15px;
left: 15px
}
.slide h2:last-of-type {
bottom: 50px;
right: 15px
}
.slide .slide-center {
width: 100%;
max-width: 550px;
text-align: center;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%)
}
.slide p {
text-align: left;
line-height: 175%;
margin-bottom: 15px;
padding: 15px;
font-size: 22px
}
.slide button {
width: 125px;
height: 35px;
margin: 0 10px 10px;
text-transform: uppercase;
color: #eee;
background: rgba(239, 105, 116, 1);
border-radius: 5px;
border: none;
outline: none;
cursor: pointer;
font-weight: bold
}
.slide button:hover {
opacity: 0.9
}
.slide img {
margin: 15px 7px 7px
}
@media(max-width: 850px) {
.slide h2 {font-size: 40px}
.slide p {font-size: 20px}
}
@media(max-width: 700px) {
.slide h2 {font-size: 30px; font-weight: bold}
.slide p {font-size: 20px}
}
@media(max-width: 600px) {
.slide h2 {font-size: 25px}
.slide p {font-size: 17px}
}
@media(max-width: 450px) {
.slide h2 {font-size: 20px; font-weight: bold}
.slide p {font-size: 15px}
}
$(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")
.from(parent.find(".slide button:first"), 1, { rotationY: -360, autoAlpha: 0 }, "-=1")
.from(parent.find(".slide button:last"), 1, { rotationY: 360, autoAlpha: 0 }, "-=1")
.staggerFrom(parent.find(".slide img"), 1, { scale: 0, rotation: -180, borderRadius: 100, autoAlpha: 0 }, 0.2, "-=0.5");
}
slideGSAP(slideStart);
// Run Slider
function runSlider(what) {
what.addClass("active").siblings("li, span").removeClass("active");
}
// slider gsap
function gsapSlider(whose, left) {
i++;
if (whose.hasClass("active")) {
TweenMax.fromTo(
".slider ul li.active",
sliderTime,
{ zIndex: i, left: left },
{ left: 0 }
);
}
}
// Active
active.on("click", function() {
runSlider($(this));
slideGSAP($(this));
});
// Arrow left
controll.first().on("click", function() {
var slide = $(".slider ul li.active, .slider ol li.active").is(
":first-of-type"
)
? $(".slider ul li:last, .slider ol li:last")
: $(".slider ul li.active, .slider ol li.active").prev("li");
runSlider(slide);
slideGSAP(slide);
gsapSlider(slide, "100%");
});
// Arrow right
controll.last().on("click", function() {
var slide = $(".slider ul li.active, .slider ol li.active").is(
":last-of-type"
)
? $(".slider ul li:first, .slider ol li:first")
: $(".slider ul li.active, .slider ol li.active").next("li");
runSlider(slide);
slideGSAP(slide);
gsapSlider(slide, "-100%");
});
// Point
$(".slider ol li").on("click", function() {
var start = $(".slider ul li.active").index();
var slide = $(".slider ul li").eq($(this).index());
runSlider(slide);
slideGSAP(slide);
var end = $(".slider ul li.active").index();
if (start > end) {
gsapSlider(slide, "100%");
}
if (start < end) {
gsapSlider(slide, "-100%");
}
});
// Auto run slider
function autoRunSlider() {
if (body.css("direction") === "ltr" && stop === false) {
autoRun = setInterval(function() {
controll.last().click();
}, sliderWait);
} else if (body.css("direction") === "rtl" && stop === false) {
autoRun = setInterval(function() {
controll.first().click();
}, sliderWait);
}
}
autoRunSlider();
// When hover
active.on("mouseenter", function() {
if (stop === false) {clearInterval(autoRun);}
});
active.on("mouseleave", function() {
if (stop === false) {autoRunSlider();}
});
// play pause click
playpause.on("click", function() {
$(this).toggleClass("fa-play-circle-o fa-pause-circle-o");
if (playpause.hasClass("fa-play-circle-o")) {
stop = true;
clearInterval(autoRun);
$(this).attr('title', 'play');
}
if (playpause.hasClass("fa-pause-circle-o")) {
stop = false;
autoRunSlider();
$(this).attr('title', 'pause');
}
});
});
