Dołożyć jeden slajder, ciąg poruszających się zdjęć u dołu ekranu.

0

Szanowni Państwo,

Co zrobić w poniższym kodzie programu i arkuszu stylów css, aby poruszały się dwa slajdery (routatory), jeden z dołu strony, drugi u góry strony internetowej tj. na stronie: http://www.drwieganieruchomosci.pl/

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, user-scalable=yes"> <link rel="shortcut icon" type="image/x-icon" href="https://vg.3n.com.pl/vg_data/vg.ico"> <title>Slider 3N</title> 
<link href="boxes.css" rel="stylesheet">	
<script src="n3csslider.js" defer></script>
</head> <body>
<figure>
picture0.jpg
</figure> <figure>
picture1.jpg
</figure> <figure>
picture2.jpg
</figure> <figure>
picture3.jpg
</figure> <figure>
picture4.jpg
</figure>
</div>
<figure>
picture5.jpg
</figure> <figure>
picture6.jpg
</figure> <figure>
picture7.jpg
</figure> <figure>
picture8.jpg
</figure>
</div> <script> addEventListener('load', function(){ var slider=new N3CSslider(document.getElementById('slider')); //uruchamia slider i podpina go pod diva z id=slider slider.addSection(1);//dodaje sekcję o szerokości 300px slider.addSection(1);//dodaje sekcję o szerokości 300px slider.addSection(1);//dodaje sekcję o szerokości 300px slider.appendSlides('box');//dodaje wszystkie div z id="box" plus "-numer" slider.setTimeShow(2000);//ustawia czas wyświetlania na 2000 ms slider.start();//uruchamia automatyczne przesuwanie addEventListener('resize', function(){ //podpina slider pod zdarzenie "resize" slider.resize(); }) }) </script> </body> </html>

Kod CSS arkusza stylów.

html, body, figute{overflow:hidden; margin: 0; padding: 10px; height: 100%; background-color:#000000}

.slider{

width:100%;
height:200px;
background-color:#000000;

background-position: center bottom;
}

.box{
width:10px;
height:20px;
display:none;

}

Dziękuję za udzielenie mi szczegółowej odpowiedzi. wraz z podaniem fragmentu kodu

0 
<!DOCTYPE html>
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, user-scalable=yes"> 
<link rel="shortcut icon" type="image/x-icon" href="https://vg.3n.com.pl/vg_data/vg.ico">
<title>Slider 3N</title> 
<link href="boxes.css" rel="stylesheet"> 
<script src="https://vg.3n.com.pl/boxes/n3csslider.js" defer="defer">
</script> 
</head> 
<body>
<div class="slider" id="slider1">
</div>

<div class="slider" id="slider2">
</div>

<div id="slider1box-0">
<img src="picture0.jpg">
</div> 

<div id="slider1box-1">
<img src="picture1.jpg">
</div>

<div id="slider1box-2">
<img src="picture2.jpg">
</div>

<div id="slider1box-3">
<img src="picture3.jpg">
</div> 

<div id="slider1box-4">
<img src="picture4.jpg">
</div>

<div id="slider1box-5">
<img src="picture5.jpg">
</div>

<div id="slider2box-0">
<img src="picture0.jpg">
</div> 

<div id="slider2box-1">
<img src="picture1.jpg">
</div>

<div id="slider2box-2">
<img src="picture2.jpg">
</div>

<div id="slider2box-3">
<img src="picture3.jpg">
</div> 

<div id="slider2box-4">
<img src="picture4.jpg">
</div>

<div id="slider2box-5">
<img src="picture5.jpg">
</div>

<script> 
addEventListener('load', function(){ 
var slider=new N3CSslider(document.getElementById('slider1')); 

slider.appendSlides("slider1box");

slider.setTimeShow(2000);

slider.start();

var slider2=new N3CSslider(document.getElementById('slider2')); 

slider2.appendSlides("slider2box");

slider2.setTimeShow(2000);

slider2.start();
 
}

)

</script> 
</body> 
</html> 
```

```
0

Wielkie dzięki.

0

Sprawdziłem, są dwa slajdery, ale operują one tymi samymi zdjęciami. Zależy mi, aby przesuwane były różne zdjęcia. Jak to zrobić ?

0

Teraz zmieniłem css, pojawił się w kodzie drugi slajder. Ale dwa przesuwają te same zdjęcia i w tej samej kolejności, a zależy mi na tym, aby w górnym ciągu były inne zdjęcia jak w dolnym slajderze (karuzeli). Jak to zrobić ?

0

Musisz dodać inne zdjęcia do drugiego slajdera
Picture6 picture7 itd zamiast picture1 picture2


<div class="box" id="slider1box-0">
<img src="picture7.jpg">
</div> 

<div  class="box" id="slider1box-1">
<img src="picture6.jpg">
</div>

<div  class="box" id="slider1box-2">
<img src="picture5.jpg">
</div>

<div  class="box" id="slider1box-3">
<img src="picture4.jpg">
</div> 

<div  class="box" id="slider1box-4">
<img src="picture3.jpg">
</div>

<div  class="box" id="slider1box-5">
<img src="picture2.jpg">
</div>

<div  class="box" id="slider1box-6">
<img src="picture1.jpg">
</div> 

<div  class="box" id="slider1box-7">
<img src="picture0.jpg">
</div>

<div class="box" id="slider2box-0">
<img src="picture0.jpg">
</div> 

<div class="box" id="slider2box-1">
<img src="picture1.jpg">
</div>

<div class="box" id="slider2box-2">
<img src="picture2.jpg">
</div>

<div class="box" id="slider2box-3">
<img src="picture3.jpg">
</div> 

<div class="box" id="slider2box-4">
<img src="picture4.jpg">
</div>

<div class="box" id="slider2box-5">
<img src="picture5.jpg">
</div>

<div class="box" id="slider2box-6">
<img src="picture6.jpg">
</div>

<div class="box" id="slider2box-7">
<img src="picture7.jpg">
</div>

1 użytkowników online, w tym zalogowanych: 0, gości: 1