{"id":4341,"date":"2015-06-10T06:03:43","date_gmt":"2015-06-10T06:03:43","guid":{"rendered":"http:\/\/a1webdesignteam.com\/blog\/?p=4341"},"modified":"2015-06-10T06:03:43","modified_gmt":"2015-06-10T06:03:43","slug":"simple-image-scroller-in-jquery","status":"publish","type":"post","link":"https:\/\/a1webdesignteam.com\/blog\/simple-image-scroller-in-jquery\/","title":{"rendered":"Simple Image Scroller in JQuery"},"content":{"rendered":"

Steps to develop the program<\/b><\/p>\n

Step 1:<\/b><\/p>\n

Create a new file (simple_carousel.html) and add the following code into<\/p>\n\n\n\n
\n
<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\"\r\n  \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\">\r\n<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\" xml:lang=\"en-us\">\r\n<head>\r\n<title>jCarousel Examples<\/title>\r\n<link href=\"..\/style.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\r\n<script type=\"text\/javascript\" src=\"script\/jquery-1.2.3.pack.js\">\r\n<\/script>\r\n<script type=\"text\/javascript\" \r\nsrc=\"script\/jquery.jcarousel.pack.js\">\r\n<\/script>\r\n<link rel=\"stylesheet\" type=\"text\/css\" \r\nhref=\"style\/jquery.jcarousel.css\"\/>\r\n<link rel=\"stylesheet\" type=\"text\/css\" \r\nhref=\"style\/skin.css\" \/>\r\n\r\n<script type=\"text\/javascript\">\r\n\r\njQuery(document).ready(function() {\r\n    jQuery('#mycarousel').jcarousel({\r\n        \r\n    });\r\n});\r\n\r\n<\/script>\r\n\r\n<\/head>\r\n<body>\r\n<div id=\"wrap\">\r\n<ul id=\"mycarousel\" class=\"jcarousel-skin-tango\">\r\n<li><img src=\"images\/w1.gif\" width=\"75\" height=\"75\" alt=\"i1\" \/>\r\n<\/li>\r\n<li><img src=\"images\/w2.gif\" width=\"75\" height=\"75\" alt=\"i2\" \/>\r\n<\/li>\r\n<li><img src=\"images\/w3.gif\" width=\"75\" height=\"75\" alt=\"i3\" \/>\r\n<\/li>\r\n<li><img src=\"images\/w4.gif\" width=\"75\" height=\"75\" alt=\"i4\" \/>\r\n<\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Program explanation:<\/b><\/p>\n
The following code includes the jQuery JavaScript library file:<\/p>\n\n\n\n
<script type=”text\/javascript” src=”script\/jquery-1.2.3.pack.js”><\/script>
\n<script type=”text\/javascript” src=”script\/jquery.jcarousel.pack.js”><\/script><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
 <\/p>\n
Function is called<\/p>\n\n\n\n
jQuery(‘#mycarousel’).jcarousel(<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
 <\/p>\n
When you run the program in browser it will look like following screen shot:<\/p>\n
\"\"<\/p>\n
Check online demo of the application<\/b><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Steps to develop the program Step 1: Create a new file (simple_carousel.html) and add the following code into <!DOCTYPE html PUBLIC “-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN” “http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd”> <html xmlns=”http:\/\/www.w3.org\/1999\/xhtml” xml:lang=”en-us”> <head> <title>jCarousel Examples<\/title> <link href=”..\/style.css” rel=”stylesheet” type=”text\/css” \/> <script type=”text\/javascript” src=”script\/jquery-1.2.3.pack.js”> <\/script> <script type=”text\/javascript” src=”script\/jquery.jcarousel.pack.js”> <\/script> <link rel=”stylesheet” type=”text\/css” href=”style\/jquery.jcarousel.css”\/> <link rel=”stylesheet” type=”text\/css” href=”style\/skin.css” \/> <script […]<\/p>\n","protected":false},"author":1,"featured_media":4342,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"categories":[6],"tags":[51],"_links":{"self":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/4341"}],"collection":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/comments?post=4341"}],"version-history":[{"count":0,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/4341\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media\/4342"}],"wp:attachment":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media?parent=4341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/categories?post=4341"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/tags?post=4341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}