Ad

Jquery: How Come My Carousel Slider Does Not Slide Anymore?

- 1 answer

Remake netflix does not slide anymore, the jquery will not function anymore, is this because of my previous code ? I don't see the problem, I did not touch the code from when it was working, but now all of the sudden it's not working ... I used this code-solution: Multiple sliders on one pagehttp://jsfiddle.net/shehovn/Nn4Kz/ hope someone will see what I did wrong ...

How to fix this ?

HTML

    <section>

        <div class="left" id="links">links</div>
        <div class="right" id="rechts">rechts</div>

        <div id="head">
            <h2>Movies</h2>
        </div>

        <div class="container" id="test">
            <div class="item first" data-childId="1">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een poes 1.</p>
                    </div>
                </div>

            </div>

            <div class="item first" data-childId="2">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een poes 2.</p>
                    </div>
                </div>
            </div>

            <div class="item first" data-childId="3">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een poes 3.</p>
                    </div>
                </div>
            </div>

            <div class="item first" data-childId="4">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een poes 4.</p>
                    </div>
                </div>
            </div>

            <div class="item first" data-childId="5">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een poes 5.</p>
                    </div>
                </div>
            </div>




            <div class="item second" data-childId="6">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een tijger 1.</p>
                    </div>
                </div>
            </div>
            <div class="item second" data-childId="7">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een tijger 2.</p>
                    </div>
                </div>
            </div>
            <div class="item second" data-childId="8">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een tijger 3.</p>
                    </div>
                </div>
            </div>
            <div class="item second" data-childId="9">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een tijger 4.</p>
                    </div>
                </div>
            </div>
            <div class="item second" data-childId="10">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een tijger 5.</p>
                    </div>
                </div>
            </div>





            <div class="item third" data-childId="11">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een aap 1.</p>
                    </div>
                </div>
            </div>
            <div class="item third" data-childId="12">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een aap 2.</p>
                    </div>
                </div>
            </div>
            <div class="item third" data-childId="13">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een aap 3.</p>
                    </div>
                </div>
            </div>
            <div class="item third" data-childId="14">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een aap 4.</p>
                    </div>
                </div>
            </div>
            <div class="item third" data-childId="15">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een aap 5.</p>
                    </div>
                </div>
            </div>





            <div class="item fourth" data-childId="16">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een vlinder 1.</p>
                    </div>
                </div>
            </div>
            <div class="item fourth" data-childId="17">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een vlinder 2.</p>
                    </div>
                </div>
            </div>
            <div class="item fourth" data-childId="18">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een vlinder 3.</p>
                    </div>
                </div>
            </div>
            <div class="item fourth" data-childId="19">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een vlinder 4.</p>
                    </div>
                </div>
            </div>
            <div class="item fourth" data-childId="20">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een vlinder 5.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="wall-container">
            <span class="close"><i class="fa fa-times"></i></span>
            <div class="wall" data-itamId="1">
                    <h2>Dit is een poes 1.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak </p>
            </div>
            <div class="wall" data-itamId="2">
                    <h2>Dit is een poes 2.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak </p>
            </div>
            <div class="wall" data-itamId="3">
                    <h2>Dit is een poes 3.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak </p>
            </div>
            <div class="wall" data-itamId="4">
                    <h2>Dit is een poes 4.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak .</p>
            </div>
            <div class="wall" data-itamId="5">
                    <h2>Dit is een poes 5.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak </p>
            </div>
            <div class="wall" data-itamId="6">
                    <h2>Dit is een tijger 1.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak </p>
            </div>
            <div class="wall" data-itamId="7">
                    <h2>Dit is een tijger 2.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak </p>
            </div>
            <div class="wall" data-itamId="8">
                    <h2>Dit is een tijger 3.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak </p>
            </div>
            <div class="wall" data-itamId="9">
                    <h2>Dit is een tijger 4.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak</p>
            </div>
            <div class="wall" data-itamId="10">
                    <h2>Dit is een tijger 5.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak </p>
            </div>
            <div class="wall" data-itamId="11">
                    <h2>Dit is een aap 1.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak</p>
            </div>
            <div class="wall" data-itamId="12">
                    <h2>Dit is een aap 2.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak </p>
            </div>
            <div class="wall" data-itamId="13">
                    <h2>Dit is een aap 3.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak </p>
            </div>
            <div class="wall" data-itamId="14">
                    <h2>Dit is een aap 4.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak </p>
            </div>
            <div class="wall" data-itamId="15">
                    <h2>Dit is een aap 5.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak </p>
            </div>
            <div class="wall" data-itamId="16">
                    <h2>Dit is een vlinder 1.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak </p>
            </div>
            <div class="wall" data-itamId="17">
                    <h2>Dit is een vlinder 2.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak </p>
            </div>
            <div class="wall" data-itamId="18">
                    <h2>Dit is een vlinder 3.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak </p>
            </div>
            <div class="wall" data-itamId="19">
                    <h2>Dit is een vlinder 4.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak </p>
            </div>
            <div class="wall" data-itamId="20">
                    <h2>Dit is een vlinder 5.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak</p>
            </div>
        </div>
    </section>
    <section>

        <div class="left" id="btn-l">links</div>
        <div class="right" id="btn-r">rechts</div>

        <div id="head1">
            <h2>Series</h2>
        </div>

        <div class="container">

            <div class="item first" data-childId="21">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een poes 1.</p>
                    </div>
                </div>

            </div>

            <div class="item first" data-childId="22">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een poes 2.</p>
                    </div>
                </div>
            </div>

            <div class="item first" data-childId="23">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een poes 3.</p>
                    </div>
                </div>
            </div>

            <div class="item first" data-childId="24">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een poes 4.</p>
                    </div>
                </div>
            </div>

            <div class="item first" data-childId="25">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een poes 5.</p>
                    </div>
                </div>
            </div>




            <div class="item second" data-childId="26">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een tijger 1.</p>
                    </div>
                </div>
            </div>
            <div class="item second" data-childId="27">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een tijger 2.</p>
                    </div>
                </div>
            </div>
            <div class="item second" data-childId="28">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een tijger 3.</p>
                    </div>
                </div>
            </div>
            <div class="item second" data-childId="29">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een tijger 4.</p>
                    </div>
                </div>
            </div>
            <div class="item second" data-childId="30">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een tijger 5.</p>
                    </div>
                </div>
            </div>





            <div class="item third" data-childId="31">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een aap 1.</p>
                    </div>
                </div>
            </div>
            <div class="item third" data-childId="32">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een aap 2.</p>
                    </div>
                </div>
            </div>
            <div class="item third" data-childId="33">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een aap 3.</p>
                    </div>
                </div>
            </div>
            <div class="item third" data-childId="34">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een aap 4.</p>
                    </div>
                </div>
            </div>
            <div class="item third" data-childId="35">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een aap 5.</p>
                    </div>
                </div>
            </div>





            <div class="item fourth" data-childId="36">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een vlinder 1.</p>
                    </div>
                </div>
            </div>
            <div class="item fourth" data-childId="37">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een vlinder 2.</p>
                    </div>
                </div>
            </div>
            <div class="item fourth" data-childId="38">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een vlinder 3.</p>
                    </div>
                </div>
            </div>
            <div class="item fourth" data-childId="39">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een vlinder 4.</p>
                    </div>
                </div>
            </div>
            <div class="item fourth" data-childId="40">
                <div class="caption">
                    <div class="title">
                        <p>Dit is een vlinder 5.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="wall-container">
            <span class="close"><i class="fa fa-times"></i></span>
            <div class="wall" data-itamId="21">
                    <h2>Dit is een poes 1.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak </p>
            </div>
            <div class="wall" data-itamId="22">
                    <h2>Dit is een poes 2.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak </p>
            </div>
            <div class="wall" data-itamId="23">
                    <h2>Dit is een poes 3.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak </p>
            </div>
            <div class="wall" data-itamId="24">
                    <h2>Dit is een poes 4.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak </p>
            </div>
            <div class="wall" data-itamId="25">
                    <h2>Dit is een poes 5.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak </p>
            </div>
            <div class="wall" data-itamId="26">
                    <h2>Dit is een tijger 1.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak </p>
            </div>
            <div class="wall" data-itamId="27">
                    <h2>Dit is een tijger 2.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak </p>
            </div>
            <div class="wall" data-itamId="28">
                    <h2>Dit is een tijger 3.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak </p>
            </div>
            <div class="wall" data-itamId="9">
                    <h2>Dit is een tijger 4.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak </p>
            </div>
            <div class="wall" data-itamId="30">
                    <h2>Dit is een tijger 5.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak </p>
            </div>
            <div class="wall" data-itamId="31">
                    <h2>Dit is een aap 1.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak </p>
            </div>
            <div class="wall" data-itamId="32">
                    <h2>Dit is een aap 2.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak</p>
            </div>
            <div class="wall" data-itamId="33">
                    <h2>Dit is een aap 3.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak</p>
            </div>
            <div class="wall" data-itamId="34">
                    <h2>Dit is een aap 4.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak</p>
            </div>
            <div class="wall" data-itamId="35">
                    <h2>Dit is een aap 5.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak </p>
            </div>
            <div class="wall" data-itamId="36">
                    <h2>Dit is een vlinder 1.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak </p>
            </div>
            <div class="wall" data-itamId="37">
                    <h2>Dit is een vlinder 2.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak </p>
            </div>
            <div class="wall" data-itamId="38">
                    <h2>Dit is een vlinder 3.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak</p>
            </div>
            <div class="wall" data-itamId="39">
                    <h2>Dit is een vlinder 4.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak</p>
            </div>
            <div class="wall" data-itamId="40">
                    <h2>Dit is een vlinder 5.</h2>
                    <p>Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak</p>
            </div>
        </div>
    </section>
