Experiment No: 19
Create an Image slider using jQuery.
Date:
Competency and Practical Skills:
Relevant CO: 5
Objectives:
1. To understand the how JQuery Works.
Theory:
JQUERY
The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes a
lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them
into methods that you can call with a single line of code. jQuery also simplifies a lot of the
complicated things from JavaScript, like AJAX calls and DOM manipulation.
The jQuery library contains the following features:
A. HTML/DOM manipulation
B. CSS manipulation
C. HTML event methods
D. Effects and animations
E. AJAX
There are several ways to start using jQuery on your web site.
You can:
• Download the jQuery library from [Link]
• Include jQuery from a CDN, like Google
<head>
<script src="[Link]"></script>
</head>
OR
<head>
<script src="[Link]
</script>
</head>
The jQuery syntax is tailor-made for selecting HTML elements and performing some action on
the element(s).
Basic syntax is:
$(selector).action()
[Enrolment No:220180107016]
• A $ sign to define/access jQuery
• A (selector) to "query (or find)" HTML elements
• A jQuery action() to be performed on the element(s)
Examples:
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".
All jQuery methods in our examples, are inside a document ready event:
$(document).ready(function(){
// jQuery methods go here…
});
This is to prevent any jQuery code from running before the document is finished loading (is
ready). It is good practice to wait for the document to be fully loaded and ready before working
with it. This also allows you to have your JavaScript code before the body of your document, in
the head section. jQuery selectors allow you to select and manipulate HTML element(s).
jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes,
types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and
in addition, it has some own custom selectors.
All selectors in jQuery start with the dollar sign and parentheses: $().
When a user clicks on a button, all <p> elements will be hidden:
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.
An id should be unique within a page, so you should use the #id selector when you want to find a
single, unique element.
To find an element with a specific id, write a hash character, followed by the id of the HTML
element:
$("#test")
[Enrolment No:220180107016]
When a user clicks on a button, the element with id="test" will be hidden:
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
All the different visitors' actions that a web page can respond to are called events. An event
represents the precise moment when something happens.
Examples:
• moving a mouse over an element
• selecting a radio button
• clicking on an element
The term "fires/fired" is often used with events. Example: "The keypress event is fired, the
moment you press a key". Here are some common DOM events:
Mouse Events Keyboard Events Form Events Document/Window
Events
Click Keypress submit Load
Dblclick Keydown change Resize
Mouseenter Keyup focus Scroll
Mouseleave blur Unload
In jQuery, most DOM events have an equivalent jQuery method. To assign a click event to all
paragraphs on a page, you can do this:
$("p").click();
The next step is to define what should happen when the event fires. You must pass a function to
the event:
$("p").click(function(){
// action goes here!!
});
Commonly Used jQuery Event Methods
$(document).ready()
The $(document).ready() method allows us to execute a function when the document is fully
loaded.
[Enrolment No:220180107016]
click()
The click() method attaches an event handler function to an HTML element. The function is
executed when the user clicks on the HTML element. The following example says: When a click
event fires on a <p> element; hide the current <p> element:
$("p").click(function(){
$(this).hide();
});
dblclick()
The dblclick() method attaches an event handler function to an HTML element. The function is
executed when the user double-clicks on the HTML element:
$("p").dblclick(function(){
$(this).hide();
});
mouseenter()
The mouseenter() method attaches an event handler function to an HTML element. The function is
executed when the mouse pointer enters the HTML element:
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
Implementation:
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Image Slider</title>
<script src="[Link]
<style>
#slider {
width: 600px;
height: 400px;
overflow: hidden;
margin: auto;
position: relative;
}
#slider img {
width: 100%;
height: 100%;
display: none;
}
#slider [Link] {
display: block;
[Enrolment No:220180107016]
}
.nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 24px;
background: rgba(0,0,0,0.5);
color: white;
padding: 10px;
cursor: pointer;
}
#prev { left: 10px; }
#next { right: 10px; }
</style>
</head>
<body>
<div id="slider">
<img src="[Link]" class="active" alt="Image 1">
<img src="[Link]" alt="Image 2">
<img src="[Link]" alt="Image 3">
<div id="prev" class="nav-btn">❮</div>
<div id="next" class="nav-btn">❯</div>
</div>
<script>
$(document).ready(function() {
let current = 0;
let images = $('#slider img');
let total = [Link];
function showImage(index) {
[Link]('active');
[Link](index).addClass('active');
}
$('#next').click(function() {
current = (current + 1) % total;
showImage(current);
});
$('#prev').click(function() {
current = (current - 1 + total) % total;
showImage(current);
});
// Auto Slide
[Enrolment No:220180107016]
setInterval(function() {
$('#next').click();
}, 3000); // Change every 3 seconds
});
</script>
</body>
</html>
Output:
Conclusion:
In this practical, we successfully created an image slider using jQuery, which allowed users to
navigate through multiple images using "Next" and "Previous" buttons. We also implemented an
automatic sliding feature using the setInterval function. This exercise helped us understand how
jQuery simplifies DOM manipulation, event handling, and animation compared to plain
JavaScript. Through this, we gained hands-on experience with building interactive front-end
components, improving both our UI design skills and our ability to use jQuery efficiently in web
development.
Quiz:
1. What is jQuery?
jQuery is a lightweight, open-source JavaScript library designed to simplify the client-
side scripting of HTML. It makes tasks like HTML manipulation, event handling,
animations, and AJAX interactions much easier by providing a simple and concise
syntax. With jQuery, developers can write less code to achieve functionality that would
otherwise require complex JavaScript.
[Enrolment No:220180107016]
2. JavaScript vs. jQuery
JavaScript is a powerful programming language used to create interactive and dynamic
web applications, while jQuery is a library built on top of JavaScript that simplifies
common tasks. JavaScript offers full control over web development logic and is more
versatile, whereas jQuery is ideal for quickly implementing features with less code. jQuery
helps in faster development and cross-browser compatibility, but for performance-
intensive or complex applications, pure JavaScript is often preferred.
Suggested Reference:
[Link]
References used by the students:
• [Link]
Rubric wise marks obtained:
Rubrics 1 2 3 Total
Marks
[Enrolment No:220180107016]