Link in item confused navigation

[rolandow]

I have some text in my li items (not just links with pictures). Now when I use a link in this text, the next button thinks that this is an image too; but it can't find the image and the ajax loader is shown. So instead of three images, the carousel thinks there are four images with the code I will post below.

When I remove the link from the first post, the carousel works perfectly.

I thought I could fix this by using the items selector as stated in the manual. So I tried

jQuery(document).ready(function() {
    jQuery('.mycarousel').jcarousel({
        scroll:1,
        wrap:"both",
        items: ".carousel-item"
    });
});

But this didn't help. My list looks like this:

<ul class="mycarousel thumbs" data-gallery="one">
    <li class="item">
        <figure><a href="/files/2017-04/boot-hotels-terschelling.jpg?05f7f4b668" class="carousel-item"><div class="icon-hover" ></div><img src="/thumbs/about/2017-04/boot-hotels-terschelling.jpg?_locale=nl" class="scale-with-grid" alt=""/></a></figure>
        <div class="spacer-2">
            <h3>Reis <span>veerboot</span></h3>
            <p>Uw reis van en naar het eiland Terschelling gaat met een veerboot vanuit Harlingen.</p>

            <p><a href="http://www.google.com">www.google.com</a></p>

        </div>
    </li>

    <li class="item">
        <figure><a href="/files/2017-04/jong-holland-huis-rotated.jpg?d250fcac99" class="carousel-item"><div class="icon-hover" ></div><img src="/thumbs/about/2017-04/jong-holland-huis-rotated.jpg?_locale=nl" class="scale-with-grid" alt=""/></a></figure>
        <div class="spacer-2">
            <h3>Verblijf <span>op uw duin</span></h3>
            <p>lorem ipsum</p>

        </div>
    </li>

    <li class="item">
        <figure><a href="/files/2017-04/jong-holland-terrassen-2-.jpg?111703e1a7" class="carousel-item"><div class="icon-hover" ></div><img src="/thumbs/about/2017-04/jong-holland-terrassen-2-.jpg?_locale=nl" class="scale-with-grid" alt=""/></a></figure>
        <div class="spacer-2">
            <h3>Zon <span>terras</span></h3>
            <p>lorem ipsum</p>

        </div>
    </li>
</ul>

[snake-345]

You don't have the correct markup. Just try:

jQuery(document).ready(function() {
    jQuery('.mycarousel').jcarousel({
        scroll:1,
        wrap:"both",
        items: ".item"
    });
});

and markup:

<div class="mycarousel thumbs" data-gallery="one">
    <ul>
        <li class="item">
            <figure><a href="/files/2017-04/boot-hotels-terschelling.jpg?05f7f4b668" class="carousel-item"><div class="icon-hover" ></div><img src="/thumbs/about/2017-04/boot-hotels-terschelling.jpg?_locale=nl" class="scale-with-grid" alt=""/></a></figure>
            <div class="spacer-2">
                <h3>Reis <span>veerboot</span></h3>
                <p>Uw reis van en naar het eiland Terschelling gaat met een veerboot vanuit Harlingen.</p>

                <p><a href="http://www.google.com">www.google.com</a></p>

            </div>
        </li>

        <li class="item">
            <figure><a href="/files/2017-04/jong-holland-huis-rotated.jpg?d250fcac99" class="carousel-item"><div class="icon-hover" ></div><img src="/thumbs/about/2017-04/jong-holland-huis-rotated.jpg?_locale=nl" class="scale-with-grid" alt=""/></a></figure>
            <div class="spacer-2">
                <h3>Verblijf <span>op uw duin</span></h3>
                <p>lorem ipsum</p>

            </div>
        </li>

        <li class="item">
            <figure><a href="/files/2017-04/jong-holland-terrassen-2-.jpg?111703e1a7" class="carousel-item"><div class="icon-hover" ></div><img src="/thumbs/about/2017-04/jong-holland-terrassen-2-.jpg?_locale=nl" class="scale-with-grid" alt=""/></a></figure>
            <div class="spacer-2">
                <h3>Zon <span>terras</span></h3>
                <p>lorem ipsum</p>

            </div>
        </li>
    </ul>
</div>

And don't forgive some styles. You can find instruction about simple installation here

If you need more help please add a sample code in jsfiddle.