site/js/slider.js

jQuery(document).ready(function () {
    /* We slider*/
    init();
    pageNav();
    navigation();
    next();
    prev();
    swipeTouch();
    /* Multi section slider*/
    mInit();
    mSlideNav();
    mCheckNav();
    mSlideNext();
    mSlidePrev();
    mSwipeTouch();
});
jQuery(window).resize(function () {
    /* We slider*/
    init();
    /* Multi section slider*/
    mInit();
    var window_width = jQuery(window).width();
    if (jQuery(".multi-section-slider").length) {
        if (window_width < 640) {
            jQuery("#webcast-slider .multi-section-slider").attr("data-items", "1");
        } else {
            jQuery("#webcast-slider .multi-section-slider").attr("data-items", "2");
        }
        if (window_width > 1200) {
            jQuery(".partner-block .multi-section-slider").attr("data-items", "5");
        } else if (window_width < 1200 && window_width > 1023) {
            jQuery(".partner-block .multi-section-slider").attr("data-items", "4");
        } else if (window_width < 1024 && window_width > 767) {
            jQuery(".partner-block .multi-section-slider").attr("data-items", "3");
        } else if (window_width < 768 && window_width > 480) {
            jQuery(".partner-block .multi-section-slider").attr("data-items", "2");
        } else if (window_width < 481) {
            jQuery(".partner-block .multi-section-slider").attr("data-items", "1");
        }
        if (window_width > 767) {
            jQuery(".video-carousel .multi-section-slider").attr("data-items", "3");
        } else if (window_width < 768 && window_width > 595) {
            jQuery(".video-carousel .multi-section-slider").attr("data-items", "1");
        } else if (window_width < 596) {
            jQuery(".video-carousel .multi-section-slider").attr("data-items", "1");
        }
    }
});
jQuery(window).on('load', function () {
    jQuery(window).on('resize', function () {
        /* To imitate background image dimensions on real img */
        if (jQuery('.we-slider .item').length) {
            jQuery('.we-slider .bg-img, .we-slider .slide-bg').each(function () {
                var parent_height = jQuery(this).height(),
                        parent_width = jQuery(this).width(),
                        image = jQuery(this).children("img"),
                        img_width = image.get(0).naturalWidth,
                        img_height = image.get(0).naturalHeight,
                        ratio = img_width / img_height;
                image.css({"height": "auto", "width": "100%", "max-width": "100%", "left": "0", "top": "0"});
                if (parent_height > image.height()) {
                    var new_width = parent_height * ratio,
                            left = new_width - parent_width,
                            new_left = left / 2;
                    image.css({"height": "100%", "width": new_width + "px", "max-width": new_width + "px", "left": "-" + new_left + "px", "top": "0"});
                } else if (parent_width > image.width() && parent_height < image.height()) {
                    var new_height = parent_width / ratio,
                            top = new_height - parent_height,
                            new_top = top / 2;
                    image.css({"height": new_height + "px", "width": "100%", "max-width": "100%", "left": "0", "top": "-" + new_top + "px"});
                }
            });
        }
        if (jQuery('.multi-section-slider .item').length) {
            jQuery('.multi-section-slider .bg-img').each(function () {
                var parent_height = jQuery(this).height(),
                        parent_width = jQuery(this).width(),
                        image = jQuery(this).children("img"),
                        img_width = image.get(0).naturalWidth,
                        img_height = image.get(0).naturalHeight,
                        ratio = img_width / img_height;
                image.css({"height": "auto", "width": "100%", "max-width": "100%", "left": "0", "top": "0"});
                if (parent_height > image.height()) {
                    var new_width = parent_height * ratio,
                            left = new_width - parent_width,
                            new_left = left / 2;
                    image.css({"height": "100%", "width": new_width + "px", "max-width": new_width + "px", "left": "-" + new_left + "px", "top": "0"});
                } else if (parent_width > image.width() && parent_height < image.height()) {
                    var new_height = parent_width / ratio,
                            top = new_height - parent_height,
                            new_top = top / 2;
                    image.css({"height": new_height + "px", "width": "100%", "max-width": "100%", "left": "0", "top": "-" + new_top + "px"});
                }
            });
        }

    }).resize();
});
/* Global Variable*/
var windowWidth,
        parentWidth,
        nextbtn,
        prevbtn,
        slider,
        item,
        itemLength,
        activeItem,
        activeIndex,
        leftValue,
        initItem;
