Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// SETTINGS
slider_settings = {
verbose: true,
verbose_name: "DOBBY",
navigation: true,
bullets: true
}
// post DOM load stuff
$(document).ready(function(){
// gather all images
var imageList = $("[data-what='slider-image']");
// lets design some stuff
vc__slider_generateCss();
// get listeners
$("[data-what='slider-controller']").click(function(e){
var direction = $(this).data("direction");
var animation = $("[data-what='slider-container']").data("animation");
var fadeTime = $("[data-what='slider-container']").data("fadetime");
vc__slider_move(direction, animation, fadeTime);
// lets look for existant Interval
// if there is one, lets kill it and restart
// We also need to check the origin of the event,
// if the event generated is "originalEvent" then we have a manual click.
// we dont want to mess with the interval if the click is generated by the interval :)
if (autoInterval && e["originalEvent"]){
verbose("Manually triggered click. Automatically swipe timer has been restarted");
clearInterval(autoInterval);
vc_slider_autoScroll();
}
});
vc_slider_autoScroll();
vc_slider_bullets(slider_settings.bullets, imageList);
});
// NOTE: FUNCTIONS AREA
// ########################################################
// @params => [status ('bullet' property from slider_settings), imageList]
// Generate bullets if the setting is true
function vc_slider_bullets(status, imageList){
// first we need to check setting status.
// if false.. return
if (!status) { return false; }
// validations are over > Proceed
// collect DOM references
var sliderWrapper = $(".slider__wrapper");
var imageWidth = $("[data-what='slider-image']").width();
// prepare injection elements
var bulletsContainer_model = `
<div
class="slider__bullets-container"
data-what="slider-bullet-container"
style= "
width: ${imageWidth}px;
margin: auto;
height: 15px;
text-align: center;
"
>
</div>
`
// Inject bullet points container markup into the DOM
sliderWrapper.append(bulletsContainer_model);
// collect new element info
var bulletsContainer = $("[data-what='slider-bullet-container']");
// now we need a singleBullet_model per image...
// lets loop
for (x = 0; x < imageList.length; x++) {
// lets create the model
// I should do this outside of this loop for memory optimization.
// but should work just fine even on a potato computer
var singleBullet_model = `
<div
class="slider__bullets"
data-what="slider-bullet"
data-index="${x}"
style = "
display: inline-block;
height: 15px;
width: 15px;
border-radius: 50%;
opacity: 0.1;
background-color: rgba(0, 0, 0, 1);
"
>
</div>
`
// then we append the model
bulletsContainer.append(singleBullet_model)
}
}
// @params => NONE;
// Generate stylesheet to handle images and stuff
function vc__slider_generateCss(){
$("[data-what='slider-image']").hide();
$(".vc-slider__image").css("height", "100%");
$("[data-slider-index='0']").css("display", "initial");
// validate navigation option from init
// if false send the controllers behind :)
// for now i still need them as the auto-nav works through the click event
if (!slider_settings.navigation) {
// verbose it out
verbose("Slider navigation is deactivated");
// adjust css
$(".slider__controllers").css({
"width": "0",
"left": "-100px",
"z-index": "-10"
});
}
return;
}
// @params => [direction, animation, fadeTime]
// Will perform the slider animation according to picked animation option
function vc__slider_move(direction, animation, fadeTime){
var sliderWrapper = $(".slider__wrapper");
var sliderContainer = $("[data-what='slider-container']");
var currentSlide = sliderContainer.data("activeslide");
var preAnimSlide = currentSlide;
var totalSlides = $("[data-what='slider-image']").length;
var animationDelay = fadeTime;
// accepted Animation effects
var acceptedAnimations = ["opacity"];
// Animation validation
if (animation != acceptedAnimations[0]){
verbose("Animation not recognized");
return false;
}
// SWITCH Case for accepted animations
var animation_off_options = null;
var animation_on_options = null;
switch (animation) {
case "opacity":
animation_off_options = {opacity: 0};
animation_on_options = {opacity: 1};
break;
default:
verbose("Animation not found on switch case");
}
// SWITCH Case for direction
var nextSlide = null;
switch (direction) {
case "left":
// NOTE: Validate slider min limit.
// If limit is hit, display last slider from the array
if (eval(currentSlide - 1) < 0){
currentSlide = eval(totalSlides - 1);
}
else{
currentSlide = eval(currentSlide - 1);
}
// Now we need to mark the Active Slider
sliderWrapper.data("activeslide", currentSlide);
break;
case "right":
// NOTE: validate slider max limit.
// If limit is hit, display the first slider from the array
if (eval(currentSlide + 1) > eval(totalSlides - 1)){
currentSlide = 0;
}
else {
currentSlide = eval(currentSlide + 1);
}
// Now we need to mark the Active Slider
sliderWrapper.data("activeslide", currentSlide);
break;
default:
verbose("Direction case scenario has bugged its brains out.");
}
// NOTE: Time to perform the animation
// Remove & Animate old slide
$(`[data-slider-index=${preAnimSlide}]`).animate(animation_off_options, animationDelay, function(){
// hide old slide
$(this).hide();
// inject new slide with opacity 0
$(`[data-slider-index=${currentSlide}]`).css("opacity", "0");
$(`[data-slider-index=${currentSlide}]`).show();
// display and animate new slider
$(`[data-slider-index=${currentSlide}]`).animate(animation_on_options, animationDelay, function(){
// last animation concludes
verbose("Slider changed. New slide displayed is: " + currentSlide);
})
})
return;
}
// @params = NONE;
// Defines interval to auto swipe the slides
function vc_slider_autoScroll(){
var sliderWrapper = $(".slider__wrapper");
// lets validate if the autoscroll attribute is on
if (!sliderWrapper.data("auto")){
return false;
}
// validation is over
var timer = Number(sliderWrapper.data("autotimer"));
autoInterval = setInterval(function(){
$("[data-direction='right']").click();
}, timer);
return;
}
// @params = [string] > Verbose log text
// If activated, prints output into dev console.
function verbose(string){
// validate verbose settings
if (!slider_settings.verbose){
return false;
}
var verboseInit = slider_settings.verbose_name + " SAYS >> ";
console.log(verboseInit + " " + string);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment