Argthtjtr

My jQuery cycle slideshow doesn't work. I wrote the script in html but I can't work out how to get it working.

    $("#next").click(function() {

        $(".cycle-slideshow").cycle('next');

    });



        $("#prev").click(function() {

        $(".cycle-slideshow").cycle('prev');

    });

.body-content {

width: 100%;

min-height: 100px;

float: left;

margin-top:25px;

}



.content-left{

    width:63%;

    float: left;

    display: inline-block;

}



.content-right {

    width: 34%;

    float: right;

    display: inline-block;

    padding: 5px;

    background-color: blue;

}



.slider {

    width: 100%;

    float: left;

    display: inline-block;

    position: relative;

}



.cycle-slideshow {

    position: relative;

}



.cycle-overlay {

    position: absolute;

    bottom: 0;

    left: 0;

    background-color: #000;

    color: #fff;

    width: 100%;

    display: inline-block;

    line-height: 24px;

    padding-left: 5px;

    box-sizing: border-box;

}



.slider-control {

    position: absolute;

    top:25%;

    z-index: 1000;

    width: 100%;

}





.slider-control span {

    width: 35px;

    height: 35px;

    display: inline-block;

    text-align: center;

    line-height: 35px;

    background-color: #1111e1;

    color: #fff;

    cursor: pointer;

}



.slider-control span#next {

    float: right;

}



.slider-control span#prev {

    float: left;

}

<div class="body-content">

    <div class="container">

        <div class="content-left">

        <div class="slider">

<div class="slider-control">

    <span id="prev"><</span>

        <span id="next">></span>

        </div>

<div class="cycle-slideshow" data-cycle-fx="fade" data-cycle-slides="> div" data-cycle-timeout="2000">

        <img src="images/slide1.jpg">

        <div class="cycle-overlay">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id pulvinar libero, quis aliquet nisi. Fusce ullamcorper, nisi ut porttitor cursus, lectus sem aliquet nulla, eget interdum nisl metus id ante.</div>

    </div>

    <div>

        <img src="images/slide2.jpeg">

        <div class="cycle-overlay">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id pulvinar libero, quis aliquet nisi. Fusce ullamcorper, nisi ut porttitor cursus, lectus sem aliquet nulla, eget interdum nisl metus id ante.</div>

</div>

</div>

</div>

</div>

<div class="content-right">



    </div>

</div>

</div>

<script src="js/jquery.cycle.all.js"></script>

<script src=js/jquery-3.3.1.min.js></script>







<script>



    $("#next").click(function() {

        $(".cycle-slideshow").cycle('next');

    });



        $("#prev").click(function() {

        $(".cycle-slideshow").cycle('prev');

    });





</script>

</body>

</html>