jQuery Slider displaying images below each other

Question

I've created a slider that I need to have in this web project, but instead of displaying slider the webpage displays full width images below each other.

I'm using jQuery Cycle2 for this and here's my code:

HTML

<section>
    <div class="cycle-slideshow">
        <span class="cycle-prev">&#9001;</span>
        <span class="cycle-next">&#9002;</span>
        <span class="cycle-pager"></span>
        <img src="img/slider/1.jpg">
        <img src="img/slider/2.jpg">
        <img src="img/slider/3.jpg">
    </div>
</section>

CSS

/*----- CAROUSEL -----*/

.cycle-slideshow img {
    max-width: 100%;
}
.cycle-slideshow {
    margin-top: 15px;
    width: 100%;
    display: block;
    position: relative;
    margin: 0 auto;
}
.cycle-prev,
.cycle-next {
    font-size: 200%;
    color: #FFF;
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -16px;
    z-index: 9999;
    cursor: pointer;
}
.cycle-prev {
    left: 10%;
}
.cycle-next {
    right: 10%;
}
.cycle-pager {
    width: 100%;
    text-align: center;
    display: block;
    position: absolute;
    bottom: 20px;
    z-index: 9999;
    cursor: pointer;
}
.cycle-pager span {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 12px;
    height: 12px;
    display: inline-block;
    border: 1px solid #FFF;
    border-radius: 50%;
    margin: 0 10px;
}
.cycle-pager .cycle-pager-active {
    background: #FFF;
}

Can someone help me out with this? Dont know what's causing the problem