Image slider in JQuery

Hi sir

I want to create a image slider in jQuery. Please tell me the name of the best image slider plug-in available.

Mention code with your reply.

View Answers

December 15, 2010 at 6:04 PM

Hi friend,

Well there are many Image slider available but in my opinion "easySlider1.7.js" best suited me.

Given below code contains image slider using "easySlider1.7.js" plug-in :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Easy Slider jQuery Plugin Demo</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />    
    <script type="text/javascript" src="jquery-1.4.2.js"></script>
    <script type="text/javascript" src="easySlider1.7.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){   
            $("#slider").easySlider({
                auto: true, 
                continuous: true
            });
        });
    </script>
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />  
</head>
<body>
<div id="container">
    <div id="header">
        <h1>Example of Easy Slider Plugin of jQuery</h1>
    </div>
    <div id="slider">
            <ul>                
                <li><img src="images/jquery1.jpeg" alt="Css Template Preview" /></li>
                <li><img src="images/jquery2.jpeg" alt="Css Template Preview" /></li>
                <li><img src="images/jquery3.jpeg" alt="Css Template Preview" /></li>
                <li><img src="images/jquery4.jpeg" alt="Css Template Preview" /></li>
                <li><img src="images/jquery5.jpeg" alt="Css Template Preview" /></li>
            </ul>
        </div></div>
</body>
</html>









Related Tutorials/Questions & Answers:
Image slider in JQuery
Image slider in JQuery  Hi sir I want to create a image slider in jQuery. Please tell me the name of the best image slider plug-in available. Mention code with your reply
Vertical news slider using jquery
Vertical news slider using jquery  how to creatw vertical news slider using jquery Sorry for wrong category but i cant get my jquery category
Advertisements
jQuery UI Widget : Slider
jQuery UI Widget : Slider       jQuery UI Widget : Slider The jQuery UI Slider plugin makes selected elements into sliders. There are various
java image slider or code 4 java-image slideshow
java image slider or code 4 java-image slideshow   plz help me out... image slider using java... i have no idea about implementing image sliders using threads? if yes den
create dynamic image gallery jquery
create dynamic image gallery jquery  How to create a dynamic image gallery in Jquery
The easy Slider plug-in of jQuery
;> <head> <title>Easy Slider jQuery Plugin Demo</title>...The easy Slider plug-in of jQuery  In this tutorial, we will discuss about implementing easySlider plug in of jQuery. In this example, easySlider plug
Crop image Using JQuery, servlet or JSP.
Crop image Using JQuery, servlet or JSP.  Hi sir I need the code of Cropping image using JQuery with the help of servlet or JSP. I need both the code Client side as well as of server side. Please Help me
Replace broken Image using JQuery
Replace broken Image using JQuery  Sir My web page contains a lot of images. But when it will not loaded properly, it shows a broken image. How can I fix it so that broken image will be replaced by error image automatically
Animate image in jQuery
jQuery provides several methods to implement different kinds of effects in a simple HTML page. jQuery is basically a JavaScript library that simplifies the JavaScript work. Here we takes a small example, that will resize the image
jQuery to Image Magnifier
jQuery to Image Magnifier       In this first jQuery tutorial we will develop a  program that  Image magnifier.ADS_TO_REPLACE_1 Steps to develop the program  
jQuery to Auto Image Scroller
jQuery to Auto Image Scroller       In this first jQuery tutorial we will develop a  program that auto image scrollerADS_TO_REPLACE_1 Steps to develop the program
jQuery to Vertical Image Scroller
jQuery to Vertical Image Scroller       In this first jQuery tutorial we will develop a  program that vertical image scrollerADS_TO_REPLACE_1 Steps to develop the program
jQuery to Simple Image Scroller
jQuery to Simple Image Scroller       In this first jQuery tutorial we will develop a  program that simple  image scrollerADS_TO_REPLACE_1 Steps to develop the program
How to change the color of a base64-encoded png image JQuery?
How to change the color of a base64-encoded png image JQuery?  I am going to change the colors of the pixels of a png image(which is in base64 format). This is my source code: var myImg = new Image(); myImg.src = <...>
Slider Gallery plug-in
Slider Gallery plug-in In this section, you will learn to use Slider Gallery plug-in for developing image gallery slider. This shows a demonstration of a slider widget from the jQuery UI library .In this example a image gallery inside
jQuery plugin examples code
-in The easy Slider plug-in of jQuery ADS_TO_REPLACE_2 The easy slider plug-in implementing with numeric boxes Enlarge Image pop... jQuery plug in Crop Image using plug-in ,JSP and 'Servlet'
Zoom Image section using jQuery plug-in
Zoom Image section using jQuery plug-in In this section, you will learn how to zoom an image section by hovering mouse on it using jQuery. The plug-in ,we are using here, is "zoom.js". For zooming an image you must have
The animation of image using the 'animate' effect of jQuery
The animation of image using the 'animate' effect of jQuery In this tutorial, we will discuss about how to use 'animate' function of jQuery to animate Image. In this example , we are animating a image using animate
jQuery - jQuery Tutorials and examples
)Datepicker e)Dialog f)Progressbar g)Slider h)Tabs jquery UI... it on the use browser.   jQuery to Vertical Image Scroller... image scroller    jQuery Toggle the Div
jQuery Demos
-in The easy Slider plug-in of jQuery... The animation of image using the 'animate' effect of jQuery... Simple Drop Down Menu Zoom Image section using jQuery plug
JQuery
JQuery  how to use jquery
Jquery
Jquery  I am new to Jquery. Can anyone please tell me how to use jquery plugins in html
jquery
jquery  What are the Jquery similarities or difference with other java script libraries
JQuery
JQuery  How i begin JQuery and where i begin learning?   Please visit the following link: JQuery Tutorials Learn Jquery from the above link. Here you will get lot of examples with illustration
jQuery
jQuery  Hi, What is jQuery and how it is used to develop Web applications? Thanks
jquery
jquery  how to display the leaves taken or holidays of the year or half working days in a calendar in some colors to identify the days using jquery plugin
JQuery
JQuery  hi there, I am just beginner for jQuery and i want to know-what is jQuery ? How it is better than JavaScript ?   jQuery... JavaScript : Each jQuery returns itself so you can chain them together(Chaining
JQuery
JQuery  how to create jquery auto-complete textbox ? in which data come from database table?   Please visit the following link: http://www.roseindia.net/tutorial/jquery/autoSuggestTextbox.html   thank you
JQuery
, use jquery autocomplete
ModuleNotFoundError: No module named 'slider'
ModuleNotFoundError: No module named 'slider'  Hi, My Python... 'slider' How to remove the ModuleNotFoundError: No module named 'slider'... to install padas library. You can install slider python with following command
ModuleNotFoundError: No module named 'slider'
ModuleNotFoundError: No module named 'slider'  Hi, My Python... 'slider' How to remove the ModuleNotFoundError: No module named 'slider'... to install padas library. You can install slider python with following command
ModuleNotFoundError: No module named 'slider'
ModuleNotFoundError: No module named 'slider'  Hi, My Python... 'slider' How to remove the ModuleNotFoundError: No module named 'slider'... to install padas library. You can install slider python with following command
JQuery
using url of the doctors, use jquery autocomplete
jQuery to Image Changes With Sliding Effect
jQuery to Image Changes With Sliding Effect       In this first jQuery tutorial we will develop a ...; <title>Image Slider</title> <meta http-equiv="content
jQuery to Image Changes With Fading Effect
jQuery to Image Changes With Fading Effect       In this first jQuery tutorial we will develop a ...;title>Image Slider</title> <meta http-equiv="content-type"
how to create a slider on jsp page n slider has values from 0-4
how to create a slider on jsp page n slider has values from 0-4  i want to create a slider on jsp page and slider has values from 0-4   Using the jquery, you can create a slider in jsp. <html> <head> <
jQuery image replacement by click or select
jQuery image replacement by click or select In this section, you will learn to replace image by button click or select drop down without refreshing complete page. EXAMPLE In the given below code, you will learn to replace image
Dojo Slider
Dojo Slider          In this section, you will learn about slider and how to create a slider in dojo. Try Online: Slider ADS_TO_REPLACE_1 Slider
Example code of jQuery animation
Drag and drop Slider gallery Moving Boxes Carousel with jQuery... Example code of jQuery animation       Example code of jQuery animation
Changing 2D graph using slider.
Changing 2D graph using slider.  Code for changing a 2d graph with help of slider
Slider in Flex4
Slider control in Flex4: Flex4 Slider control is also called a Spark Slider control. You can select a value by moving a slider thumb between two end points of the Slider track. There are two types of Slider control. First is VSlider
jQuery kwicks plug-in for creation of animating image title
jQuery kwicks plug-in for creation of animating image title In this section ,you will learn about using jQuery kwicks plug-in for creating animating Title images. The html page contains the four parts of the Image titles which
slider - Swing AWT
Example"); Container content = frame.getContentPane(); JSlider slider...(true); slider.setToolTipText("The value is 50"); content.add(slider
ModuleNotFoundError: No module named 'js.bootstrap_slider'
ModuleNotFoundError: No module named 'js.bootstrap_slider'  Hi, My... named 'js.bootstrap_slider' How to remove the ModuleNotFoundError: No module named 'js.bootstrap_slider' error? Thanks   Hi
ModuleNotFoundError: No module named 'monocle_slider'
ModuleNotFoundError: No module named 'monocle_slider'  Hi, My... named 'monocle_slider' How to remove the ModuleNotFoundError: No module named 'monocle_slider' error? Thanks   Hi, In your python
ModuleNotFoundError: No module named 'slider-task'
ModuleNotFoundError: No module named 'slider-task'  Hi, My Python... 'slider-task' How to remove the ModuleNotFoundError: No module named 'slider-task' error? Thanks   Hi, In your python environment
ModuleNotFoundError: No module named 'slider-task'
ModuleNotFoundError: No module named 'slider-task'  Hi, My Python... 'slider-task' How to remove the ModuleNotFoundError: No module named 'slider-task' error? Thanks   Hi, In your python environment
ModuleNotFoundError: No module named 'slider-task'
ModuleNotFoundError: No module named 'slider-task'  Hi, My Python... 'slider-task' How to remove the ModuleNotFoundError: No module named 'slider-task' error? Thanks   Hi, In your python environment

Questions by Category