Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Probleme mit cycle-Plugin (im Slider)“

Enigmon

Nicht mehr ganz neu hier

Hallo Leute,

heute habe ich mal ein Problem.
Ich habe dieses Tutorial mal durchgespielt und habe das Problem, dass anscheinend das Cycle-Plugin 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>
 

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.143
Beiträge
2.581.734
Mitglieder
67.209
Neuestes Mitglied
Diryn
Oben