Image Slideshow
HTML CODE:-
<!DOCTYPE html> |
CSS CODE:-
body{ padding: 0px; margin: 0px; min-height: 100vh; background: black; overflow: hidden; } .container{ position: relative; height: 400px; width: 600px; margin: 50px auto; overflow: hidden; } .container .main-img{ position: absolute; top: 0; left: 0; border: 2px solid white; height: calc(80% - 10px); width: calc(100% - 3px); } .container .main-img img{ width: 100%; height: 100%; object-fit: cover; } .container .slides{ position: absolute; left: 0; bottom: 2px; width: 100%; height: calc(20% - 5px); display: flex; align-items: center; justify-content: space-between; } .container .slides img{ height: 100%; width: calc(20% - 5px); border: 2px solid white; object-fit: cover; cursor: pointer; transition: 0.5s; } .container .slides img:hover{ filter: grayscale(); } |
JS CODE:-
$(".container .slides img").click(function(){ var img_url = $(this).attr('src'); $(".main-img img").attr('src',img_url); }); |