{"id":10859,"date":"2011-12-15T21:01:26","date_gmt":"2011-12-15T13:01:26","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=10859"},"modified":"2025-04-04T00:44:30","modified_gmt":"2025-04-03T16:44:30","slug":"image-slider-photoshop-jquery-nivo-slider","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/image-slider-photoshop-jquery-nivo-slider\/","title":{"rendered":"How to Create Image Slider With Photoshop and jQuery"},"content":{"rendered":"<p>Undoubtedly, <a href=\"https:\/\/www.hongkiat.com\/blog\/jquery-image-galleries-sliders-best-of\/\">image slider<\/a> is one of the most commonly used elements in the business web design, due to its relatively large size that is able to draw the visitor\u2019s attention once they arrive the site. Though the web has started to rethink about the usability of the image slider, it\u2019s still considered as a must-learn for the newcomer of the web design industry.<\/p>\n<p>In this web design tutorial, we will learn to create custom image slider above using Photoshop, which you can preview the final result from <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/demo\/index.html\">here<\/a>. Not only will we illustrate it in Photoshop, we will also turn it into a functional design by converting it into HTML\/CSS and adding jQuery for its awesome sliding effect.<\/p>\n<p>Sounds like a lot of complicated bits involved, but in fact it\u2019s pretty straightforward and very easy to understand, let\u2019s get started then!<\/p>\n<p>More interested about adopting an image slider and customize it on the way? Here are posts dedicated for you.<\/p>\n<ul>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/jquery-image-galleries-sliders-best-of\/\">Image Slider: 23 jQuery Sliders<\/a><\/li>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/photo-gallery-slideshow-wordpress-plugins\/\">Image Slider WordPress Plugins<\/a><\/li>\n<\/ul>\n<h2>Getting Started<\/h2>\n<p>For this tutorial you will need the following resources:<\/p>\n<ul>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.deviantart.com\/ormanclark\/art\/20-Repeatable-Pixel-Patterns-193165241\">20 Repeatable Pixel Patterns<\/a>.<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.6.1\/jquery.min.js\">jQuery library<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.jqueryscript.net\/slider\/nivo-slider.html\">Nivo Slider plugin<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/modernizr.com\/\">Modernizr<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/lostandtaken.com\/downloads\/category\/paper\/stained-paper\/\">Paper Textures<\/a> from <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.vandelaydesign.com\/\">VandelayPremier<\/a><\/li>\n<li>(Alternative) <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.deviantart.com\/overdosse\/art\/13-HQ-Old-paper-Textures-66526257\">13 HQ Old Paper Textures<\/a> from <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.deviantart.com\/overdosse\">overdosse<\/a><\/li>\n<li>Rinjani by <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.freeimages.com\/photographer\/ciaciya-55761\">Ciaciya<\/a><\/li>\n<li>Stupa by <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.freeimages.com\/photographer\/agnes1409-57100\">Agnes Sim<\/a><\/li>\n<li>Tally by <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.freeimages.com\/photographer\/jelaga-57501\"> Nino Satria<\/a><\/li>\n<li>Offerings by <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.freeimages.com\/photographer\/timobalk-49675\">Timo Balk<\/a><\/li>\n<li>Uluwatu-Bali by <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.freeimages.com\/photographer\/investa4u-73903\">Aris Wjay<\/a><\/li>\n<\/ul>\n<h2>Part I \u2013 Designing Image Slider<\/h2>\n<h3>Step 1: Setting Up Background<\/h3>\n<p>Start by creating a new file with size 1000\u00d7700 px. Fill background with color #efc89e.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-01.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"461\" height=\"264\"><\/figure>\n<p>Add Pattern Overlay using free <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.deviantart.com\/ormanclark\/art\/20-Repeatable-Pixel-Patterns-193165241\">pixel pattern<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-02.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"600\" height=\"464\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-03.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"533\" height=\"333\"><\/figure>\n<h3>Step 2: Slider Base<\/h3>\n<p>Activate Rectangle Tool. Create a rectangle with size 940\u00d7450 px. You can use any color, it doesn\u2019t matter.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-04.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"600\" height=\"311\"><\/figure>\n<p>Double click layer to open Layer Style dialog box. Add Layer Style Drop Shadow, Outer Glow, and Stroke.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-05.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"600\" height=\"464\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-06.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"600\" height=\"464\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-07.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"600\" height=\"464\"><\/figure>\n<p>This is the result. The slider base now has a nice frame with soft shadow behind it.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-08.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"600\" height=\"312\"><\/figure>\n<h3>Step 3<\/h3>\n<p>Add a photo and place it above the slider base. Hit Ctrl + Alt + G to convert it into Clipping Mask and insert the photo into the slider.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-09.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"600\" height=\"303\"><\/figure>\n<h3>Step 4: Ribbon<\/h3>\n<p>Draw a rectangle shape with color #f4e1ae to be used as a ribbon.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-10.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"406\" height=\"554\"><\/figure>\n<p>Double click the shape\u2019s layer and activate Bevel and Emboss, Gradient Overlay, and Pattern Overlay with following settings.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-11.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"600\" height=\"464\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-12.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"600\" height=\"464\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-13.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"600\" height=\"464\"><\/figure>\n<p>This is the result after adding Layer Styles.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-14.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"306\" height=\"538\"><\/figure>\n<h3>Step 5<\/h3>\n<p>Let\u2019s add <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/lostandtaken.com\/downloads\/category\/paper\/stained-paper\/\">paper texture<\/a> onto the ribbon to make it more realistic. Place texture on top of the ribbon shape. Convert it to Clipping Mask by pressing Ctrl + Alt + G.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-15.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"512\" height=\"511\"><\/figure>\n<h3>Step 6<\/h3>\n<p>Let\u2019s paint some shadows and highlights onto the ribbon. Create new layer above the ribbon. Paint black on lower part of the ribbon. Convert it to Clipping Mask (Ctrl + Alt + G) and then reduce its Opacity to 10%.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-16.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"283\" height=\"413\"><\/figure>\n<h3>Step 7<\/h3>\n<p>Repeat previous process to upper part of the ribbon. But this time, add highlight by painting white and then reduce its Opacity to 50%.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-17.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"269\" height=\"413\"><\/figure>\n<h3>\u00a0<\/h3>\n<h3>Step 8: Stitches<\/h3>\n<p>Activate Pencil Tool. Hit F5 to open Brush setting. Set brush size to 1 px and increase the spacing until we get a dotted line on the preview area.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-20.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"350\" height=\"462\"><\/figure>\n<h3>Step 9<\/h3>\n<p>Draw 1 px black line on top of the ribbon. Reduce its Opacity to 20%. Duplicate layer by pressing Ctrl + J. Hit Ctrl + I to invert its color. Increase Opacity to 50%. Activate Move Tool and then press down arrow and left arrow once to nudge it.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-21.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"500\" height=\"461\"><\/figure>\n<p>Here\u2019s the result viewed at 100% magnification.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-22.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"301\" height=\"168\"><\/figure>\n<h3>Step 10<\/h3>\n<p>Repeat this process to draw other stitches on another side of the ribbon.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-23.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"305\" height=\"551\"><\/figure>\n<h3>Step 11: Add Ornate Shape<\/h3>\n<p>Set foreground color to gray. Use soft brush with size 1 px to draw an ornate shape. Be creative, you can use any shape you like. Next to it, draw a 1 px line and then erase its outer edge using a soft Eraser Tool. Duplicate the line, flip it horizontally, and place it on the other side.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-18.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"586\" height=\"582\"><\/figure>\n<h3>Step 12<\/h3>\n<p>Select all ornate layers and merge it into one layer by pressing Ctrl + E. Duplicate shape and then place it under the original ornate shape. Hit Ctrl + I to invert its color. Activate Move Tool and then press down arrow once to nudge it 1 px down.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-19.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"583\" height=\"314\"><\/figure>\n<h3>Step 13: Photo Information<\/h3>\n<p>Type photo data inside the ribbon.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-24.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"291\" height=\"537\"><\/figure>\n<h3>Step 14: Navigation<\/h3>\n<p>Next, we\u2019ll draw some circles for slide navigation. Draw a circle shape with color: #8d877c on lower part of the ribbon.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-25.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"280\" height=\"195\"><\/figure>\n<p>Add Inner Shadow using following settings.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-26.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"600\" height=\"464\"><\/figure>\n<p>This is the result. The circle is turning into a shallow hole now.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-27.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"280\" height=\"195\"><\/figure>\n<h3>Step 15<\/h3>\n<p>Hold Alt and then drag circle shape layer to duplicate it.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-28.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"289\" height=\"206\"><\/figure>\n<h3>Step 16<\/h3>\n<p>Let\u2019s set active condition on one of these links. Select one of the circle and change its color to #bebbb5. Add Inner Shadow, Gradient Overlay, and Stroke.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-29.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"291\" height=\"246\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-30.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"600\" height=\"464\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-31.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"600\" height=\"464\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-32.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"600\" height=\"464\"><\/figure>\n<h3>Step 17<\/h3>\n<p>Hold Ctrl and then click on the ribbon base thumbnail in the Layers Panel. Create new layer under the ribbon and fill it with black. Activate Move Tool and hit left and down arrow a few times.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-33.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"574\" height=\"568\"><\/figure>\n<h3>Step 18<\/h3>\n<p>Soften it by performing Gaussian Blur filter. Click Filter &gt; Blur &gt; Gaussian Blur.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-34.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"592\" height=\"516\"><\/figure>\n<h3>Step 19<\/h3>\n<p>Place ribbon shadow above slider frame layer. Convert it to Clipping Mask by pressing Ctrl + Alt + G.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-35.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"559\" height=\"497\"><\/figure>\n<h3>Step 20<\/h3>\n<p>Reduce shadow Opacity to 40%.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-36.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"288\" height=\"562\"><\/figure>\n<h3>Step 21<\/h3>\n<p>Paint ribbon shadow on background. Reduce its Opacity to 20%.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-37.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"586\" height=\"184\"><\/figure>\n<h3>Step 22<\/h3>\n<p>Use Pen Tool to draw back part of the ribbon. Set its color to #b68f63. Place it behind the slider.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-38.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"397\" height=\"409\"><\/figure>\n<p>This is the result viewed at 100% magnification.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-39.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"294\" height=\"162\"><\/figure>\n<h3>Step 23<\/h3>\n<p>Duplicate the shape we have just created and place it behind the top of the ribbon. Flip it vertically.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-40.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"297\" height=\"156\"><\/figure>\n<h3>Step 24: Final Result in Photoshop<\/h3>\n<p>This is our final result in Photoshop. Next, we will continue to code it into a functional slider.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-41.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"600\" height=\"339\"><\/figure>\n<h2>Part II \u2013 Converting Into HTML\/CSS<\/h2>\n<h3>Step 25 \u2013 Setting Up Files<\/h3>\n<p>Create a new folder called <em>My-Photo-Slider<\/em>. Inside this folder, create a new blank HTML document (<em>index.html<\/em>), blank stylesheet (<em>style.css<\/em>), and folder for images (<em>img<\/em>).<\/p>\n<p>We also need to include <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.6.1\/jquery.min.js\">jQuery library<\/a> and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.jqueryscript.net\/slider\/nivo-slider.html\">Nivo Slider plugin<\/a> to the folder. As we use HTML5 markup, we need to add an IE hack to enable HTML5 elements on IE 8 or below. We\u2019ll use a script called <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/modernizr.com\/\">Modernizr<\/a> to accommodate IE.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-42.jpg\" alt=\"nivo slider\" width=\"503\" height=\"270\"><\/figure>\n<h3>Step 26 \u2013 Basic HTML Markup<\/h3>\n<p>Open <em>index.html <\/em>in your favourite code editor. Define the <code>DOCTYPE<\/code> (we use HTML5), <code>head<\/code> elements (where we add the title of the documents and link CSS and JavaScript (jQuery Library, Nivo Slider, and Modernizr). We also add a <code>div<\/code> wrapper (to center the layout), <code>header<\/code> element, and slide wrapper.<\/p>\n<pre>\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n\t&lt;head&gt;\r\n\t\t&lt;meta name=\"author\" content=\"Aris FM\" \/&gt;\r\n\t\t&lt;meta charset=\"UTF-8\" \/&gt;\r\n\t\t&lt;title&gt;My Photo Slides&lt;\/title&gt;\r\n\t\t&lt;link href=\"style.css\" media=\"screen\" rel=\"stylesheet\" type=\"text\/css\"\/&gt;\r\n\t\t&lt;script src=\"jquery-1.6.1.min.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\r\n\t\t&lt;script src=\"jquery.nivo.slider.pack.js\" type=\"text\/javascript\"&gt;&lt;\/script&gt;\r\n\t\t&lt;!--[if IE]&gt;\r\n\t\t\t&lt;script src=\"modernizr-2.0.min.js\"&gt;&lt;\/script&gt;\r\n\t\t&lt;![endif]--&gt;\r\n\t&lt;\/head&gt;\r\n\r\n\t&lt;body&gt;\r\n\t\t&lt;div id=\"pagewrap\"&gt;\r\n\t\t\t&lt;header&gt;\r\n\t\t\t&lt;\/header&gt;\r\n\t\t\t&lt;div id=\"slidewrap\"&gt;\r\n\t\t\t&lt;\/div&gt;\r\n\t\t&lt;\/div&gt;\r\n\t&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<h3>Step 27 \u2013 Slice PSD<\/h3>\n<p>Open the PSD mockup and slice out all of the necessary images. For the picture, let\u2019s grab following pictures from sxc.hu (login required, if you don\u2019t have an account yet,\n  you can sign up for free). Resize all images to 920\u00d7430 px. Put all the images into the image folder (<em>img<\/em>).<\/p>\n<ol>\n<li>Rinjani by Ciaciya<\/li>\n<li>Stupa by Agnes Sim<\/li>\n<li>Tally by Nino Satria<\/li>\n<li>Offerings by Timo Balk<\/li>\n<li>Uluwatu-Bali by Aris Wjay<\/li>\n<\/ol>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-43.jpg\" alt=\"nivo slider\" width=\"651\" height=\"550\"><\/figure>\n<h3>Step 28 \u2013 Create Header<\/h3>\n<p>Add these following code between <code>&lt;header&gt;<\/code> and <code>&lt;\/header&gt;<\/code>.<\/p>\n<pre>\r\n&lt;h1&gt;\r\n\t&lt;a&gt;My Photo Slides&lt;\/a&gt;\r\n&lt;\/h1&gt;\r\n<\/pre>\n<p>Now let\u2019s add style to the header. We also add the style for the body and wrapper elements. Put all styles into the stylesheet, <em>style.css<\/em>.<\/p>\n<pre>\r\n\/* Basic Styling *\/\r\nbody {\r\n\tbackground:transparent url(img\/bg.jpg);\r\n\tfont:15px\/2 'Adobe Caslon Pro', Georgia, Serif;\r\n\tmargin:0;\r\n\tpadding:0;\r\n}\r\na {outline:0 none}\r\n#pagewrap {\r\n\tmargin:120px auto;\r\n\tpadding:0;\r\n\tposition:relative;\r\n\theight:100%;\r\n\twidth:960px;\r\n}\r\nheader {\r\n\tdisplay:block;\r\n\tfloat:right;\r\n\tmargin-right:40px;\r\n\twidth:192px;\r\n\tz-index:52;\r\n\tposition:relative;\r\n}\r\nh1 {\r\n\tbackground:transparent url(img\/separator.png) no-repeat center bottom; \/* Add a separator line below the title *\/\r\n\tfont-size:18px;\r\n\tfont-weight:bold;\r\n\theight:70px;\r\n\tline-height:1.1;\r\n\tmargin:55px 10px 0;\r\n\ttext-align:center;\r\n\ttext-transform:uppercase;\r\n}\r\n<\/pre>\n<h3>Step 29 \u2013 Add Photo Slider<\/h3>\n<p>Now we\u2019re going to add code to main part of our document, the photo slider. Let\u2019s add the photos first. Place these following code between <code>&lt;div id=\"slidewrap\"&gt;<\/code> and <code>&lt;\/div&gt;<\/code>.<\/p>\n<pre>\r\n&lt;div id=\"slider\"&gt;\r\n\t&lt;img alt=\"Gallery Picture\" title=\"#caption1\" src=\"img\/sample.jpg\" \/&gt;\r\n\t&lt;img alt=\"Gallery Picture\" title=\"#caption2\" src=\"img\/sample1.jpg\" \/&gt;\r\n\t&lt;img alt=\"Gallery Picture\" title=\"#caption3\" src=\"img\/sample2.jpg\" \/&gt;\r\n\t&lt;img alt=\"Gallery Picture\" title=\"#caption4\" src=\"img\/sample3.jpg\" \/&gt;\r\n\t&lt;img alt=\"Gallery Picture\" title=\"#caption5\" src=\"img\/sample4.jpg\" \/&gt;\r\n\t&lt;img alt=\"Gallery Picture\" title=\"#caption6\" src=\"img\/sample5.jpg\" \/&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>And then add the ribbon and the caption for the photos.<\/p>\n<pre>\r\n&lt;div class=\"ribbon\"&gt;&lt;\/div&gt;\r\n\r\n&lt;div id=\"caption1\" class=\"nivo-html-caption\"&gt;\r\n\t&lt;span class=\"title\"&gt;Photographer:&lt;\/span&gt;&lt;br\/&gt;\r\n\tEnrico Nunziati&lt;br\/&gt;\r\n\t&lt;span class=\"title\"&gt;Location:&lt;\/span&gt;&lt;br\/&gt;\r\n\tNamib desert&lt;br\/&gt;\r\n\t&lt;span class=\"title\"&gt;Model:&lt;\/span&gt;&lt;br\/&gt;\r\n\tDead Vlei&lt;br\/&gt;\r\n\t&lt;span class=\"title\"&gt;Date:&lt;\/span&gt;&lt;br\/&gt;\r\n\tMar 18, 2011\r\n&lt;\/div&gt;\r\n\r\n&lt;div id=\"caption2\" class=\"nivo-html-caption\"&gt;\r\n\t&lt;span class=\"title\"&gt;Photographer:&lt;\/span&gt;&lt;br\/&gt;\r\n\tLina Dhammanari&lt;br\/&gt;\r\n\t&lt;span class=\"title\"&gt;Location:&lt;\/span&gt;&lt;br\/&gt;\r\n\tLombok Island, Indonesia&lt;br\/&gt;\r\n\t&lt;span class=\"title\"&gt;Model:&lt;\/span&gt;&lt;br\/&gt;\r\n\tMount Rinjani&lt;br\/&gt;\r\n\t&lt;span class=\"title\"&gt;Date:&lt;\/span&gt;&lt;br\/&gt;\r\n\tMay 8, 2008\r\n&lt;\/div&gt;\r\n\r\n&lt;div id=\"caption3\" class=\"nivo-html-caption\"&gt;\r\n\t&lt;span class=\"title\"&gt;Photographer:&lt;\/span&gt;&lt;br\/&gt;\r\n\tAgnes Sim&lt;br\/&gt;\r\n\t&lt;span class=\"title\"&gt;Location:&lt;\/span&gt;&lt;br\/&gt;\r\n\tBorobudur, Indonesia&lt;br\/&gt;\r\n\t&lt;span class=\"title\"&gt;Model:&lt;\/span&gt;&lt;br\/&gt;\r\n\tBig Stupa&lt;br\/&gt;\r\n\t&lt;span class=\"title\"&gt;Date:&lt;\/span&gt;&lt;br\/&gt;\r\n\tJun 12, 2008\r\n&lt;\/div&gt;\r\n\r\n&lt;div id=\"caption4\" class=\"nivo-html-caption\"&gt;\r\n\t&lt;span class=\"title\"&gt;Photographer:&lt;\/span&gt;&lt;br\/&gt;\r\n\tNino Satria&lt;br\/&gt;\r\n\t&lt;span class=\"title\"&gt;Location:&lt;\/span&gt;&lt;br\/&gt;\r\n\tTaman Safari Indonesia&lt;br\/&gt;\r\n\t&lt;span class=\"title\"&gt;Model:&lt;\/span&gt;&lt;br\/&gt;\r\n\tTally Giraffe&lt;br\/&gt;\r\n\t&lt;span class=\"title\"&gt;Date:&lt;\/span&gt;&lt;br\/&gt;\r\n\tAug 16, 2009\r\n&lt;\/div&gt;\r\n\r\n&lt;div id=\"caption5\" class=\"nivo-html-caption\"&gt;\r\n\t&lt;span class=\"title\"&gt;Photographer:&lt;\/span&gt;&lt;br\/&gt;\r\n\tTimo Balk&lt;br\/&gt;\r\n\t&lt;span class=\"title\"&gt;Location:&lt;\/span&gt;&lt;br\/&gt;\r\n\tUbud, Bali, Indonesia&lt;br\/&gt;\r\n\t&lt;span class=\"title\"&gt;Model:&lt;\/span&gt;&lt;br\/&gt;\r\n\tOfferings&lt;br\/&gt;\r\n\t&lt;span class=\"title\"&gt;Date:&lt;\/span&gt;&lt;br\/&gt;\r\n\tDec 20, 2009\r\n&lt;\/div&gt;\r\n\r\n&lt;div id=\"caption6\" class=\"nivo-html-caption\"&gt;\r\n\t&lt;span class=\"title\"&gt;Photographer:&lt;\/span&gt;&lt;br\/&gt;\r\n\tAris Wjay&lt;br\/&gt;\r\n\t&lt;span class=\"title\"&gt;Location:&lt;\/span&gt;&lt;br\/&gt;\r\n\tUluwatu-Bali&lt;br\/&gt;\r\n\t&lt;span class=\"title\"&gt;Model:&lt;\/span&gt;&lt;br\/&gt;\r\n\tBeautiful Beach&lt;br\/&gt;\r\n\t&lt;span class=\"title\"&gt;Date:&lt;\/span&gt;&lt;br\/&gt;\r\n\tJul 20, 2011\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>Now, if we open<em> index.html<\/em> in the browser, we have something like this:<\/p>\n<figure><img decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-44.jpg\" width=\"600\" height=\"358\" alt=\"tutorial-nivo-slider-44.jpg\"><\/figure>\n<h3>Step 30<\/h3>\n<p>We still need to fix the slider\u2019s appearance using CSS.<\/p>\n<pre>\r\n#slidewrap {position:absolute;}\r\n#slider {\r\n\tposition:relative;\r\n\theight:auto;\r\n\twidth:920px;\r\n\tborder:10px solid #fff;\r\n\tbox-shadow:0 0 5px #444;\r\n\tmargin:10px;\r\n}\r\n.ribbon {\r\n\tbackground:transparent url(img\/info-bg.png) no-repeat;\r\n\theight:482px;\r\n\twidth:192px;\r\n\tposition:absolute;\r\n\tright:40px;\r\n\ttop:-3px;\r\n\tz-index:50;\r\n}\r\n#slider img {\r\n  position:absolute;\r\n  top:0px;\r\n  left:0px;\r\n  display:none;\r\n}\r\n<\/pre>\n<p>This is what we have now.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-45.jpg\" width=\"600\" height=\"306\" alt=\"tutorial-nivo-slider\"><\/figure>\n<p>Currently, we have linked Nivo slider plugin but we haven\u2019t hooked up the script. So let\u2019s hook up the script by adding these JavaScript functions between <code>&lt;head&gt;<\/code> and <code>&lt;\/head&gt;<\/code> element.<\/p>\n<pre>\r\n&lt;script type=\"text\/javascript\"&gt;\r\n$(window).load(function()  {\r\n$('#slider').nivoSlider();\r\n});\r\n&lt;\/script&gt;\r\n<\/pre>\n<h3> Step 31: Slider Style<\/h3>\n<p>The final step is adding the style of the slider.<\/p>\n<pre>\r\n\/* The Nivo Slider styles *\/\r\n.nivoSlider  {\r\n\tposition:relative;\r\n}\r\n.nivoSlider img  {\r\n\tposition:absolute;\r\n\ttop:0px;\r\n\tleft:0px;\r\n}\r\n\/* If an image is wrapped in a link *\/\r\n.nivoSlider a.nivo-imageLink  {\r\n\tposition:absolute;\r\n\ttop:0px;\r\n\r\n\tleft:0px;\r\n\twidth:100%;\r\n\theight:100%;\r\n\tborder:0;\r\n\tpadding:0;\r\n\tmargin:0;\r\n\tz-index:6;\r\n\tdisplay:none;\r\n}\r\n\/* The slices and boxes in the Slider *\/\r\n.nivo-slice  {\r\n\tdisplay:block;\r\n\tposition:absolute;\r\n\tz-index:5;\r\n\theight:100%;\r\n}\r\n.nivo-box  {\r\n\tdisplay:block;\r\n\tposition:absolute;\r\n\tz-index:5;\r\n}\r\n.nivo-directionNav {display:none!important}\r\n.nivo-html-caption  {\r\n  display:none;\r\n}\r\n.nivo-caption {\r\n\tposition:absolute;\r\n\tright:20px;\r\n\ttext-align:center;\r\n\ttop:130px;\r\n\twidth:192px;\r\n\tz-index:60;\r\n}\r\n.nivo-caption p {margin:0}\r\n.nivo-caption .title {font-style:italic}\r\n.nivo-controlNav {\r\n\tposition:absolute;\r\n\tbottom:10px;\r\n\tright:20px;\r\n\theight:15px;\r\n\twidth:192px;\r\n\ttext-align:center;\r\n\tdisplay:block;\r\n\tz-index:51;\r\n}\r\n.nivo-controlNav a {\r\n\tbackground:transparent url(img\/button.png) no-repeat center center;\r\n\tdisplay:inline-block;\r\n\theight:14px;\r\n\twidth:14px;\r\n\ttext-indent:-9999px;\r\n\tcursor:pointer;\r\n}\r\n.nivo-controlNav .active {\r\n\tbackground:transparent url(img\/button_active.png);\t\r\n}\r\n<\/pre>\n<h2>Final Result + Download<\/h2>\n<p>This is our final result, click <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/demo\/index.html\">here<\/a> to see the working demo.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-46.jpg\" alt=\"image slider with photoshop and jquery tutorial\" width=\"600\" height=\"342\"><\/figure>\n<p>Can\u2019t achieve certain step? Here are the result\u2019s PSD file & complete project for you to test and play with.<\/p>\n<ul>\n<li><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/slider-psd.zip\">Image Slider Tutorial PSD File<\/a><\/li>\n<li><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/slider-all.zip\">Image Slider Tutorial Complete Project<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Undoubtedly, image slider is one of the most commonly used elements in the business web design, due to its relatively large size that is able to draw the visitor\u2019s attention once they arrive the site. Though the web has started to rethink about the usability of the image slider, it\u2019s still considered as a must-learn&hellip;<\/p>\n","protected":false},"author":31,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[4642,911,2298,286],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Create Image Slider With Photoshop and jQuery - Hongkiat<\/title>\n<meta name=\"description\" content=\"Undoubtedly, image slider is one of the most commonly used elements in the business web design, due to its relatively large size that is able to draw the\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/image-slider-photoshop-jquery-nivo-slider\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Image Slider With Photoshop and jQuery\" \/>\n<meta property=\"og:description\" content=\"Undoubtedly, image slider is one of the most commonly used elements in the business web design, due to its relatively large size that is able to draw the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/image-slider-photoshop-jquery-nivo-slider\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2011-12-15T13:01:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T16:44:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-01.jpg\" \/>\n<meta name=\"author\" content=\"Mohammad Jeprie\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mohammad Jeprie\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-slider-photoshop-jquery-nivo-slider\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-slider-photoshop-jquery-nivo-slider\\\/\"},\"author\":{\"name\":\"Mohammad Jeprie\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/7905d634db8f6140fda6236103f50bb2\"},\"headline\":\"How to Create Image Slider With Photoshop and jQuery\",\"datePublished\":\"2011-12-15T13:01:26+00:00\",\"dateModified\":\"2025-04-03T16:44:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-slider-photoshop-jquery-nivo-slider\\\/\"},\"wordCount\":1358,\"commentCount\":20,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-slider-photoshop-jquery-nivo-slider\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/image-nivo-slider\\\/tutorial-nivo-slider-01.jpg\",\"keywords\":[\"Gallery and Slideshow\",\"jQuery\",\"Modernizr\",\"tutorials\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-slider-photoshop-jquery-nivo-slider\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-slider-photoshop-jquery-nivo-slider\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-slider-photoshop-jquery-nivo-slider\\\/\",\"name\":\"How to Create Image Slider With Photoshop and jQuery - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-slider-photoshop-jquery-nivo-slider\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-slider-photoshop-jquery-nivo-slider\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/image-nivo-slider\\\/tutorial-nivo-slider-01.jpg\",\"datePublished\":\"2011-12-15T13:01:26+00:00\",\"dateModified\":\"2025-04-03T16:44:30+00:00\",\"description\":\"Undoubtedly, image slider is one of the most commonly used elements in the business web design, due to its relatively large size that is able to draw the\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-slider-photoshop-jquery-nivo-slider\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-slider-photoshop-jquery-nivo-slider\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-slider-photoshop-jquery-nivo-slider\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/image-nivo-slider\\\/tutorial-nivo-slider-01.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/image-nivo-slider\\\/tutorial-nivo-slider-01.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-slider-photoshop-jquery-nivo-slider\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create Image Slider With Photoshop and jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/7905d634db8f6140fda6236103f50bb2\",\"name\":\"Mohammad Jeprie\",\"description\":\"Mohammad is an author, blogger and graphic designer. He knows some Photoshop techniques and loves sharing his knowledge with others. He runs PSDfreemium and DesainDigital where he regularly shares free design resources and some tutorials.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/mohammadjeprie\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create Image Slider With Photoshop and jQuery - Hongkiat","description":"Undoubtedly, image slider is one of the most commonly used elements in the business web design, due to its relatively large size that is able to draw the","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/image-slider-photoshop-jquery-nivo-slider\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Image Slider With Photoshop and jQuery","og_description":"Undoubtedly, image slider is one of the most commonly used elements in the business web design, due to its relatively large size that is able to draw the","og_url":"https:\/\/www.hongkiat.com\/blog\/image-slider-photoshop-jquery-nivo-slider\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2011-12-15T13:01:26+00:00","article_modified_time":"2025-04-03T16:44:30+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-01.jpg","type":"","width":"","height":""}],"author":"Mohammad Jeprie","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Mohammad Jeprie","Est. reading time":"16 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/image-slider-photoshop-jquery-nivo-slider\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/image-slider-photoshop-jquery-nivo-slider\/"},"author":{"name":"Mohammad Jeprie","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/7905d634db8f6140fda6236103f50bb2"},"headline":"How to Create Image Slider With Photoshop and jQuery","datePublished":"2011-12-15T13:01:26+00:00","dateModified":"2025-04-03T16:44:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/image-slider-photoshop-jquery-nivo-slider\/"},"wordCount":1358,"commentCount":20,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/image-slider-photoshop-jquery-nivo-slider\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-01.jpg","keywords":["Gallery and Slideshow","jQuery","Modernizr","tutorials"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/image-slider-photoshop-jquery-nivo-slider\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/image-slider-photoshop-jquery-nivo-slider\/","url":"https:\/\/www.hongkiat.com\/blog\/image-slider-photoshop-jquery-nivo-slider\/","name":"How to Create Image Slider With Photoshop and jQuery - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/image-slider-photoshop-jquery-nivo-slider\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/image-slider-photoshop-jquery-nivo-slider\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-01.jpg","datePublished":"2011-12-15T13:01:26+00:00","dateModified":"2025-04-03T16:44:30+00:00","description":"Undoubtedly, image slider is one of the most commonly used elements in the business web design, due to its relatively large size that is able to draw the","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/image-slider-photoshop-jquery-nivo-slider\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/image-slider-photoshop-jquery-nivo-slider\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/image-slider-photoshop-jquery-nivo-slider\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-01.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/image-nivo-slider\/tutorial-nivo-slider-01.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/image-slider-photoshop-jquery-nivo-slider\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create Image Slider With Photoshop and jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/7905d634db8f6140fda6236103f50bb2","name":"Mohammad Jeprie","description":"Mohammad is an author, blogger and graphic designer. He knows some Photoshop techniques and loves sharing his knowledge with others. He runs PSDfreemium and DesainDigital where he regularly shares free design resources and some tutorials.","url":"https:\/\/www.hongkiat.com\/blog\/author\/mohammadjeprie\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-2P9","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/10859","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=10859"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/10859\/revisions"}],"predecessor-version":[{"id":73487,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/10859\/revisions\/73487"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=10859"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=10859"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=10859"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=10859"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}