Mit nem Anfänger Schritt für Schritt nen Slider bauen...
Ich habe mir in den Kopf gesetzt, jQuery soweit zu beherrschen, dass ich hier und da mal ein kleines Skript schreiben kann. Mein Problem ist aber, dass ich einfach das Grundgerüst nicht in meinen Schädel bekomme. Wenn ich ein Script sehe, kann ich zwar nachvollziehen (meistens) was es mach, aber selber schreiben? Nee, wird nichts. Ich hab sogar schon ein Buch durchgearbeitet, aber auch das hat nicht allzu viel gebracht. Ich brauche einfach Beispiele, die ich auch wirklich in der Praxis nachvollziehen kann. PHP habe ich z.B. gelernt, indem ich einen Internetshop gebaut habe.
Den Shop will ich nun, nach 10 Jahren, komplett umbauen - eben auf mit jQuery. Dafür brauche ich jetzt beispielsweise einen Slider. Ein fertiges Plugin habe ich zwar schon eingebaut, aber ich brauche noch einen ganz einfachen. Dazu habe ich ein Tutorial im Internet gefunden und das will ich eben von Grund auf nachvollziehen können. Offenbar hat das Script ohnehin ein paar Fehler, denn es funktioniert nicht
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<style>
#slider {
position: relative;
overflow: hidden;
margin: 20px auto 0 auto;
border-radius: 4px;
}
#slider ul {
position: relative;
margin: 0;
padding: 0;
height: 200px;
list-style: none;
}
#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 500px;
height: 300px;
background: #ccc;
text-align: center;
line-height: 300px;
}
a.control_prev, a.control_next {
position: absolute;
top: 40%;
z-index: 999;
display: block;
padding: 4% 3%;
width: auto;
height: auto;
background: #2a2a2a;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 18px;
opacity: 0.8;
cursor: pointer;
}
a.control_prev:hover, a.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
}
a.control_prev {
border-radius: 0 2px 2px 0;
}
a.control_next {
right: 0;
border-radius: 2px 0 0 2px;
}
.slider_option {
position: relative;
margin: 10px auto;
width: 160px;
font-size: 18px;
}
#slider1 ul{
}
#slider1 > ul{
width:20%;
border:1px solid black;
height:100px;
float:left;
position:relative;
margin:5px;
overflow:hidden;
}
#test1,#test2,#test3,#test4{
transition:100ms all;
background:green;
position:absolute;
list-style:none;
}
</style>
<script src="/js_webseite/jquery.min.js"></script>
<div id="slider">
<a href="#" class="control_next">>></a>
<a href="#" class="control_prev"><<</a>
<ul>
<li id="bild1">Bild 1</li>
<li id="bild2">Bild 2</li>
<li id="bild3">Bild 3</li>
<li id="bild4">Bild 4</li>
</ul>
</div>
<div class="slider_option">
<input type="checkbox" id="checkbox">
<label for="checkbox">Autoplay Slider</label>
</div>
<ul id="slider1">
<ul><li id="test1"></li> </ul>
<ul><li id="test2"></li> </ul>
<ul><li id="test3"></li></ul>
<ul><li id="test4"></li> </ul>
</div>
<script>
jQuery(document).ready(function ($) {
$('#checkbox').change(function(){
setInterval(function () {
moveRight();
}, 3000);
});
var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;
$('#slider').css({ width: slideWidth, height: slideHeight });
$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('#slider1 ul div:last-child').prependTo('#slider ul');
function moveLeft() {
$('#slider ul').animate({
left: + slideWidth
}, 200, function () {
$('#slider ul li:last-child').prependTo('#slider ul');
$('#slider ul').css('left', '');
});
};
function moveRight() {
$('#slider ul,#slider1 ul li').animate({
left: - slideWidth
}, 1200, function () {
$('#slider ul li:first-child').appendTo('#slider ul');
// $('#slider1 ul div:first-child').appendTo('#slider1 ul');
$('#slider ul').css('left', '');
$('#slider1 ul li').css('left', '');
// $('#test1').css('left', '');
// $('#test2').css('left', '');
// $('#test3').css('left', '');
// $('#test4').css('left', '');
setTimeout(function(){ },10);
$('#test1').html($('li').eq(0).html());
$('#test2').html($('li').eq(1).html());
$('#test3').html($('li').eq(2).html());
$('#test4').html($('li').eq(3).html());
});
};
$('a.control_prev').click(function () {
moveLeft();
});
$('a.control_next').click(function () {
moveRight();
});
});
//$( "#slider" ).clone().appendTo( "#slider1" );
</script>