initItem = 0;
activeIndex = 0;

/* To initialize or reset Function on document ready */

function init() {
    jQuery(".we-slider").each(function () {
        windowWidth = jQuery(window).width();
        parentWidth = jQuery(this).width();
        prevbtn = jQuery(this).find(".slider-nav .prev");
        nextbtn = jQuery(this).find(".slider-nav .next");
        slider = jQuery(this).find(".slider");
        itemLength = jQuery(this).find(".slider .item").size();
        /* set width of slide item */
        jQuery(this).find(".slider .item").css("width", parentWidth + "px");
        jQuery(this).find(".slider-nav .we-navs").empty();
        var i = 0;
        for (i; i < itemLength; i++) {
            jQuery(this).find(".slider-nav .we-navs").append("<span class=''></span>");
        }
        slider.css("margin-left", "0px");
        jQuery(this).find(".slider-nav .we-navs span").not(".slider-nav .we-navs .span:eq(0)").removeClass("active");
        jQuery(this).find(".slider-nav .we-navs span:eq(0)").addClass("active");
        prevbtn.css({"display": "none", "opacity": "0"});
        nextbtn.css("display", "block");
    });
}

/* To operate slider with we-nav(dots) */

function pageNav() {
    jQuery(document).on("click", ".we-slider .slider-nav span", function () {
        parentWidth = jQuery(this).parents(".we-slider").width();
        slider = jQuery(this).parents(".we-slider").find(".slider");
        jQuery(this).addClass("active");
        jQuery(this).parents(".we-slider").find(".slider-nav ").find("span").not(jQuery(this)).removeClass("active");
        activeIndex = jQuery(this).index();
        leftValue = parentWidth * activeIndex;
        slider.stop(true, true).animate({"margin-left": "-" + leftValue + "px"}, 600);
    });
}

/* To operate slider with next button */

function next() {
    jQuery(".we-slider .slider-nav").find(".next").click(function () {
        activeIndex = jQuery(this).parents(".we-slider").find(".slider-nav").find("span.active").index();
        parentWidth = jQuery(this).parents(".we-slider").width();
        slider = jQuery(this).parents(".we-slider").find(".slider");
        initItem = activeIndex;
        initItem++;
        leftValue = parentWidth * initItem;
        slider.stop(true, true).animate({"margin-left": "-" + leftValue + "px"}, 600);
        jQuery(this).parents(".we-slider").find(".slider-nav .we-navs span").not(".slider-nav .we-navs span:eq(" + initItem + ")").removeClass("active");
        jQuery(this).parents(".we-slider").find(".slider-nav .we-navs span:eq(" + initItem + ")").addClass("active");
    });
}

/* To operate slider with prev button */

function prev() {
    jQuery(".we-slider .slider-nav").find(".prev").click(function () {
        activeIndex = jQuery(this).parents(".we-slider").find(".slider-nav").find("span.active").index();
        parentWidth = jQuery(this).parents(".we-slider").width();
        slider = jQuery(this).parents(".we-slider").find(".slider");
        initItem = activeIndex;
        initItem--;
        leftValue = parentWidth * initItem;
        slider.stop(true, true).animate({"margin-left": "-" + leftValue + "px"}, 600);
        jQuery(this).parents(".we-slider").find(".slider-nav .we-navs span:eq(" + initItem + ")").addClass("active");
        jQuery(this).parents(".we-slider").find(".slider-nav .we-navs span").not(".slider-nav .we-navs span:eq(" + initItem + ")").removeClass("active");
    });
}

/* to check and hide/show prevbtn and nextbtn*/

function navigation() {
    jQuery(document).on("click", ".we-slider span, .we-slider .prev, .we-slider .next", function () {
        activeIndex = jQuery(this).parents(".we-slider").find(".slider-nav").find("span.active").index();
        prevbtn = jQuery(this).parents(".we-slider").find(".slider-nav").find(".prev");
        nextbtn = jQuery(this).parents(".we-slider").find(".slider-nav").find(".next");
        itemLength = jQuery(this).parents(".we-slider").find(".slider .item").size();
        if (activeIndex === 0) {
            prevbtn.animate({"opacity": "0"}, 150);
            nextbtn.animate({"opacity": "1"}, 100);
            nextbtn.css({"display": "block"});
            setTimeout(function () {
                prevbtn.css({"display": "none"});
            }, 150);
        } else if (activeIndex >= (itemLength - 1)) {
            prevbtn.animate({"opacity": "1"}, 100);
            nextbtn.animate({"opacity": "0"}, 150);
            prevbtn.css({"display": "block"});
            setTimeout(function () {
                nextbtn.css({"display": "none"});
            }, 150);
        } else if (activeIndex === 0 && itemLength == 1) {
            prevbtn.css({"display": "none"});
            nextbtn.css({"display": "none"});
        } else {
            prevbtn.animate({"opacity": "1"}, 100);
            nextbtn.animate({"opacity": "1"}, 100);
            nextbtn.css({"display": "block"});
            prevbtn.css({"display": "block"});

        }
    });
}