</body>

</html>

Jquery

$('.close').hide();

        $(".item[data-childId]").on("click", function(e) {
            $(".wall").hide();
            var childId = $(e.currentTarget).data("childid");
            var parent = $("div[data-itamId='" + childId + "']").parent(".wall-container");
            $(parent).css({position: "static"});
            $("div[data-itamId='" + childId + "']").show();
            $('.close', parent).show();
        });

        $('.close').click(function(){
            $(".wall").hide();
            $('.close').hide();
            $('.wall-container').css({position: "absolute"});
        });

        var count = 0;
        $('.links').hide();
        $('.rechts').click(function(){
            $('.links').show();
            count+= 1;
            if(count >= 3){
                $('.rechts').hide();
            }
        });
        $('.links').click(function(){
            count-=1;
            if(count<3){
                $('.rechts').show();
            }
            if(count == 0){
                $('.links').hide();
            }
        });


        var page = 0;
        $('.left').hide();
        $('.right').click(function(){
            $('.left').show();
            page+= 1;
            if(page >= 3){
                $('.right').hide();
            }
        });
        $('.left').click(function(){
            page-=1;
            if(page<3){
                $('.right').show();
            }
            if(page == 0){
                $('.left').hide();
            }
        });

CODE THAT DOESN'T WORK ANYMORE

(function($) {
            $('section').each(function(){
                var slider = $(this).find('.container'),
                parent = $(this),
                step = 1400,
                left = parseInt(slider.css('left'), 10),
                max = parent.width() - slider.width(),
                min = 0;
                console.log(parent);


            parent.find(".right").click(function() {
                if (left > max) {
                    var newLeft = left - step;
                    left = (newLeft>max) ? newLeft : max;
                    slider.animate({
                        "left": left + 'px'
                    }, "slow");
                }
            });

            parent.find(".left").click(function() {
                if (left < 0) {
                    var newLeft = left + step;
                    left = (newLeft<min) ? newLeft : min;
                    slider.animate({
                        "left": left + 'px'
                    }, "slow");
                }
            });
        });
    });

CSS

@charset "utf-8";
/* CSS Document */
body{
    background-color: black;
    color:white;
}
section{
    max-width: 1400px;
    overflow: hidden;
    margin: auto;
}
.container{
    width: 400%;
    margin: auto;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    left: 0px;
    z-index: 10;
    /*transform: translate(-75%);
    Dit zijn je speelvelden (0% = pagina 1; 25% = pagina 2; etc. */
}
.item{
    flex-grow: 1;
    height: 100px;
    width: 200px;
    transition: all 300ms ease-in-out;
    position: relative;
}
.first{
    background: url('https://cdn.pixabay.com/photo/2019/12/15/18/24/winter-4697776_1280.jpg') no-repeat center center transparent;
    background-size: cover;
}
.second{
    background: url('https://cdn.pixabay.com/photo/2019/02/22/12/30/forest-4013452_1280.jpg') no-repeat center center transparent;
    background-size: cover;
}
.third{
    background: url('https://cdn.pixabay.com/photo/2019/11/22/06/40/wolchulsan-4644223_1280.jpg') no-repeat center center transparent;
    background-size: cover;
}
.fourth{
    background: url('https://cdn.pixabay.com/photo/2019/08/02/14/20/eagle-4379798_1280.jpg') no-repeat center center transparent;
    background-size: cover;
}
.item:hover{
    flex-grow: 2;
    height: 150px;
}
.caption{
    opacity: 0;
    position: absolute;
    top: 65%;
    left: 15px;
    right: 0;
    bottom: 0;
    transition: all 300ms ease-in-out;
}
.item:hover .caption{
    opacity: 1;
    color:  aliceblue;
    font-size: 150%;
}

#links{
    text-align: center;
    width:50px;
    height: 100px;
    border: 1px solid red;
    position: absolute;
    left: 10px;
    top: 145px;
    z-index: 100;
}
#rechts{
    text-align: center;
    width:50px;
    height: 100px;
    border: 1px solid red;
    position: absolute;
    right: 10px;
    top: 145px;
    z-index: 100;
}
.wall{
    display: none;
    background: rgba(205,157,158,0.50);
}
.wall-container{
    width: 90%;
    height: 200px;
    margin: auto;
    padding: 15px;
    color: white;
    top: 300px;
    left: 150px;
    position: absolute;
    overflow: hidden;
}
.wall p{
    width:30%;
    position: relative;
}
.close{
    position: relative;
    float: right;
}
#btn-l{
    text-align: center;
    width:50px;
    height: 100px;
    border: 1px solid red;
    position: absolute;
    left: 10px;
    top: 310px;
    z-index: 100;
}
#btn-r{
    text-align: center;
    width:50px;
    height: 100px;
    border: 1px solid red;
    position: absolute;
    right: 10px;
    top: 315px;
    z-index: 100;
}
Ad

Answer

Change (function($){ to $(function() { in the code that doesnt work section!

Ad
source: stackoverflow.com
Ad