Walczyłem z tym najpierw sam, potem uderzyłem do znajomków, którzy wydawalo mi sie, że się na tym znają, ale kicha. Odpowiedź jednego rodzaju, albo daj sobie spokój, albo po co ci dwa slidery na stronie, itp... itd... Niestety takie odpowiedzi mnie nie zadawalają i walczę dalej, ale jakoś chyba mizernie, bo albo wyswietlają się co drugi obrazek w jednym sliderze, albo nie zmieniają się, itp.. Co do samych .jpg to mają 300x260 i waga każdego około 20k. Wizję mam taką, żeby na stronie przewijały się dwa może trzy slidery, z obrazkami np. grupa 1 to kwiaty, grupa 2 to drzewa, ktoś kto wchodzi na stronę wystarczy, że popatrzy kilka sekund i widzi że interesujący go obiekt jest w grupie 1 i naciska tego slidera i przechodzi do podstrony z tymi kwiatami, nasionami kwiatów, itd.. Dla drzew to samo. <a href> odnosi się do całego slidera, więc nie ma konieczności przypisywania go do pojedynczych zdjęć. Może ktoś coś pomoże w tej kwestii, z góry podziękował.
Kod poniżej
<!-- GRUPA1 -->
<td width="50%" height="260">
<p align="center">
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;}
.mySlides {display:none}
/* Slideshow container */
.slideshow-container1 {
max-width: 300px;
position: relative;
margin: auto;
}
/* The dots/bullets/indicators */
.dot {
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1s;
animation-name: fade;
animation-duration: 1s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
</style>
</head>
<body>
<div class="slideshow-container1">
<div class="mySlides1 fade">
<img src="gr1/rys1.jpg" style="width:300; height:260" img border="1">
</div>
<div class="mySlides1 fade">
<img src="gr1/rys2.jpg" style="width:300; height:260" img border="1">
</div>
<div class="mySlides1 fade">
<img src="gr1/rys3.jpg" style="width:300; height:260" img border="1">
</div>
<div class="mySlides1 fade">
<img src="gr1/rys4.jpg" style="width:300; height:260" img border="1">
</div>
<div class="mySlides1 fade">
<img src="gr1/rys5.jpg" style="width:300; height:260" img border="1">
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides1");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000);
}
</script>
</body>
</html>
<!-- GRUPA2 -->
<td width="50%" height="260">
<p align="center">
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;}
.mySlides {display:none}
/* Slideshow container */
.slideshow-container2 {
max-width: 300px;
position: relative;
margin: auto;
}
/* The dots/bullets/indicators */
.dot {
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1s;
animation-name: fade;
animation-duration: 1s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
</style>
</head>
<body>
<div class="slideshow-container2">
<div class="mySlides2 fade">
<img src="gr2/rys1a.jpg" style="width:300; height:260" img border="1">
</div>
<div class="mySlides2 fade">
<img src="gr2/rys2a.jpg" style="width:300; height:260" img border="1">
</div>
<div class="mySlides2 fade">
<img src="gr2/rys3a.jpg" style="width:300; height:260" img border="1">
</div>
<div class="mySlides2 fade">
<img src="gr2/rys4a.jpg" style="width:300; height:260" img border="1">
</div>
<div class="mySlides2 fade">
<img src="gr2/rys5a.jpg" style="width:300; height:260" img border="1">
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides2");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000);
}
</script>
</body>
</html>