Carousel gallery: mobile view not correct

  • Resolved Andreas 2013

    (@andreas-2013)


    3 years, 8 months ago

    Hello,

    I got a problem with the carousel gallery in mobile view and hope, that someone could help me.

    I’ve created a test page and inserted the carousel gallery with the block editor in wordpress. I’ve choosed six images for the gallery, to show two images in a row, so I have to slide to see the other images. That works perfect!

    Unfortunately I can’t work that way, because I get the data for the images from a database, which means, that I produce the code automatically with php.

    Therefore I’ve changed to the code-editor and copied the whole html-code from the test page, changed the static images with the dynamic image-links and pasted it into my wordpress template to display the gallery on a custom post type.

    Unfortunately the result is not the same as on the test page. There are two images shown in one row, but there’s a third (smaller) image hanging in the next row on the left. There are also no arrows, so I can’t slide other images at all.

    In the past this was working, I noticed the wrong view a few days ago! Maybe the wrong view is related to an update?

    By the way, to get the required code-lines into the head of the page, I have the following code in my functions.php:

    function my_custom_js() {
    echo “<script src=’https://mydomain.com/wp-content/plugins/kadence-blocks/dist/vendor/slick.min.js?ver=1.10.5&#8242; id=’kadence-slick-js’></script>
    <script src=’https://mydomain.com/wp-content/plugins/kadence-blocks/dist/kt-slick-init.js?ver=1.10.5&#8242; id=’kadence-blocks-slick-init-js’></script>
    <link rel=’stylesheet’ id=’kadence-blocks-gallery-css’ href=’https://mydomain.com/wp-content/plugins/kadence-blocks/dist/blocks/gallery.style.build.css?ver=1.10.5&#8242; media=’all’ />
    <link rel=’stylesheet’ id=’kadence-blocks-pro-slick-css’ href=’https://mydomain.com/wp-content/plugins/kadence-blocks/dist/vendor/kt-blocks-slick.css?ver=1.10.5&#8242; media=’all’ />”;
    }

    add_action( ‘admin_head’, ‘my_custom_js’ );
    add_action( ‘wp_head’, ‘my_custom_js’ );

    These lines are loaded into the head-section correctly. So what could be the problem?

    Thank you very much in advance for your help ??

    Andreas

    • This topic was modified 3 years, 8 months ago by Andreas 2013.
    • This topic was modified 3 years, 8 months ago by Andreas 2013.
Viewing 11 replies - 1 through 11 (of 11 total)
  • Thread Starter Andreas 2013

    (@andreas-2013)

    Is there anyone who could help me, please?

    What is the difference between using kadence blocks as usual with the editor or pasting the html-code from the editor into a custom template?

    As I mentioned, I’ve loaded the four lines of code (css + js) into the head-section manually. Is there any other code, that the plugin is needing?

    Thread Starter Andreas 2013

    (@andreas-2013)

    Update:
    The desktop view in Chrome browser is okay, but in Microsoft Edge the navigation arrows for the image slider are missing.

    hannah

    (@hannahritner)

    Hi Andreas,
    Apologies for the delay! Can you post a link? Have you tried deactivating your plugins to test if any are conflicting?

    Kindly,
    Hannah

    Thread Starter Andreas 2013

    (@andreas-2013)

    Hi Hannah,
    thank you for your reply!

    I’ve deactivated all other plugins. As far as I can see, there are no conflicts.

    Since the website is still under construction, I don’t really want to share the link publicly. Is there a possibility of a private message here?

    Thread Starter Andreas 2013

    (@andreas-2013)

    I just noticed, that the navigation-arrows disappear in Google Chrome (desktop), when I deactivate the Query-Monitor plugin or the HealthCheck plugin.
    In mobile view the gallery is still damaged (only one row with two big images, second row with a small image, now arrow-buttons).

    Thread Starter Andreas 2013

    (@andreas-2013)

    Hello Hannah,
    do you have an idea, what the problem could be?

    hannah

    (@hannahritner)

    Hey,
    Can you send me a screenshot of what you’re seeing? https://imgbb.com/

    Thanks,
    Hannah

    Thread Starter Andreas 2013

    (@andreas-2013)

    Hi Hannah,
    here is the link to the screenshot:
    https://ibb.co/4Y1FmSW

    In the meanwhile I made some more tests. Every time I create a gallery from the editor in wordpress backend, everything is okay. But pasting the source code into a template doesn’t work with mobiles. I first thought, it has to do with css. But it seems, that the navigation-arrows are completely missing. So maybe a javascript problem?

    Thank you in advance for your help ??

    hannah

    (@hannahritner)

    Hey,
    Without a link it’s hard to pinpoint the problem. Can you tell me how you’re adding the source code?

    Kindly,
    Hannah

    Thread Starter Andreas 2013

    (@andreas-2013)

    Hello Hannah,

    I’ve resolved the problem myself!

    The reason of the wrong view was, that I had’nt loaded jquery correct. After loading ‘https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js&#8217; with wp_enqueue_script to the head, everything is okay now!

    Thank you for your patience ??

    hannah

    (@hannahritner)

    Glad to hear it! Let us know if there’s anything else we can help you with.

    Best,
    Hannah

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Carousel gallery: mobile view not correct’ is closed to new replies.