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:
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">≈</div>
<div id="play">Δ</div>
<div id="next">⟩</div>
<div id="prev">⟨</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>