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.