/*
 * multi-section-slider 
 */

/* Global Variables */
var mParentWidth,
        mNextbtn,
        mPrevbtn,
        mSlider,
        mItem,
        mItemLength,
        mActiveItem,
        mActiveIndex,
        mLeftValue,
        mInitItem,
        mViewItem,
        mItemsWidth,
        mItemWidth,
        mTotalNav;
mInitItem = 0;
mActiveIndex = 0;

/* To initialize or reset Function on document ready */

function mInit() {
    jQuery(".multi-section-slider").each(function () {
        mViewItem = jQuery(this).attr("data-items");
        mParentWidth = jQuery(this).width();
        mItem = jQuery(this).find(".item");
        mItemLength = jQuery(this).find(".item").size();
        mItem.css("width", (mParentWidth / mViewItem) + "px");
        mSlider = jQuery(this).find(".slider");
        mNextbtn = jQuery(this).find(".slider-nav .next");
        mPrevbtn = jQuery(this).find(".slider-nav .prev");
        mTotalNav = Math.ceil(mItemLength / mViewItem);
        jQuery(this).find(".slider-nav .we-navs").empty();
        for (i = 0; i < mTotalNav; i++) {
            jQuery(this).find(".slider-nav .we-navs").append("<span class=''></span>");
        }
        mSlider.css("margin-left", "0px");
        jQuery(this).find(".slider-nav .we-navs span").not(".slider-nav .we-navs .span:eq(0)").removeClass("active");
        jQuery(this).find(".slider-nav .we-navs span:eq(0)").addClass("active");
        mPrevbtn.css({"display": "none", "opacity": "0"});
        mNextbtn.css("display", "block");
    });
}

/* To operate slider with nav(dots) */

function mSlideNav() {

    jQuery(document).on("click", ".multi-section-slider .slider-nav span", function () {
        mViewItem = jQuery(this).parents(".multi-section-slider").attr("data-items");
        mActiveIndex = jQuery(this).index();
        mParentWidth = jQuery(this).parents(".multi-section-slider").width();
        mItemLength = jQuery(this).parents(".multi-section-slider").find(".item").size();
        mItemWidth = mParentWidth / mViewItem;
        mItemsWidth = mItemWidth * mItemLength;
        mLeftValue = mActiveIndex * mParentWidth;
        if ((mLeftValue + mParentWidth) > mItemsWidth) {
            mLeftValue = mItemsWidth - mParentWidth;
        }
        jQuery(this).parents(".multi-section-slider").find(".slider").stop(true, true).animate({"margin-left": "-" + mLeftValue + "px"}, 600);
        jQuery(this).addClass("active");
        jQuery(this).parents(".multi-section-slider").find(".slider-nav").find("span").not(jQuery(this)).removeClass("active");
    });
}

/* To operate slider with next button */

function mSlideNext() {
    jQuery(".multi-section-slider .slider-nav").find(".next").click(function () {
        mViewItem = jQuery(this).parents(".multi-section-slider").attr("data-items");
        mActiveIndex = jQuery(this).parents(".multi-section-slider").find(".slider-nav").find("span.active").index();
        mParentWidth = jQuery(this).parents(".multi-section-slider").width();
        mItemLength = jQuery(this).parents(".multi-section-slider").find(".item").size();
        mItemWidth = mParentWidth / mViewItem;
        mItemsWidth = mItemWidth * mItemLength;
        mInitItem = mActiveIndex;
        mInitItem++;
        mLeftValue = mInitItem * mParentWidth;
        if ((mLeftValue + mParentWidth) > mItemsWidth) {
            mLeftValue = mItemsWidth - mParentWidth;
        }
        jQuery(this).parents(".multi-section-slider").find(".slider").stop(true, true).animate({"margin-left": "-" + mLeftValue + "px"}, 600);
        jQuery(this).parents(".multi-section-slider").find(".slider-nav .we-navs span").not(".slider-nav .we-navs span:eq(" + mInitItem + ")").removeClass("active");
        jQuery(this).parents(".multi-section-slider").find(".slider-nav .we-navs span:eq(" + mInitItem + ")").addClass("active");
    });
}

