Skip to content

Instantly share code, notes, and snippets.

@cvara

cvara/simple.content.slider.js

Last active August 29, 2015 14:07
Download ZIP

Revisions

  1. cvara revised this gist Oct 7, 2014. 1 changed file with 120 additions and 120 deletions.
    240 changes: 120 additions & 120 deletions simple.content.slider.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,127 +1,127 @@
    /**
    * @name jQuery Simple Content Slider
    * @author Christopher Varakliotis
    * @version 0.2
    * @url -
    * @license MIT License
    * @name jQuery Simple Content Slider
    * @author Christopher Varakliotis
    * @version 0.2
    * @url -
    * @license MIT License
    */

    (function($, undefined){


    $.fn.contentSlider = function(options) {

    // override defaults with specified options
    var _options = $.extend( {}, $.fn.contentSlider.defaults, options );

    return this.each(function(){

    // cache container element
    var elem = $(this);

    // continue to next element if already initialized
    if(elem.hasClass('initialized-slider') && !_options.forceInit)
    return true;

    // mark slider element as initialized
    elem.addClass('initialized-slider');

    // cache needed elements
    var viewport = $('.viewport', elem),
    next = $('.next', elem),
    prev = $('.prev', elem),
    content_wrap = $('.content-wrap', viewport),
    slider_contents = $('.slider-content', content_wrap),
    size = slider_contents.size(),
    position = 0, // ranges from 0..-(size-1)
    animating = false;


    // slides contents towards specified direction
    var slide = function(direction) {

    if( !animating ) {

    // mark content wrap as animating to avoid multiple stacking animations
    animating = true;

    // specify sliding distance
    var x = slider_contents.outerWidth();

    // slide the list to the specified direction
    if(direction == 'right') {
    position = position > (1-size) ? position - 1 : 0 ;
    }
    else {
    position = position < 0 ? position + 1 : 1 - size;
    }
    content_wrap.animate({'left': position * x + 'px'}, _options.animateDuration, function() {
    animating = false;
    });
    }
    };

    // responds to slider width changes maintaining slideshow position
    var adjustSliderSize = function(w) {

    // resize slider inner elements to fit slider main container
    content_wrap.width(size * w);
    slider_contents.width(w);

    // re-position content-wrap aligning it with viewport
    content_wrap.css('left', position * w + 'px');
    };

    // set slider content width
    slider_contents.css({
    width: viewport.outerWidth() + 'px',
    height: viewport.outerHeight() + 'px'
    });

    content_wrap.css({
    width: (viewport.outerWidth() * size) + 'px',
    height: viewport.outerHeight() + 'px'
    });

    // install handlers for sliding content
    next.click(function(event) {
    slide('right');
    });
    prev.click(function(event) {
    slide('left');
    });

    // Set timer if autoSlide is on
    if( _options.autoSlide ) {
    elem.timer = setInterval(function() {
    slide("right");
    }, _options.autoSlideInterval);

    // Pause auto slide if pauseOnHover is on
    if( _options.pauseOnHover ) {
    elem.hover(function() {
    clearInterval(elem.timer);
    }, function(){
    elem.timer = setInterval(function() {
    slide("right");
    }, _options.autoSlideInterval);
    });
    }
    }

    // set/adjust slider dimensions on 'gridWidthChanged'event (fired from artist.page.functions.js)
    $(window).on('resize', function() {
    adjustSliderSize(elem.outerWidth());
    });

    });
    };

    $.fn.contentSlider.defaults = {
    animateDuration : 200,
    autoSlide : false,
    autoSlideInterval : 4000,
    pauseOnHover : false,
    forceInit : false
    };
    $.fn.contentSlider = function(options) {

    // override defaults with specified options
    var _options = $.extend( {}, $.fn.contentSlider.defaults, options );

    return this.each(function(){

    // cache container element
    var elem = $(this);

    // continue to next element if already initialized
    if(elem.hasClass('initialized-slider') && !_options.forceInit)
    return true;

    // mark slider element as initialized
    elem.addClass('initialized-slider');

    // cache needed elements
    var viewport = $('.viewport', elem),
    next = $('.next', elem),
    prev = $('.prev', elem),
    content_wrap = $('.content-wrap', viewport),
    slider_contents = $('.slider-content', content_wrap),
    size = slider_contents.size(),
    position = 0, // ranges from 0..-(size-1)
    animating = false;


    // slides contents towards specified direction
    var slide = function(direction) {

    if( !animating ) {

    // mark content wrap as animating to avoid multiple stacking animations
    animating = true;

    // specify sliding distance
    var x = slider_contents.outerWidth();

    // slide the list to the specified direction
    if(direction == 'right') {
    position = position > (1-size) ? position - 1 : 0 ;
    }
    else {
    position = position < 0 ? position + 1 : 1 - size;
    }
    content_wrap.animate({'left': position * x + 'px'}, _options.animateDuration, function() {
    animating = false;
    });
    }
    };

    // responds to slider width changes maintaining slideshow position
    var adjustSliderSize = function(w) {

    // resize slider inner elements to fit slider main container
    content_wrap.width(size * w);
    slider_contents.width(w);

    // re-position content-wrap aligning it with viewport
    content_wrap.css('left', position * w + 'px');
    };

    // set slider content width
    slider_contents.css({
    width: viewport.outerWidth() + 'px',
    height: viewport.outerHeight() + 'px'
    });

    content_wrap.css({
    width: (viewport.outerWidth() * size) + 'px',
    height: viewport.outerHeight() + 'px'
    });

    // install handlers for sliding content
    next.click(function(event) {
    slide('right');
    });
    prev.click(function(event) {
    slide('left');
    });

    // Set timer if autoSlide is on
    if( _options.autoSlide ) {
    elem.timer = setInterval(function() {
    slide("right");
    }, _options.autoSlideInterval);

    // Pause auto slide if pauseOnHover is on
    if( _options.pauseOnHover ) {
    elem.hover(function() {
    clearInterval(elem.timer);
    }, function(){
    elem.timer = setInterval(function() {
    slide("right");
    }, _options.autoSlideInterval);
    });
    }
    }

    // set/adjust slider dimensions on 'gridWidthChanged'event (fired from artist.page.functions.js)
    $(window).on('resize', function() {
    adjustSliderSize(elem.outerWidth());
    });

    });
    };

    $.fn.contentSlider.defaults = {
    animateDuration : 200,
    autoSlide : false,
    autoSlideInterval : 4000,
    pauseOnHover : false,
    forceInit : false
    };
    })(jQuery);
  2. cvara created this gist Oct 7, 2014.
    127 changes: 127 additions & 0 deletions simple.content.slider.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,127 @@
    /**
    * @name jQuery Simple Content Slider
    * @author Christopher Varakliotis
    * @version 0.2
    * @url -
    * @license MIT License
    */

    (function($, undefined){


    $.fn.contentSlider = function(options) {

    // override defaults with specified options
    var _options = $.extend( {}, $.fn.contentSlider.defaults, options );

    return this.each(function(){

    // cache container element
    var elem = $(this);

    // continue to next element if already initialized
    if(elem.hasClass('initialized-slider') && !_options.forceInit)
    return true;

    // mark slider element as initialized
    elem.addClass('initialized-slider');

    // cache needed elements
    var viewport = $('.viewport', elem),
    next = $('.next', elem),
    prev = $('.prev', elem),
    content_wrap = $('.content-wrap', viewport),
    slider_contents = $('.slider-content', content_wrap),
    size = slider_contents.size(),
    position = 0, // ranges from 0..-(size-1)
    animating = false;


    // slides contents towards specified direction
    var slide = function(direction) {

    if( !animating ) {

    // mark content wrap as animating to avoid multiple stacking animations
    animating = true;

    // specify sliding distance
    var x = slider_contents.outerWidth();

    // slide the list to the specified direction
    if(direction == 'right') {
    position = position > (1-size) ? position - 1 : 0 ;
    }
    else {
    position = position < 0 ? position + 1 : 1 - size;
    }
    content_wrap.animate({'left': position * x + 'px'}, _options.animateDuration, function() {
    animating = false;
    });
    }
    };

    // responds to slider width changes maintaining slideshow position
    var adjustSliderSize = function(w) {

    // resize slider inner elements to fit slider main container
    content_wrap.width(size * w);
    slider_contents.width(w);

    // re-position content-wrap aligning it with viewport
    content_wrap.css('left', position * w + 'px');
    };

    // set slider content width
    slider_contents.css({
    width: viewport.outerWidth() + 'px',
    height: viewport.outerHeight() + 'px'
    });

    content_wrap.css({
    width: (viewport.outerWidth() * size) + 'px',
    height: viewport.outerHeight() + 'px'
    });

    // install handlers for sliding content
    next.click(function(event) {
    slide('right');
    });
    prev.click(function(event) {
    slide('left');
    });

    // Set timer if autoSlide is on
    if( _options.autoSlide ) {
    elem.timer = setInterval(function() {
    slide("right");
    }, _options.autoSlideInterval);

    // Pause auto slide if pauseOnHover is on
    if( _options.pauseOnHover ) {
    elem.hover(function() {
    clearInterval(elem.timer);
    }, function(){
    elem.timer = setInterval(function() {
    slide("right");
    }, _options.autoSlideInterval);
    });
    }
    }

    // set/adjust slider dimensions on 'gridWidthChanged'event (fired from artist.page.functions.js)
    $(window).on('resize', function() {
    adjustSliderSize(elem.outerWidth());
    });

    });
    };

    $.fn.contentSlider.defaults = {
    animateDuration : 200,
    autoSlide : false,
    autoSlideInterval : 4000,
    pauseOnHover : false,
    forceInit : false
    };
    })(jQuery);