$(document).ready
(
    function() {
        // creates a slider which acts as a pager
        var pager = $('.pager-products').bxSlider
	    (
		    {
		        prevText: '',
		        nextText: '',
		        displaySlideQty: 3, // show three products at a time
		        moveSlideQty: 1 // move 1 position using prev or next arrows
		    }
	    );

        var slideCount = pager.getSlideCount();

        // if there are 3 slider or less, remove the prev and next arrows
        if (slideCount <= 3) {
            $('.bx-next').css('display', 'none'); // remove next
            $('.bx-prev').css('display', 'none'); // remove prev
        };


        // creates a slider that displays product details
        var slider = $('#slider-products').bxSlider
	    (
		    {
		        controls: false,
		        pager: false,
		        pagerType: 'short'
		    }
	    );

        // assign a click event to the external thumbnails
        $('.pager-products a').click
	    (
		    function() {
		        var sliderIndex = $('.pager-products a').index(this) - 1;
		        //var pagerIndex = $('.pager-products a').index(this); // when showing 3 pager links - this moves selected to middle

		        // call the "goToSlide" public function
		        slider.goToSlide(sliderIndex);

		        // remove all active classes
		        $('.pager-products a').removeClass('pager-active');
		        // assisgn "pager-active" to clicked pager item
		        $(this).addClass('pager-active');
		        // very important! you must kill the links default behavior
		        return false;
		    }
	    );

        // assign "pager-active" class to the first pager link
		$('.pager-products .pager:first a').addClass('pager-active');        
		    
        // go to the first slide
        pager.goToSlide(0);

    }
);