Skip to content

Instantly share code, notes, and snippets.

@hthmkhlf

hthmkhlf/doazxl.markdown

Last active November 30, 2018 00:10
Show Gist options
  • Save hthmkhlf/00a91ddc1266fcea67c7521f6b6e6a80 to your computer and use it in GitHub Desktop.
Save hthmkhlf/00a91ddc1266fcea67c7521f6b6e6a80 to your computer and use it in GitHub Desktop.
Download ZIP
doaZXL
Raw
index.html
<div class="wrapper">
<div class="testimonial">
<ul class="testimonial-ul">
<li class="testimonial-slide active">
<p class="slidePara"> First slide My family and I have been coming here for over 7 years.
</p>
</li>
<li class="testimonial-slide">
<p class="slidePara"> Second slide spanning two lines this is only one line we like it here!
</p>
</li>
<li class="testimonial-slide">
<p class="slidePara"> Third slide My family and I have been coming here for over.
</p>
</li>
<span class="top-left"></span>
<span class="top-right"></span>
</ul>
</div>
</div>
Raw
script.js
(function($) {
var Slider = (function () {
function _Slider(element, settings) {
this.defaults = {
slideDuration: '3000',
speed: 500
/*
,
arrowRight: '.right-arrow',
arrowLeft: '.left-arrow'
*/
};
this.settings = $.extend({}, this.defaults, settings);
this.initials = {
currentSlide: 0,
$currentSlide: null,
totalSlides: false,
cssTransitions: false
};
$.extend(this, this.initials);
this.$el = $(element);
this.changeSlide = $.proxy(this.changeSlide, this);
this.init();
}
return _Slider;
})();
Slider.prototype.init = function () {
this.cssTransitionTest();
this.$el.addClass('slider');
this.build();
this.events();
this.activate();
this.initTimer();
};
Slider.prototype.cssTransitionTest = function () {
var elem = document.createElement('modernizr');
var props = ['transition', 'WebkitTransition', 'MozTransition', 'OTransition', 'msTransition'];
for (var i in props) {
var prop = props[i];
var result = elem.style[prop] !== undefined ? prop : false;
if (result) {
this.cssTransitions = result;
break;
}
}
};
Slider.prototype.addCSSDuration = function () {
var sliderModule = this;
sliderModule.$el.find('.testimonial-slide').each(function () {
this.style[sliderModule.cssTransitions + 'Duration'] = sliderModule.settings.speed + 'ms';
});
};
Slider.prototype.removeCSSDuration = function () {
var sliderModule = this;
//here we are using 'this' but we can also write sliderModule
//since we are refering to the same element...shorter and cleaner
this.$el.find('.testimonial-slide').each(function () {
this.style[sliderModule.cssTransitions + 'Duration'] = '';
});
};
//create indicator dots below which also have the functionality
//as the arrows
Slider.prototype.build = function () {
var $indicators = this.$el.append("<ul class='dots-wrapper'>").find('.dots-wrapper');
this.totalSlides = this.$el.find('.testimonial-slide').length;
for (var i = 0; i < this.totalSlides; i++) {
$indicators.append("<li data-index=" + i + ">");
}
};
Slider.prototype.activate = function () {
this.$currentSlide = this.$el.find('.testimonial-slide').eq(0);
this.$el.find('.dots-wrapper li').eq(0).addClass('active');
};
Slider.prototype.events = function () {
$('body')
.on('click', this.settings.arrowRight, {
direction: 'right'
}, this.changeSlide)
.on('click', this.settings.arrowLeft, {
direction: 'left'
}, this.changeSlide)
.on('click', '.dots-wrapper li', this.changeSlide);
};
Slider.prototype.clearTimer = function () {
if (this.timer) {
clearInterval(this.timer);
}
};
Slider.prototype.initTimer = function () {
this.timer = setInterval(
this.changeSlide, this.settings.slideDuration);
};
Slider.prototype.startTimer = function () {
this.initTimer();
this.throttle = false;
};
Slider.prototype.changeSlide = function (e) {
if (this.throttle) {
return;
}
this.throttle = true;
this.clearTimer();
var direction = this._direction(e);
var animate = this._next(e, direction);
if (!animate) {
return;
}
var $nextSlide = this.$el.find('.testimonial-slide').eq(this.currentSlide).addClass(direction + ' active');
if (!this.csstransitions) {
this._jsAnimation($nextSlide, direction);
} else {
this._cssAnimation($nextSlide, direction);
}
};
Slider.prototype._direction = function (e) {
var direction;
if (typeof e !== 'undefined') {
direction = (typeof e.data === 'undefined' ? 'right' : e.data.direction);
} else {
direction = 'right';
}
return direction;
};
Slider.prototype._next = function (e, direction) {
var index = (typeof e !== 'undefined' ? $(e.currentTarget).data('index') : undefined);
switch (true) {
case (typeof index !== 'undefined'):
if (this.currentSlide == index) {
this.startTimer();
return false;
}
this.currentSlide = index;
break;
case (direction == 'right' && this.currentSlide < (this.totalSlides - 1)):
this.currentSlide++;
break;
case (direction == 'right'):
this.currentSlide = 0;
break;
case (direction == 'left' && this.currentSlide === 0):
this.currentSlide = (this.totalSlides - 1);
break;
case (direction == 'left'):
this.currentSlide--;
break;
}
return true;
};
Slider.prototype._cssAnimation = function ($nextSlide, direction) {
setTimeout(function () {
this.$el.addClass('transition');
this.addDuration();
this.$currentSlide.addClass('shift' + direction);
}.bind(this), 100);
setTimeout(function () {
this.$el.removeClass('transition');
this.removeCSSDuration();
this.$currentSlide.removeClass('active shift-left shift-right');
this.$currentSlide = $nextSlide.removeClass(direction);
this._updateIndicators();
this.startTimer();
}.bind(this), 100 + this.settings.speed);
};
Slider.prototype._jsAnimation = function ($nextSlide, direction) {
var sliderModule = this;
if (direction == 'right') {
sliderModule.$currentSlide.addClass('js-reset-left');
}
var animation = {};
animation[direction] = '0%';
var animationPrev = {};
animationPrev[direction] = '100%';
this.$currentSlide.animate(animationPrev, this.settings.speed);
$nextSlide.animate(animation, this.settings.speed, 'swing', function () {
sliderModule.$currentSlide.removeClass('active js-reset-left').attr('style', '');
sliderModule.$currentSlide = $nextSlide.removeClass(direction).attr('style', '');
sliderModule._updateIndicators();
sliderModule.startTimer();
});
};
Slider.prototype._updateIndicators = function () {
this.$el.find('.dots-wrapper li').removeClass('active').eq(this.currentSlide).addClass('active');
};
$.fn.Slider = function (options) {
return this.each(function (index, el) {
el.Slider = new Slider(el, options);
});
};
})(jQuery);
var args = {
arrowRight: '.right-arrow',
arrowLeft: '.left-arrow',
speed: 500,
slideDuration: 3000
};
$('.testimonial').Slider(args);
/*
var biggestHeight = "0";
$(".testimonial .testimonial-ul > .testimonial-slide.active").each(function(){
if ($(this).height() > biggestHeight ) {
biggestHeight = $(this).height()
}
});
$(".testimonial .testimonial-ul").height(biggestHeight);
*/
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
@import url(https://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext);
* {
margin:0;
padding:0;
}
body,
html {
width:100%;
height:100%;
font-size:100%;
color:#ffffff;
}
.wrapper {
width:100%;
height:100%;
background:#95a5a6;
}
/* slide module wrapper */
.testimonial {
top:50%;
transform:translateY(-50%);
position:relative;
}
.testimonial .testimonial-ul {
height:250px;
list-style:none;
margin:0 auto;
width:50%;
position:relative;
/*border-top:5px solid #ffffff;*/
border-bottom:5px solid #ffffff;
overflow:hidden;
}
/* slides */
.testimonial-slide {
width: 100%;
height:100%;
margin:0 auto;
position:absolute;
right: 0;
left: 0;
opacity: 0;
z-index:1;
}
.testimonial-slide.active {
z-index: 2;
opacity: 1;
transition:opacity 1s ease-in-out;
-webkit-backface-visibility:hidden;
}
/******* text ***/
.testimonial p {
font-family:'lato';
text-align:center;
font-size:2em;
padding:15px 0;
top:50%;
position:relative;
transform:translateY(-50%);
}
/******* quotes ***/
.testimonial:before {
content:'\201C';
display:block;
font-size:150px;
line-height:0;
text-align:center;
position: absolute;
left:0;
top:35px;
right:0;
margin:0 auto;
z-index:2;
}
.top-left {
position:absolute;
top:0;
left:0;
display:block;
height:5px;
width:44%;
background:#ffffff;
margin-right:10px;
}
.top-right {
position:absolute;
top:0;
right:0;
display:block;
height:5px;
width:44%;
background:#ffffff;
margin-left:10px;
}
/********* dots */
.dots-wrapper {
margin-top:20px;
width:100%;
display:inline-block;
list-style:none;
text-align:center;
}
.dots-wrapper li {
position:relative;
width:14px;
height:14px;
background:#7f8c8d;
border-radius:100%;
display:inline-block;
margin-right:7px;
cursor:pointer;
overflow:hidden;
}
.dots-wrapper li:last-child {
margin-right:0;
}
.dots-wrapper li:hover {
background:#bdc3c7;
}
.dots-wrapper li:after {
content:'';
position:absolute;
width:100%;
height:100%;
border-radius:100%;
background:#ffffff;
top:0;
left:0;
/*opacity:0;
transition: all .15s ease-in-out;*/
/*zoom in*/
/*
transform:scale(0);
transition:all .3s ease-in-out;
*/
/*slide up*/
transform:translateY(15px);
transition:all .1s ease-out;
-webkit-backface-visibility:hidden;
}
.dots-wrapper li.active:after {
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
/*opacity:1;*/
/*zoom in*/
/*transform:scale(1);*/
/*slide up*/
transform:translateY(0px);
}
/******* transitions */
.js-reset-left{
left:auto
}
.testimonial-slide.left{
left:-100%;
right:auto;
}
.testimonial-slide.right{
right:-100%;
left: auto;
}
.transition .testimonial-slide.left{
left:0%;
}
.transition .testimonial-slide.right{
right:0%;
}
.transition .testimonial-slide.shift-right{
right: 100%;
left:auto;
}
.transition .testimonial-slide.shift-left{
left: 100%;
right:auto;
}
.transition .testimonial-slide{
transition-property: right, left, margin;
}
/********* media queries ******/
/***** mobile */
@media only screen and (min-width: 320px) and (max-width: 480px) {
.testimonial p {
font-size:1.5em;
}
.testimonial .testimonial-ul {
width:80%;
}
.top-left {
width:30%;
}
.top-right {
width:30%;
}
}
/***** tablet */
@media only screen and (min-width: 481px) and (max-width: 1024px) {
.testimonial p {
font-size:1.8em;
}
.testimonial .testimonial-ul {
width:70%;
}
.top-left {
width:40%;
}
.top-right {
width:40%;
}
.testimonial:before {
font-size:150px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment