Probleme mit cycle-Plugin (im Slider)

Enigmon · 22.05.2015

Hallo Leute,

heute habe ich mal ein Problem.
Ich habe

Bitte kostenlos registrieren, damit du die Links siehst.

Tutorial mal durchgespielt und habe das Problem, dass anscheinend das

Bitte kostenlos registrieren, damit du die Links siehst.

bei mir nicht funktioniert. Kann mir jemand helfen, den Fehler zu finden?

Ich habe die JS-Dateien in einen js-Ordner und die Image-Dateien in einen img-Ordner(einfache Farbbilder 100x100px gross) gepackt.
JQuery funktioniert (hatte ein paar Tests gemacht), aber keine Reaktion seitens des Plugins.

Der Erzeugte Code:

Code:

<!DOCTYPE html>
<html lang="de-DE">
<head>
<meta charset="UTF-8">
<title>Awesome Image Slider</title>
<!--[if lt IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.js"></script>
<![endif]-->



<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<!-- <script src="http://code.jquery.com/jquery-latest.js"></script> -->
<!--<script type="text/javascript" src="http://malsup.github.io/jquery.cycle.all.js"></script>-->

<script type="text/javascript">
   
   
    $(function(){
        $('#play').click(function() {
            $('#slider').cycle('resume');
            return false;
        });
        $('#pause').click(function() {
            $('#slider').cycle('pause');
            return false;
        });
   
        $('#slider').cycle({
            fx:            'scrollHorz',
            next:        '#next',
            prev:        '#prev',
            pager:        '#pager',
            timeout:    3000,
            speed:        900
           
        });
    });
</script>

<style type="text/css">
#hero{
    width: 960px; height: 500px; position: relative; display: block;
    margin: auto;
}
#slider{
    width: 960px; height: 500px; position: absolute; display: block; overflow: hidden;
}
.items img{
    width:960px; height: 500px;
}
.info{
    width: 960px; height: 80px; position: relative; bottom: 100px;
    background: rgba(102,204,204,.2);
    z-index: 99;
}

.info h2{
    font-family: sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    padding: 15px 0 0 20px;
}
.info p{
    font-family: sans-serif;
    font-size: 15px;
    font-weight: lighter;
    color: #fff;
    padding: 0 0 0 20px;
    line-height: 1px;
}

#play{
    width: 40px; height:40px; position: absolute; top: 0; right:44px; display: block;
    line-height: 40px;
    text-align: center;
    background: rgba(102,204,0,.2); color:#fff;
    cursor: pointer;
    z-index: 999;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
}
#pause{
    width: 40px; height:40px; position: absolute; top: 0; right:88px; display: block;
    line-height: 40px;
    text-align: center;
    background: rgba(102,204,0,.2); color:#fff;
    cursor: pointer;
    z-index: 999;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
}
#next{
    width: 40px; height:40px; position: absolute; top: 0; right:0; display: block;
    line-height: 40px;
    text-align: center;
    background: rgba(102,204,0,.2); color:#fff;
    cursor: pointer;
    z-index: 999;
}
#prev{
    width: 40px; height:40px; position: absolute; top: 0; right:133px; display: block;
    line-height: 40px;
    text-align: center;
    background: rgba(102,204,0,.2); color:#fff;
    cursor: pointer;
    z-index: 999;
}
#pager{
    width: 100%; position:absolute; display: block;
    text-align: center;
    cursor: pointer;
    z-index: 999;
   
}
#pager a{
    width: 10px; height: 10px; position: relative; display: inline-block;
    border: 1px solid #fff;
    border-radius: 20px;
    background: transparent; color: transparent;
    margin: 10px;
    font-size: .0em;
}

#pager a.activeSlide{
    background: #fff;
}

</style>
</head>

<body>
<header></header>
<nav></nav>
<section>
<div id="hero">
    <!-- Controls -->
    <div id="pager"></div>
    <div id="pause">&asymp;</div>
    <div id="play">&Delta;</div>
    <div id="next">&rang;</div>
    <div id="prev">&lang;</div>
   
   
    <!-- Slider -->
    <div id="slider">
        <div class="items">
            <img src="img/img1.png">
            <div class="info">
                <h2>The Blue Image</h2>
                <p>Es ist ein blaues Bild <a href="https://www.psd-tutorials.de/">test1</a></p>
            </div>
            <div class="items">
            <img src="img/img2.png">
            <div class="info">
                <h2>The Rose Image</h2>
                <p>Es ist ein rosa Bild <a href="https://www.psd-tutorials.de/">test2</a></p>
            </div>
        </div>
        <div class="items">
            <img src="img/img3.png">
            <div class="info">
                <h2>The Red Image</h2>
                <p>Es ist ein rotes Bild <a href="https://www.psd-tutorials.de/">test3</a></p>
            </div>
        </div>
        <div class="items">
            <img src="img/img4.png">
            <div class="info">
                <h2>The Yellow Image</h2>
                <p>Es ist ein gelbes Bild <a href="https://www.psd-tutorials.de/">test4</a></p>
            </div>
        </div>
        <div class="items">
            <img src="img/img5.png">
            <div class="info">
                <h2>The Green Image</h2>
                <p>Es ist ein grünes Bild <a href="https://www.psd-tutorials.de/">test5</a></p>
            </div>
        </div>
        </div>
    </div>

</div>
</section>
<footer></footer>
</body>

</html>