How to fix conflict in jquery?

Question

css

Hello everyone, the problem is very simple, but not for me, jq knowledge is lame and I can’t understand what’s wrong.
The bottom line is that there is a normal bootstrap slider in the header, but the left and right arrows do not work because of the script with the table
. Here is the code that causes the arrows to not work

{
    	var sortingButtons = $('.item_sorting_btn');

    	if($('.grid').length)
    	{
    		var grid = $('.grid').isotope({
    			itemSelector: '.grid-item',
    			percentPosition: true,
    			masonry:
    			{
            horizontalOrder: true
        	},
        	getSortData:
              {
              	price: function(itemElement)
              	{
              		var priceEle = $(itemElement).find('.product_price').text().replace( '$', '' );
              		return parseFloat(priceEle);
              	},
              	name: '.tt_class_title'
              }
          });

          // Filtering
          $('.item_filter_btn').on('click', function()
          {
          	var buttons = $('.item_filter_btn');
          	buttons.removeClass('active');
          	$(this).addClass('active');
            var filterValue = $(this).attr('data-filter');
        grid.isotope({ filter: filterValue });
          });
    	}
    }

You can see here

Answer 1

Try changing classes.