/* To operate slider with prev button */

function mSlidePrev() {
    jQuery(".multi-section-slider .slider-nav").find(".prev").click(function () {
        mViewItem = jQuery(this).parents(".multi-section-slider").attr("data-items");
        mActiveIndex = jQuery(this).parents(".multi-section-slider").find(".slider-nav").find("span.active").index();
        mParentWidth = jQuery(this).parents(".multi-section-slider").width();
        mItemLength = jQuery(this).parents(".multi-section-slider").find(".item").size();
        mItemWidth = mParentWidth / mViewItem;
        mItemsWidth = mItemWidth * mItemLength;
        mInitItem = mActiveIndex;
        mInitItem--;
        mLeftValue = mInitItem * mParentWidth;
        jQuery(this).parents(".multi-section-slider").find(".slider").stop(true, true).animate({"margin-left": "-" + mLeftValue + "px"}, 600);
        jQuery(this).parents(".multi-section-slider").find(".slider-nav .we-navs span").not(".slider-nav .we-navs span:eq(" + mInitItem + ")").removeClass("active");
        jQuery(this).parents(".multi-section-slider").find(".slider-nav .we-navs span:eq(" + mInitItem + ")").addClass("active");
    });
}

/* to check and hide/show prevbtn and nextbtn*/

function mCheckNav() {
    jQuery(document).on("click", ".multi-section-slider span, .multi-section-slider .prev, .multi-section-slider .next", function () {
        mViewItem = jQuery(this).parents(".multi-section-slider").attr("data-items");
        mActiveIndex = jQuery(this).parents(".multi-section-slider").find(".slider-nav").find("span.active").index();
        mPrevbtn = jQuery(this).parents(".multi-section-slider").find(".slider-nav").find(".prev");
        mNextbtn = jQuery(this).parents(".multi-section-slider").find(".slider-nav").find(".next");
        mItemLength = jQuery(this).parents(".multi-section-slider").find(".item").size();
        mTotalNav = Math.ceil(mItemLength / mViewItem);
        mItemLength = mTotalNav;
        if (mActiveIndex === 0) {
            mPrevbtn.animate({"opacity": "0"}, 150);
            mNextbtn.animate({"opacity": "1"}, 100);
            mNextbtn.css({"display": "block"});
            setTimeout(function () {
                mPrevbtn.css({"display": "none"});
            }, 150);
        } else if (mActiveIndex >= (mItemLength - 1)) {
            mPrevbtn.animate({"opacity": "1"}, 100);
            mNextbtn.animate({"opacity": "0"}, 150);
            mPrevbtn.css({"display": "block"});
            setTimeout(function () {
                mNextbtn.css({"display": "none"});
            }, 150);
        } else {
            mPrevbtn.animate({"opacity": "1"}, 100);
            mNextbtn.animate({"opacity": "1"}, 100);
            mNextbtn.css({"display": "block"});
            mPrevbtn.css({"display": "block"});

        }
    });
}

function mSwipeTouch() {
    jQuery('.multi-section-slider').each(function () {
        jQuery(this).on('swipeleft', function () {
            if (mActiveIndex !== (mItemLength - 1)) {
                jQuery(this).children('.slider-nav').find('.next').trigger('click');
            }
        });
        jQuery(this).on('swiperight', function () {
            if (mActiveIndex !== 0) {
                jQuery(this).children('.slider-nav').find('.prev').trigger('click');
            }
        });
    });
}

function swipeTouch() {
    jQuery('.we-slider').each(function () {
        jQuery(this).on('swipeleft', function () {
            if (activeIndex !== (itemLength - 1)) {
                jQuery(this).children('.slider-nav').find('.next').trigger('click');
            }
        });
        jQuery(this).on('swiperight', function () {
            if (activeIndex !== 0) {
                jQuery(this).children('.slider-nav').find('.prev').trigger('click');
            }
        });
    });
}