KW Online Tools Zone
Knowledge Walls
View All Tools Home
PHOTOSLIDER
[Jquery editor]
Run
Share Link
Clear
HTML [Ctrl+Enter] - to run
Prev
Next
CSS [Ctrl+Enter] - to run
#photo_slider img { display: none; } img{ width:400px; height:200px; }
Jquery [Ctrl+Enter] - to run
function showit(index) { index = index + 1; $("#photo_slider img").css("display", "none"); $("#photo_slider img[present*='yes']").attr("present", ""); $("#photo_slider img:nth-child(" + index + ")").attr("present", "yes"); $("#photo_slider img:nth-child(" + index + ")").css("display", "block"); } $(function () { $("#move_prev_button").click(function () { index = $("#photo_slider img[present*='yes']").index(); if (index == 0) { index = $("#photo_slider img").length - 1; } else { index--; } showit(index); }); $("#move_next_button").click(function () { index = $("#photo_slider img[present*='yes']").index(); if (index == ($("#photo_slider img").length - 1)) { index = 0; } else { index++; } showit(index); }); });
OUTPUT
Copyright © 2021 Knowledge walls, All rights reserved
Copyright © 2021 Knowledge walls, All rights reserved