mouseover stop slider
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var initList = setInterval(function() {
currentSlide += 1;
currentSlide %= $(".kc-nav-wrap div").length;
juisteslide = currentSlide + 1;
var $list = $("[data-cc-item-key='" + juisteslide + "']").find('[alt]');
$('#text-description').text($list.attr('alt'));
$(".kc-nav-wrap div").eq(currentSlide).click();
}, 5000);
$('.kc-item').mouseover(function() {
clearInterval(initList);
}).mouseout(function() {
initList = setInterval(function() {
currentSlide += 1;
currentSlide %= $(".kc-nav-wrap div").length;
juisteslide = currentSlide + 1;
var $list = $("[data-cc-item-key='" + juisteslide + "']").find('[alt]');
$('#text-description').text($list.attr('alt'));
$(".kc-nav-wrap div").eq(currentSlide).click();
}, 5000);
})
currentSlide += 1;
currentSlide %= $(".kc-nav-wrap div").length;
juisteslide = currentSlide + 1;
var $list = $("[data-cc-item-key='" + juisteslide + "']").find('[alt]');
$('#text-description').text($list.attr('alt'));
$(".kc-nav-wrap div").eq(currentSlide).click();
}, 5000);
$('.kc-item').mouseover(function() {
clearInterval(initList);
}).mouseout(function() {
initList = setInterval(function() {
currentSlide += 1;
currentSlide %= $(".kc-nav-wrap div").length;
juisteslide = currentSlide + 1;
var $list = $("[data-cc-item-key='" + juisteslide + "']").find('[alt]');
$('#text-description').text($list.attr('alt'));
$(".kc-nav-wrap div").eq(currentSlide).click();
}, 5000);
})
Om de 5 seconden triggert hij de click en gaat naar de volgende slide.
Als ik een mouseover die, dan blijft hij de click triggeren.
Als ik de $(".kc-nav-wrap div").off("click"); gebruik bij mouseover, dan kan stop de slider wel , maar kan deze niet meer terugzetten.
Weet iemand hoe dit op te lossen is?
MVG
Daniel
Ik zie sowieso al een paar gekke dingen, maar zonder de HTML erbij wordt het wel erg lastig om je hier tips over te geven.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<div class="kc-wrap" style="perspective: 1e+10px;">
<div class="kc-horizon" style="position: absolute; top: 50%; width: 800px; perspective: 1500px; transform-style: preserve-3d; perspective-origin: 50% 0px; left: 180px; transform: scaleX(1.4355) scaleY(1.4355); visibility: visible;"><div class="kc-item" data-cc-item-key="8" style="transform-style: preserve-3d; opacity: 1; z-index: 224; width: 178px; height: 240px; transform: translateY(-120px) translateZ(-275px) translateX(6.83761px) rotateY(-20.625deg) rotateX(-9.16667deg); visibility: visible;">
<div class="bgrdd" style=" background-image: url(http://localhost/test/images/folders/wijn/00000.jpg);"> </div>
<a href="http://localhost/test/de-kweker/folders/wijn">
<img src="http://localhost/test/images/folders/wijn/00000.jpg" alt="WIJN 29-03 TM 05-09" fid="351" title="WIJN" linkurl="http://localhost/test/de-kweker/folders/wijn">
</a>
<canvas class="cc-decoration kc-reflection" width="671" height="32" style="height: 13%; top: 99%;"></canvas></div><div class="kc-item" data-cc-item-key="1" style="transform-style: preserve-3d; opacity: 1; z-index: 362; width: 178px; height: 240px; transform: translateY(-120px) translateZ(-137.5px) translateX(143.536px) rotateY(-10.3125deg) rotateX(-4.58333deg); visibility: visible;">
<div class="bgrdd" style=" background-image: url(http://localhost/test/images/folders/508-sw/00000.jpg);"> </div>
<a href="http://localhost/test/Peugeot/folders/508-sw">
<img src="http://localhost/test/images/folders/508-sw/00000.jpg" alt="508 SW 25-01 TM 05-09" fid="415" title="508 SW" linkurl="http://localhost/test/Peugeot/folders/508-sw">
</a>
<canvas class="cc-decoration kc-reflection" width="671" height="32" style="height: 13%; top: 99%;"></canvas></div><div class="kc-item kc-front-item" data-cc-item-key="2" style="transform-style: preserve-3d; opacity: 1; z-index: 500; width: 178px; height: 240px; transform: translateY(-120px) translateZ(0px) translateX(311px) rotateY(0deg) rotateX(0deg); visibility: visible;">
<div class="bgrdd" style=" background-image: url(http://localhost/test/images/folders/rifter/00000.jpg);"> </div>
<a href="http://localhost/test/Peugeot/folders/rifter">
<img src="http://localhost/test/images/folders/rifter/00000.jpg" alt="Rifter 25-01 TM 05-09" fid="414" title="Rifter" linkurl="http://localhost/test/Peugeot/folders/rifter">
</a>
<canvas class="cc-decoration kc-reflection" width="671" height="32" style="height: 13%; top: 99%;"></canvas></div><div class="kc-item" data-cc-item-key="3" style="transform-style: preserve-3d; opacity: 1; z-index: 362; width: 178px; height: 240px; transform: translateY(-120px) translateZ(-137.5px) translateX(478.464px) rotateY(10.3125deg) rotateX(-4.58333deg); visibility: visible;">
<div class="bgrdd" style=" background-image: url(http://localhost/test/images/folders/508-berline/00000.jpg);"> </div>
<a href="http://localhost/test/Peugeot/folders/508-berline">
<img src="http://localhost/test/images/folders/508-berline/00000.jpg" alt="508 Berline 25-01 TM 05-09" fid="410" title="508 Berline" linkurl="http://localhost/test/Peugeot/folders/508-berline">
</a>
<canvas class="cc-decoration kc-reflection" width="671" height="32" style="height: 13%; top: 99%;"></canvas></div><div class="kc-item" data-cc-item-key="4" style="transform-style: preserve-3d; opacity: 1; z-index: 224; width: 178px; height: 240px; transform: translateY(-120px) translateZ(-275px) translateX(615.162px) rotateY(20.625deg) rotateX(-9.16667deg); visibility: visible;">
<div class="bgrdd" style=" background-image: url(http://localhost/test/images/folders/menu/00000.jpg);"> </div>
<a href="http://localhost/test/taco-mundo/folders/menu">
<img src="http://localhost/test/images/folders/menu/00000.jpg" alt="Menu 13-01 TM 05-09" fid="356" title="Menu" linkurl="http://localhost/test/taco-mundo/folders/menu">
</a>
<canvas class="cc-decoration kc-reflection" width="812" height="32" style="height: 13%; top: 99%;"></canvas></div><div class="kc-item" data-cc-item-key="5" style="transform-style: preserve-3d; opacity: 1; z-index: 87; width: 178px; height: 240px; transform: translateY(-120px) translateZ(-412.5px) translateX(695.982px) rotateY(30.9375deg) rotateX(-13.75deg); visibility: visible;">
<div class="bgrdd" style=" background-image: url(http://localhost/test/images/folders/foodmaster-menu/00000.jpg);"> </div>
<a href="http://localhost/test/foodmaster/folders/foodmaster-menu">
<img src="http://localhost/test/images/folders/foodmaster-menu/00000.jpg" alt="Foodmaster Menu 17-03 TM 05-09" fid="354" title="Foodmaster Menu" linkurl="http://localhost/test/foodmaster/folders/foodmaster-menu">
</a>
<canvas class="cc-decoration kc-reflection" width="712" height="32" style="height: 13%; top: 99%;"></canvas></div><div class="kc-item" data-cc-item-key="6" style="transform-style: preserve-3d; opacity: 1; z-index: -51; width: 178px; height: 240px; transform: translateY(-120px) translateZ(-550px) translateX(706.075px) rotateY(41.25deg) rotateX(-18.3333deg); visibility: visible;">
<div class="bgrdd" style=" background-image: url(http://localhost/test/images/folders/bbq-u0026-terras/00000.jpg);"> </div>
<a href="http://localhost/test/de-kweker/folders/bbq-u0026-terras">
<img src="http://localhost/test/images/folders/bbq-u0026-terras/00000.jpg" alt="BBQ \u0026 Terras 29-03 TM 05-09" fid="353" title="BBQ \u0026 Terras" linkurl="http://localhost/test/de-kweker/folders/bbq-u0026-terras">
</a>
<canvas class="cc-decoration kc-reflection" width="671" height="32" style="height: 13%; top: 99%;"></canvas></div><div class="kc-item" data-cc-item-key="7" style="transform-style: preserve-3d; opacity: 1; z-index: 87; width: 178px; height: 240px; transform: translateY(-120px) translateZ(-412.5px) translateX(-73.9821px) rotateY(-30.9375deg) rotateX(-13.75deg); visibility: visible;">
<div class="bgrdd" style=" background-image: url(http://localhost/test/images/folders/non-food/00000.jpg);"> </div>
<a href="http://localhost/test/de-kweker/folders/non-food">
<img src="http://localhost/test/images/folders/non-food/00000.jpg" alt="Non Food 29-03 TM 05-09" fid="352" title="Non Food" linkurl="http://localhost/test/de-kweker/folders/non-food">
</a>
<canvas class="cc-decoration kc-reflection" width="671" height="32" style="height: 13%; top: 99%;"></canvas></div></div><div class="kc-nav-wrap" style="right: 15px; bottom: 15px;"><div class="kc-nav-button" data-kc-but-num="0"></div><div class="kc-nav-button active" data-kc-but-num="1"></div><div class="kc-nav-button" data-kc-but-num="2"></div><div class="kc-nav-button" data-kc-but-num="3"></div>
<div class="kc-nav-button" data-kc-but-num="4"></div>
<div class="kc-nav-button" data-kc-but-num="5"></div>
</div>
<div class="kc-horizon" style="position: absolute; top: 50%; width: 800px; perspective: 1500px; transform-style: preserve-3d; perspective-origin: 50% 0px; left: 180px; transform: scaleX(1.4355) scaleY(1.4355); visibility: visible;"><div class="kc-item" data-cc-item-key="8" style="transform-style: preserve-3d; opacity: 1; z-index: 224; width: 178px; height: 240px; transform: translateY(-120px) translateZ(-275px) translateX(6.83761px) rotateY(-20.625deg) rotateX(-9.16667deg); visibility: visible;">
<div class="bgrdd" style=" background-image: url(http://localhost/test/images/folders/wijn/00000.jpg);"> </div>
<a href="http://localhost/test/de-kweker/folders/wijn">
<img src="http://localhost/test/images/folders/wijn/00000.jpg" alt="WIJN 29-03 TM 05-09" fid="351" title="WIJN" linkurl="http://localhost/test/de-kweker/folders/wijn">
</a>
<canvas class="cc-decoration kc-reflection" width="671" height="32" style="height: 13%; top: 99%;"></canvas></div><div class="kc-item" data-cc-item-key="1" style="transform-style: preserve-3d; opacity: 1; z-index: 362; width: 178px; height: 240px; transform: translateY(-120px) translateZ(-137.5px) translateX(143.536px) rotateY(-10.3125deg) rotateX(-4.58333deg); visibility: visible;">
<div class="bgrdd" style=" background-image: url(http://localhost/test/images/folders/508-sw/00000.jpg);"> </div>
<a href="http://localhost/test/Peugeot/folders/508-sw">
<img src="http://localhost/test/images/folders/508-sw/00000.jpg" alt="508 SW 25-01 TM 05-09" fid="415" title="508 SW" linkurl="http://localhost/test/Peugeot/folders/508-sw">
</a>
<canvas class="cc-decoration kc-reflection" width="671" height="32" style="height: 13%; top: 99%;"></canvas></div><div class="kc-item kc-front-item" data-cc-item-key="2" style="transform-style: preserve-3d; opacity: 1; z-index: 500; width: 178px; height: 240px; transform: translateY(-120px) translateZ(0px) translateX(311px) rotateY(0deg) rotateX(0deg); visibility: visible;">
<div class="bgrdd" style=" background-image: url(http://localhost/test/images/folders/rifter/00000.jpg);"> </div>
<a href="http://localhost/test/Peugeot/folders/rifter">
<img src="http://localhost/test/images/folders/rifter/00000.jpg" alt="Rifter 25-01 TM 05-09" fid="414" title="Rifter" linkurl="http://localhost/test/Peugeot/folders/rifter">
</a>
<canvas class="cc-decoration kc-reflection" width="671" height="32" style="height: 13%; top: 99%;"></canvas></div><div class="kc-item" data-cc-item-key="3" style="transform-style: preserve-3d; opacity: 1; z-index: 362; width: 178px; height: 240px; transform: translateY(-120px) translateZ(-137.5px) translateX(478.464px) rotateY(10.3125deg) rotateX(-4.58333deg); visibility: visible;">
<div class="bgrdd" style=" background-image: url(http://localhost/test/images/folders/508-berline/00000.jpg);"> </div>
<a href="http://localhost/test/Peugeot/folders/508-berline">
<img src="http://localhost/test/images/folders/508-berline/00000.jpg" alt="508 Berline 25-01 TM 05-09" fid="410" title="508 Berline" linkurl="http://localhost/test/Peugeot/folders/508-berline">
</a>
<canvas class="cc-decoration kc-reflection" width="671" height="32" style="height: 13%; top: 99%;"></canvas></div><div class="kc-item" data-cc-item-key="4" style="transform-style: preserve-3d; opacity: 1; z-index: 224; width: 178px; height: 240px; transform: translateY(-120px) translateZ(-275px) translateX(615.162px) rotateY(20.625deg) rotateX(-9.16667deg); visibility: visible;">
<div class="bgrdd" style=" background-image: url(http://localhost/test/images/folders/menu/00000.jpg);"> </div>
<a href="http://localhost/test/taco-mundo/folders/menu">
<img src="http://localhost/test/images/folders/menu/00000.jpg" alt="Menu 13-01 TM 05-09" fid="356" title="Menu" linkurl="http://localhost/test/taco-mundo/folders/menu">
</a>
<canvas class="cc-decoration kc-reflection" width="812" height="32" style="height: 13%; top: 99%;"></canvas></div><div class="kc-item" data-cc-item-key="5" style="transform-style: preserve-3d; opacity: 1; z-index: 87; width: 178px; height: 240px; transform: translateY(-120px) translateZ(-412.5px) translateX(695.982px) rotateY(30.9375deg) rotateX(-13.75deg); visibility: visible;">
<div class="bgrdd" style=" background-image: url(http://localhost/test/images/folders/foodmaster-menu/00000.jpg);"> </div>
<a href="http://localhost/test/foodmaster/folders/foodmaster-menu">
<img src="http://localhost/test/images/folders/foodmaster-menu/00000.jpg" alt="Foodmaster Menu 17-03 TM 05-09" fid="354" title="Foodmaster Menu" linkurl="http://localhost/test/foodmaster/folders/foodmaster-menu">
</a>
<canvas class="cc-decoration kc-reflection" width="712" height="32" style="height: 13%; top: 99%;"></canvas></div><div class="kc-item" data-cc-item-key="6" style="transform-style: preserve-3d; opacity: 1; z-index: -51; width: 178px; height: 240px; transform: translateY(-120px) translateZ(-550px) translateX(706.075px) rotateY(41.25deg) rotateX(-18.3333deg); visibility: visible;">
<div class="bgrdd" style=" background-image: url(http://localhost/test/images/folders/bbq-u0026-terras/00000.jpg);"> </div>
<a href="http://localhost/test/de-kweker/folders/bbq-u0026-terras">
<img src="http://localhost/test/images/folders/bbq-u0026-terras/00000.jpg" alt="BBQ \u0026 Terras 29-03 TM 05-09" fid="353" title="BBQ \u0026 Terras" linkurl="http://localhost/test/de-kweker/folders/bbq-u0026-terras">
</a>
<canvas class="cc-decoration kc-reflection" width="671" height="32" style="height: 13%; top: 99%;"></canvas></div><div class="kc-item" data-cc-item-key="7" style="transform-style: preserve-3d; opacity: 1; z-index: 87; width: 178px; height: 240px; transform: translateY(-120px) translateZ(-412.5px) translateX(-73.9821px) rotateY(-30.9375deg) rotateX(-13.75deg); visibility: visible;">
<div class="bgrdd" style=" background-image: url(http://localhost/test/images/folders/non-food/00000.jpg);"> </div>
<a href="http://localhost/test/de-kweker/folders/non-food">
<img src="http://localhost/test/images/folders/non-food/00000.jpg" alt="Non Food 29-03 TM 05-09" fid="352" title="Non Food" linkurl="http://localhost/test/de-kweker/folders/non-food">
</a>
<canvas class="cc-decoration kc-reflection" width="671" height="32" style="height: 13%; top: 99%;"></canvas></div></div><div class="kc-nav-wrap" style="right: 15px; bottom: 15px;"><div class="kc-nav-button" data-kc-but-num="0"></div><div class="kc-nav-button active" data-kc-but-num="1"></div><div class="kc-nav-button" data-kc-but-num="2"></div><div class="kc-nav-button" data-kc-but-num="3"></div>
<div class="kc-nav-button" data-kc-but-num="4"></div>
<div class="kc-nav-button" data-kc-but-num="5"></div>
</div>
Gewijzigd op 20/05/2023 11:11:04 door Daniel van Seggelen
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let currentSlide = 0;
const handleList = () => {
currentSlide += 1;
currentSlide %= $(".kc-nav-wrap div").length;
juisteslide = currentSlide + 1;
console.debug('initList', currentSlide, juisteslide);
var $list = $("[data-cc-item-key='" + juisteslide + "']").find('[alt]');
console.debug($list);
$('#text-description').text($list.attr('alt'));
$(".kc-nav-wrap div").eq(currentSlide).click();
};
var initList = setInterval(handleList, 5000);
$('.kc-item').mouseover(function() {
console.debug('mouseover');
clearInterval(initList);
}).mouseout(function() {
console.debug('mouseout');
initList = setInterval(handleList, 5000);
})
const handleList = () => {
currentSlide += 1;
currentSlide %= $(".kc-nav-wrap div").length;
juisteslide = currentSlide + 1;
console.debug('initList', currentSlide, juisteslide);
var $list = $("[data-cc-item-key='" + juisteslide + "']").find('[alt]');
console.debug($list);
$('#text-description').text($list.attr('alt'));
$(".kc-nav-wrap div").eq(currentSlide).click();
};
var initList = setInterval(handleList, 5000);
$('.kc-item').mouseover(function() {
console.debug('mouseover');
clearInterval(initList);
}).mouseout(function() {
console.debug('mouseout');
initList = setInterval(handleList, 5000);
})
Welnee joh, ben je gek, niks te danken hoor ;-)
(Helaas heeft niet iedereen het fatsoen om nog even iets te laten horen nadat 'de buit' binnen is.)