$(document).ready(function() {

    var n = 0; //initialize n
    var totalImageWidth = 0; //initialize
    var totalLi = jQuery('.shopComponentHorizontalContainerHorizontal .shopComponentHorizontalC li').size(); //totalLi will recieve the size of how many items are in the container
    var totalLiScroll = totalLi - 4; //totalLiScroll will show at most (x-1) amount of items on the screen ##VERY IMPORTANT##

    for (i = 0; i < totalLi; i++) { //loops to get the total width of the images with margin together
        totalImageWidth += jQuery('.shopComponentHorizontalContainerHorizontal .shopComponentHorizontalC ul li').eq(i).outerWidth(true);
    }

    jQuery('.shopComponentHorizontalContainerHorizontal .shopComponentHorizontalC').css('width', totalImageWidth); //assigns the width to the container

    jQuery('.shopComponentHorizontalContainerHorizontal .arrowRight').click(function() { //moves items left by making them disappear on the left
        if (n == totalLiScroll + 1)
        {
            n = totalLiScroll;
        }
        jQuery('.shopComponentHorizontalContainerHorizontal .shopComponentHorizontalC ul li').eq(n).animate(
        {width:'hide',marginRight:'0',opacity: 'hide'},
        {duration: 600, easing: 'swing', queue: true}
                );
        n++;
    });

    jQuery('.shopComponentHorizontalContainerHorizontal .arrowLeft').click(function() { //moves items right by making them reappear on the left
        n--;
        if (n <= 0)
        {
            n = 0;
        }
        jQuery('.shopComponentHorizontalContainerHorizontal .shopComponentHorizontalC ul li').eq(n).animate(
        {width:'show',marginRight:'40px',opacity: 'show'},
        {duration: 600, easing: 'swing', queue: true}
                );
    });
});

jQuery(document).ready(function() {

    var n = 0; //initialize n
    var totalImageWidth = 0; //initialize
    var totalLi = jQuery('.shopComponentHorizontalContainerVertical .shopComponentHorizontalC li').size(); //totalLi will recieve the size of how many items are in the container
    var totalLiScroll = totalLi - 2; //totalLiScroll will show at most (x-1) amount of items on the screen ##VERY IMPORTANT##

    for (i = 0; i < totalLi; i++) { //loops to get the total width of the images with margin together
        totalImageWidth += jQuery('.shopComponentHorizontalContainerVertical .shopComponentHorizontalC ul li').eq(i).outerWidth(true);
    }

    jQuery('.shopComponentHorizontalContainerVertical .shopComponentHorizontalC').css('width', totalImageWidth); //assigns the width to the container

    jQuery('.shopComponentHorizontalContainerVertical .arrowRight').click(function() { //moves items left by making them disappear on the left
        if (n == totalLiScroll + 1)
        {
            n = totalLiScroll;
        }
        jQuery('.shopComponentHorizontalContainerVertical .shopComponentHorizontalC ul li').eq(n).animate(
        {width:'hide',marginRight:'0',opacity: 'hide'},
        {duration: 600, easing: 'swing', queue: true}
                );
        n++;
    });

    jQuery('.shopComponentHorizontalContainerVertical .arrowLeft').click(function() { //moves items right by making them reappear on the left
        n--;
        if (n <= 0)
        {
            n = 0;
        }
        jQuery('.shopComponentHorizontalContainerVertical .shopComponentHorizontalC ul li').eq(n).animate(
        {width:'show',marginRight:'40px',opacity: 'show'},
        {duration: 600, easing: 'swing', queue: true}
                );
    });
});

jQuery(document).ready(function() {

    var n = 0; //initialize n
    var totalImageWidth = 0; //initialize
    var totalLi = jQuery('.shopComponentHorizontalContainerHome .shopComponentHorizontalC li').size(); //totalLi will recieve the size of how many items are in the container
    var totalLiScroll = totalLi - 3; //totalLiScroll will show at most (x-1) amount of items on the screen ##VERY IMPORTANT##

    for (i = 0; i < totalLi; i++) { //loops to get the total width of the images with margin together
        totalImageWidth += jQuery('.shopComponentHorizontalContainerHome .shopComponentHorizontalC ul li').eq(i).outerWidth(true);
    }

    jQuery('.shopComponentHorizontalContainerHome .shopComponentHorizontalC').css('width', totalImageWidth); //assigns the width to the container

    jQuery('.shopComponentHorizontalContainerHome .arrowRight').click(function() { //moves items left by making them disappear on the left
        if (n == totalLiScroll + 1)
        {
            n = totalLiScroll;
        }
        jQuery('.shopComponentHorizontalContainerHome .shopComponentHorizontalC ul li').eq(n).animate(
        {width:'hide',marginRight:'0',opacity: 'hide'},
        {duration: 600, easing: 'swing', queue: true}
                );
        n++;
    });

    jQuery('.shopComponentHorizontalContainerHome .arrowLeft').click(function() { //moves items right by making them reappear on the left
        n--;
        if (n <= 0)
        {
            n = 0;
        }
        jQuery('.shopComponentHorizontalContainerHome .shopComponentHorizontalC ul li').eq(n).animate(
        {width:'show',marginRight:'40px',opacity: 'show'},
        {duration: 600, easing: 'swing', queue: true}
                );
    });
});