2 responsive carousels on one page - settings

[hejke]

Hi,

I am trying to have two independent, responsive carousels on the same page. In HTML structure they are the same. The first carousel has CSS-class "jcarousel", the second "jcarousel_tipps"

The first carousel (jcarousel) works fine.

I use the settings:

	var jcarousel = $('.jcarousel');

    jcarousel
        .on('jcarousel:reload jcarousel:create', function () {
            var width = jcarousel.innerWidth();
            
            if(width >= 1000){
            	width = width / 5;
            } else if (width >= 900) {
                width = width / 4;
            } else if (width >= 650) {
                width = width / 3;
            } else if (width >= 300) {
                width = width / 2;
			}

            jcarousel.jcarousel('items').css('width', Math.ceil(width) + 'px');
        })
        .jcarousel({
            wrap: 'circular'
        });

    $('.jcarousel-control-prev')
        .jcarouselControl({
            target: '-=1'
        });

    $('.jcarousel-control-next')
        .jcarouselControl({
            target: '+=1'
    	});
    
	$('.jcarousel').jcarouselAutoscroll({
   	interval: 6500
	});

The second carousel does not look nice. It is not responsive, the single items are far too wide.

I use the settings:

    var jcarousel_tipps = $('.jcarousel_tipps');

    jcarousel_tipps
        .on('jcarousel_tipps:reload jcarousel_tipps:create', function () {
            var width = jcarousel.innerWidth();
            if(width >= 1000){
            	width = width / 5;
            } else if (width >= 900) {
                width = width / 4;
            } else if (width >= 650) {
                width = width / 3;
            } else if (width >= 300) {
                width = width / 2;
			}
            jcarousel.jcarousel('items').css('width', Math.ceil(width) + 'px');
        })
        .jcarousel({
            wrap: 'circular'
        });
    
        
       $('.jcarousel_tipps-control-prev')
        .jcarouselControl({
            target: '-=1'
        });

    	$('.jcarousel_tipps-control-next')
        .jcarouselControl({
            target: '+=1'
    	});
		
	$('.jcarousel_tipps').jcarouselAutoscroll({
	interval: 7500
	});

Do you have any clue whats wrong?

Here you can see the page, but it's still very much under development...https://new.polarlichtexpress.de/

Thank you so much for your time in advance.