<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 ---------->
<div class="carousel-wrapper" id="my-carousel">
<div class="carousel">
<div class="slide current" annot="This is the fifth slide title. Photo by David Marcu.">
<img src="https://ununsplash.imgix.net/uploads/141223808515744db9995/3361b5e1?q=75&fm=jpg&w=602" alt="Slide 5">
</div>
<div class="slide" annot="This is the fourth slide title. Photo by Ryan Lum.">
<img src="https://unsplash.imgix.net/photo-1415356838286-df6fd593e8b3?q=75&fm=jpg&w=600" alt="Slide 4">
</div>
<div class="slide" annot="This is the third slide title. Photo by Tomasz Paciorek.">
<img src="https://ununsplash.imgix.net/reserve/JaI1BywIT5Or8Jfmci1E_zakopane.jpg?q=75&fm=jpg&w=600" alt="Slide 3">
</div>
<div class="slide" annot="This is the second slide title. Photo by S Charles.">
<img src="https://ununsplash.imgix.net/uploads/1413387158190559d80f7/6108b580?fit=crop&fm=jpg&q=75&w=600" alt="Slide 2">
</div>
<div class="slide" annot="First slide title. Photo by Forrest Cavale.">
<img src="https://ununsplash.imgix.net/uploads/1413399939678471ea070/2c0343f7?q=75&fm=jpg&w=601" alt="Slide 1">
</div>
</div>
<div class="clip-prev">
<button class="btn prev">
<</button>
</div>
<div class="clip-next">
<button class="btn next">></button>
</div>
</div>
<div class="carousel-wrapper" id="my-carousel-2">
<div class="carousel">
<div class="slide current" annot="This is the fifth slide title. Photo by David Marcu.">
<img src="https://ununsplash.imgix.net/uploads/141223808515744db9995/3361b5e1?q=75&fm=jpg&w=602" alt="Slide 5">
</div>
<div class="slide" annot="This is the fourth slide title. Photo by Ryan Lum.">
<img src="https://unsplash.imgix.net/photo-1415356838286-df6fd593e8b3?q=75&fm=jpg&w=600" alt="Slide 4">
</div>
<div class="slide" annot="This is the third slide title. Photo by Tomasz Paciorek.">
<img src="https://ununsplash.imgix.net/reserve/JaI1BywIT5Or8Jfmci1E_zakopane.jpg?q=75&fm=jpg&w=600" alt="Slide 3">
</div>
<div class="slide" annot="This is the second slide title. Photo by S Charles.">
<img src="https://ununsplash.imgix.net/uploads/1413387158190559d80f7/6108b580?fit=crop&fm=jpg&q=75&w=600" alt="Slide 2">
</div>
<div class="slide" annot="First slide title. Photo by Forrest Cavale.">
<img src="https://ununsplash.imgix.net/uploads/1413399939678471ea070/2c0343f7?q=75&fm=jpg&w=601" alt="Slide 1">
</div>
</div>
<div class="clip-prev">
<button class="btn prev">
<</button>
</div>
<div class="clip-next">
<button class="btn next">></button>
</div>
</div>
<script>
$(function() {
var WIDGETS = {};
WIDGETS.carousel = function carousel(autoslide) {
var $element,
position = 0,
itemCount;
return {
init: _init
}
function _init(element) {
var ul = document.createElement("ul"),
result = "";
$element = document.querySelector(element);
itemCount = $element.getElementsByClassName("slide").length;
for (var count = 0; count < itemCount; count++) {
if (count === 0) {
result += '<li class="carousel-target selected" data-target="' + count + '"></li>';
continue;
}
result += '<li class="carousel-target" data-target="' + count + '"></li>';
}
ul.innerHTML = result;
$element.appendChild(ul);
var width = ul.offsetWidth;
ul.style.marginLeft = (-width / 2) + "px";
_bindEvents();
}
function _bindEvents() {
var $next = $element.getElementsByClassName("next")[0];
var $prev = $element.getElementsByClassName("prev")[0];
var $selector = $element.getElementsByTagName("ul")[0];
_addEvent($next, "click", _next);
_addEvent($prev, "click", _prev);
_addEvent($selector, "click", _select);
}
function _select(evt) {
var $slides, j = 0,
target = evt.target || evt.srcElement,
moveTo = +target.getAttribute("data-target");
if (!_hasClass(target, "carousel-target") || moveTo === position) return;
$slides = $element.getElementsByClassName("slide");
if (moveTo < position) {
for (j = position; j > moveTo; j--) {
_removeClass($slides[j], "current");
_removeClass($slides[j], "prev-slide");
}
} else {
for (j = position; j < moveTo; j++) {
_removeClass($slides[j], "current");
_addClass($slides[j], "prev-slide");
}
}
position = moveTo;
_addClass($slides[j], "current");
_setSelected(target);
}
function _setSelected(item) {
var items = $element.querySelectorAll("li.carousel-target");
[].forEach.call(items, function(el) {
_removeClass(el, "selected");
});
_addClass(item, "selected");
}
function _next() {
if (position < itemCount - 1) {
var current = $element.getElementsByClassName("slide")[position];
var next = $element.getElementsByClassName("slide")[++position];
var selected = $element.querySelectorAll("li.carousel-target")[position];
_removeClass(current, "current");
_addClass(current, "prev-slide");
_addClass(next, "current");
_setSelected(selected);
}
}
function _prev() {
if (position > 0) {
var current = $element.getElementsByClassName("slide")[position];
var prev = $element.getElementsByClassName("slide")[--position];
var selected = $element.querySelectorAll("li.carousel-target")[position];
_removeClass(current, "current");
_removeClass(prev, "prev-slide");
_addClass(prev, "current");
_setSelected(selected);
}
}
function _addEvent(el, type, handler) {
if (el.attachEvent) {
el.attachEvent('on' + type, handler);
} else {
el.addEventListener(type, handler);
}
}
function _removeEvent(el, type, handler) {
if (el.detachEvent) {
el.detachEvent('on' + type, handler);
} else {
el.removeEventListener(type, handler);
}
}
function _hasClass(el, className) {
return el.classList ? el.classList.contains(className) : new RegExp('\\b' + className + '\\b').test(el.className);
}
function _addClass(el, className) {
if (el.classList) el.classList.add(className);
else if (!hasClass(el, className)) el.className += ' ' + className;
}
function _removeClass(el, className) {
if (el.classList) el.classList.remove(className);
else el.className = el.className.replace(new RegExp('\\b' + className + '\\b', 'g'), '');
}
}
WIDGETS.carousel(true).init("#my-carousel");
WIDGETS.carousel().init("#my-carousel-2");
});
</script>
<script>
$(document).ready(function() {
var carousel = $("#aff");
carousel.owlCarousel({
singleItem: true,
autoPlay: true,
stopOnHover: true,
navigation: true,
pagination: false,
navigationText: ["<",">"]
});
});
</script>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
background: #c6c6c6;
}
body {
height: 100%;
font-family: 'roboto', 'helvetica neue', arial, sans-serif;
}
.carousel-wrapper {
position: relative;
width: 600px;
height: 400px;
margin: 50px auto;
text-align: center;
}
.carousel {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
text-align: center;
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.23);
background: white;
}
.carousel,
img {
border-radius: 2px;
}
.slide {
height: 100%;
width: 100%;
opacity: 0;
left: 100%;
z-index: 1;
-webkit-transition: left 2s, opacity 3s;
transition: left 2s, opacity 3s;
position: absolute;
}
.slide.prev-slide {
left: -100%;
}
.slide.current {
left: 0;
opacity: 1;
}
.slide:before {
content: attr(annot);
position: absolute;
left: 40px;
bottom: 60px;
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
font-weight: 300;
z-index: 4;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
text-shadow: 0 0 1px #000;
}
.btn {
height: 60px;
width: 60px;
border: none;
background: white;
color: #ddd;
outline: none;
border-radius: 50%;
font-size: 1.1em;
border: 1px solid #c6c6c6;
-webkit-transition: all .2s;
transition: all .2s;
}
.btn:hover {
color: #424242;
cursor: pointer;
}
.btn.prev {
left: 0px;
}
.btn.next {
right: 0;
}
.clip-next,
.clip-prev {
height: 60px;
z-index: 2;
margin-top: -30px;
top: 50%;
position: absolute;
}
.clip-prev {
left: -30px;
}
.clip-next {
right: -30px;
}
ul {
display: inline-block;
position: absolute;
z-index: 10;
bottom: 20px;
left: 50%;
}
.carousel-target {
cursor: pointer;
width: 15px;
height: 15px;
list-style: none;
display: inline-block;
background: #424242;
border-radius: 50%;
border: 1px solid #c6c6c6;
opacity: 0.7;
margin: 0 2px;
}
.selected {
background: #c6c6c6;
opacity: 1;
}
#my-carousel-2 {
margin-top: 100px;
}
#my-carousel-2 .clip-prev {
clip: rect(0px, 60px, 60px, 30px);
}
#my-carousel-2 .clip-next {
clip: rect(0, 30px, 60px, 0);
}
#my-carousel-2 .prev {
padding-left: 20px;
}
#my-carousel-2 .next {
padding-right: 20px;
}
