Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Dynamic carousel
//uses hammer.js to detect swipe and trigger next/prev buttons
//counts numbers of child items to handle carousel and add bullets in mobile view
eventSlider: function() {
var marginArray = [];
var i = 0;
var length = jQuery('.home--2-col-events--right--slider-slide').length;
//set container and child widths
jQuery('.home--2-col-events--right--slider-container').css(
'width', ((length * 100) + 1) + '%'
);
jQuery('.home--2-col-events--right--slider-slide').css(
'width', (100 / length) + '%'
);
//set marginArray based on childnum
for (var j = 0; j < length; j++) {
marginArray.push((j * -100) + '%');
//populate bullets
j === 0 ? jQuery('.home--2-col-events--bullets').append('<li class="is-active"><button></button></li>') : jQuery('.home--2-col-events--bullets').append('<li class=""><button></button></li>');
}
if (window.innerWidth < 1366) {
trellisUtilities.detectSwipe('#home--2-col-events--prev', '#home--2-col-events--next', '#home--2-col-events');
}
jQuery('#home--2-col-events--prev').click(function() {
i--;
i === -1 ? i = length - 1 : i;
jQuery('.home--2-col-events--right--slider-container').css('margin-left', marginArray[i]);
/*bullet logic*/
jQuery('.home--2-col-events--bullets li').each(function() {
jQuery(this).removeClass('is-active');
});
jQuery('.home--2-col-events--bullets li:nth-of-type(' + (i + 1) + ')').addClass('is-active');
});
jQuery('#home--2-col-events--next').click(function() {
i++;
i === length ? i = 0 : i;
jQuery('.home--2-col-events--right--slider-container').css('margin-left', marginArray[i]);
/*bullet logic*/
jQuery('.home--2-col-events--bullets li').each(function() {
jQuery(this).removeClass('is-active');
});
jQuery('.home--2-col-events--bullets li:nth-of-type(' + (i + 1) + ')').addClass('is-active');
});
},
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment