• Jimdo themes

    The Powerful and Responsive Jimdo themes

  • Multilingual and Ecommerce

    For Individuals and small businesses

  • Unique Design

    Feeling Your Emotions and Imagination





Using jQuery Image Slider in Jimdo

Freelance Web Designer Milano
Coin image slider jimdo

The Coin slider is open source and released under the MIT license. This means you can use it almost anywhere and for almost any kind of project, including personal and commercial websites and themes you make.

Even if it's not one of my favorite jQuery plugins, let's get started with installation in three easy steps

1. Download & Link to jQuery files

Download and addthe above items into the <head> of your website. This will link jQuery and the Coin slider core JS files into your webpage. You can choose between uploading the latest jQuery to your Jimdo website or simply use the Google API library.

Don't forget to change the url of "coin-slider-min.js" file for your own one

jQuery plugin
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://u.jimdo.com/www54/o/sdfd33ca1d413f4c9/userlayout/js/coin-slider-min.js"></script>
<script type="text/javascript"> //<![CDATA[ var $j = jQuery.noConflict(); $j(document).ready(function() {
width: 630,
delay: 5000
}); }); //]]> </script>

As you can see, you will need to add  jQuery.noConflict(); in order to avoid the conflict with other jQuery libraries

2. Adding CSS styles

If you're using a custom Jimdo template, add CSS slider's styles to your CSS folder 

For standard Jimdo template, copy this code to the <head> section

*/ Coin Slider */
.coin-slider { overflow: hidden; zoom: 1; position: relative; width:630px; }
.coin-slider a { text-decoration: none; outline: none; border: none; }
.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #939393; color: #939393; text-indent: -1000px; }
.cs-active { background-color: #939393; color: #FFFFFF; }
.cs-title { width: 630px; padding: 10px; background-color: #000000; color: #FFFFFF; }
.cs-prev, .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }

3. HTML Page

After uploading the images, use the HTML Jimdo widget for the page you want to display the slider

<div id="coin-slider">   
<img src="http://u.jimdo.com/www54/o/sdfd33ca1d413f4c9/userlayout/img/slide001.jpg" alt="" /> <span><b>Coin Slider</b><br /> Compatible with Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+.</span>
<img src="http://u.jimdo.com/www54/o/sdfd33ca1d413f4c9/userlayout/img/slide002.jpg" alt=""/>
<img src="http://u.jimdo.com/www54/o/sdfd33ca1d413f4c9/userlayout/img/slide003.jpg" alt=""/>
<img src="http://u.jimdo.com/www54/o/sdfd33ca1d413f4c9/userlayout/img/slide004.jpg" alt=""/>
<img src="http://u.jimdo.com/www54/o/sdfd33ca1d413f4c9/userlayout/img/slide005.jpg" alt=""/>

Source: www.workshop.rs

Comments: 51 (Discussion closed)

  • JimdoPro

    torredetunia (Tuesday, 14 February 2012 19:13)

    Sorry but I´m new and quite interested in this.
    You talk about "choose to host jQuery on Jimdo server or use the Google file". How can I host any files in my JIMDO server if I have no access to to the server directories?. Do you mean if I´m using a custom layout, and the same way I upload images for the layout I can upload other files?.

    So far I just created JIMDO websites using JIMDO templates, but I´m really interested in learning about using custom layouts.

    Have you created this and other websites over JIMDO just with custom layouts, CSS and lots of work?. Great job!.

  • JimdoPro

    torredetunia (Tuesday, 14 February 2012 20:18)

    I tried but I don´t get it to work. I´m surely doing something wrong.

    I use a standard template, so I had to add the CSS styles in the head. When I save, JIMDO adds "/*<![CDATA[*/" after my "<style type="text/css">" and "/*]]>*/" before my "</style>" tags. I don´t know if this is normal, or how I have to add CSS styles in the Head.

    Also, since I have a standard template, I can not upload the "coin-slider.min.js" file, or don´t know how to.

  • JimdoPro

    torredetunia (Tuesday, 14 February 2012 20:22)

    Where I include the widget in the page, the slider doesn´t work and it just shows the pictures of the slide one after the other.

  • JimdoPro

    Serhiy (Tuesday, 14 February 2012 21:25)

    Hola! It doesn't matter whether you're using a custom or standard template.
    Go to >layout >custom >files and upload all images and the slider Js ,which at your server will be in this directory "http://u.jimdo.com/www9/o/s9fba82b10af3fbcd/js/coin-slider-min.js"

  • JimdoPro

    torredetunia (Wednesday, 15 February 2012 11:36)


    I´ve uploaded the files as you said, but it still doesn´t work. I must have something wrong.

    The steps I followed and my code right now is:

    1- I went to "layouts>custom>files" and uploaded the images for the slider and the "coin-slider.min.js".

    2- I went to "settings>web page>Edit head" and included in the head:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://u.jimdo.com/www9/o/s9fba82b10af3fbcd/js/coin-slider-min.js"></script>
    <script type="text/javascript">//<![CDATA[ var a = jQuery.noConflict(); a(document).ready(function() { a('#coin-slider').coinslider({ width: 630, navigation:true, delay: 5000 }); });//]]></script>

    3- I also included in the head the CSS styles:

    <style type="text/css">
    Coin Slider jQuery plugin CSS styles
    .coin-slider { overflow: hidden; zoom: 1; position: relative; }
    .coin-slider a{ text-decoration: none; outline: none; border: none; }
    .cs-buttons { font-size: 0px; padding: 10px; float: left; }
    .cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #939393; color: #939393; text-indent: -1000px; }
    .cs-active { background-color: #939393; color: #FFFFFF; }
    .cs-title { width: 630px; padding: 10px; background-color: #000000; color: #FFFFFF; }
    .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }

    ("/*<![CDATA[*/" and "/*]]>*/" where automatically added by Jimdo)

    4- Then I went to the page I want to insert the slider in, and added the Widget/HTML:

    <div id="coin-slider">
    <img src="http://u.jimdo.com/www9/o/s9fba82b10af3fbcd/userlayout/img/00-inicio-01.jpg" alt="TorredeTunia" />
    <img src="http://u.jimdo.com/www9/o/s9fba82b10af3fbcd/userlayout/img/00-inicio-01-2.jpg" alt="TorredeTunia" />
    <img src="http://u.jimdo.com/www9/o/s9fba82b10af3fbcd/userlayout/img/00-inicio-01-3.jpg" alt="TorredeTunia" />

    I have no idea about what can be wrong. After uploading the slider Js, in the HEAD, I put as you told me the link for the "http://u.jimdo.com/www9/o/s9fba82b10af3fbcd/js/coin-slider-min.js" file. I´m not sure if the file should be in the "userlayout" directory as in your example "http://u.jimdo.com/www9/o/s9fba82b10af3fbcd/userlayout/js/coin-slider-min.js". Anyway, I tried with both and still doesn´t work.

    I also think that CSS styles included in the head are not getting right.

    The page where I´m trying to have the sider working is this test page: http://www.torredetunia.com/im%C3%A1genes-internas/

    Also I´m not sure, if it was working, where should I configure the options you describe in your demo (http://www.hembarevskyy.com/jquery-image-slider-jimdo/).

    I would appreciate any comment or idea about where the problem could be.

    Also, since I´m really interested in learning about the custom layouts and customization of Jimdo websites, I would also appreciate any suggestion about where to learn about it and find instructions, tutorials or help (CSS, Jimdo templates and customization, etc).

    Thanks in advance for your help and your time Serhiy.

  • JimdoPro

    Serhiy (Wednesday, 15 February 2012 14:46)

    Hi, check again the demo here. Now i used the images & js files from your Jimdo website and it works. You can copy and paste the code from there. Tomorrow i'll remove them.
    By the way, try to put all images of the same size.
    For more tutorials or help, please use the Official Jimdo website http://www.jimdo.com/app/forum/

  • JimdoBusiness

    frandenpack (Sunday, 25 March 2012 20:01)

    Hello Serhiy,

    I have the same problems that torredetuni had: i followed every step you described, but in the end i only found the pictures one above the other.
    Could it be, that the link adress is not correct for the files I uploaded to the Jimdo-Server? How can I get the link adress for my js file on the Jimdo-Server and for the images I uploaded?
    Thank you very much for your help and your great tutorial - hope it will work soon ;-)

  • JimdoPro

    Serhiy (Sunday, 25 March 2012 20:23)

    Hi, this is the url of the js file that you uploaded:

  • JimdoBusiness

    frandenpack (Sunday, 25 March 2012 20:50)


    thanks for your fast reply. I think your link is not correct for my account, could that be? If I use it, nothing changes at all.

    Could you tell me how to get out the right link for the files uploaded to my page? In my opinion Jimdo does not find the right pictures nor the js-file...

  • JimdoPro

    Serhiy (Sunday, 25 March 2012 21:00)

    Sorry, that was a link from my server you used for your slider. Could you show me the page with the slider?

  • JimdoBusiness

    frandenpack (Sunday, 25 March 2012 21:11)

    I just activated the "Events"-Submenu for you and will close it after your answer. The side is in the very beginning...


  • JimdoPro

    Serhiy (Sunday, 25 March 2012 21:32)

    1. I couldn't find the CSS Styles for the slider.
    In your case it must be in the <head> section.

    <style type="text/css">
    /* put here the CSS styles for your slider from my tutorial*/

    2. The URL's for the images "test" and "test1" are incorrect

  • JimdoBusiness

    frandenpack (Sunday, 25 March 2012 21:40)

    this is my html widget:

    <div id="coin-slider">
    <img src="http://u.jimdo.com/www43/o/s0b49d3748ea1653d/userlayout/img/slide1.jpg" alt="Serhiy Hembarevskyy" /> <span>Coin Slider<br />
    Compatible with Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+.</span> <img src="http://u.jimdo.com/www43/o/s0b49d3748ea1653d/userlayout/img/slide2.jpg" alt=
    "Serhiy Hembarevskyy" /> <img src="http://u.jimdo.com/www43/o/s0b49d3748ea1653d/userlayout/img/slide3.jpg" alt="Serhiy Hembarevskyy" /> <img src=
    "http://u.jimdo.com/www43/o/s0b49d3748ea1653d/userlayout/img/slide1.jpg" alt="Serhiy Hembarevskyy" /> <img src="http://u.jimdo.com/www43/o/s0b49d3748ea1653d/userlayout/img/slide2.jpg" alt=
    "Serhiy Hembarevskyy" />


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">

    <script type="text/javascript" src="http://u.jimdo.com/www43/o/s0b49d3748ea1653d/userlayout/js/coin-slider-min.js">

    <script type="text/javascript">

    //<![CDATA[ var $j = jQuery.noConflict(); $j(document).ready(function() { $j('#coin-slider').coinslider({ width: 630, navigation:true, delay: 5000 }); });//]]>

    Coin Slider jQuery plugin CSS styles

    .coin-slider { overflow: hidden; zoom: 1; position: relative; }
    .coin-slider a{ text-decoration: none; outline: none; border: none; }

    .cs-buttons { font-size: 0px; padding: 10px; float: left; }
    .cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #939393; color: #939393; text-indent: -1000px; }
    .cs-active { background-color: #939393; color: #FFFFFF; }

    .cs-title { width: 630px; padding: 10px; background-color: #000000; color: #FFFFFF; }

    .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }

    But nothing happens...I really think that the link to the js file is not working! It is a link to your website and not to mine: src="http://u.jimdo.com/www43/o/s0b49d3748ea1653d/userlayout/js/coin-slider-min.js"

  • JimdoPro

    Serhiy (Monday, 26 March 2012 01:37)

    the js link is correct! Now i updated the post adding also the screenshots. Then i copied the code as it is to a standard Jimdo website. Just check here:
    Please note, when your upload your own images, you will need to change the slider's width and add the height parameters if it's different from the example. For any help or further info, visit the official Jimdo forum http://de.jimdo.com/app/forum/.
    Mit besten Grüßen,

  • JimdoBusiness

    frandenpack (Monday, 26 March 2012 20:03)

    Hey Serhiy,

    thanks so much for your help! I have nearly arrived, I can see the slider with its functions, the buttons, and the shifting every 5000 milliseconds. The only thing that don't appear are my f*** pics. I made screen shots and saved them with 400*300px, uploaded them to my files, but they do not want to appear. I also changed the width and height params of the code, but still nothing.
    Could you please check again my site www.frandenpack.jimdo.com/events/

    I know that I am disturbing you but I am so near to the solution.

    Best Regards/mit besten Grüßen :-)

  • JimdoPro

    Serhiy (Tuesday, 27 March 2012 00:14)

    http://u.jimdo.com/www48/o/se6c3874162cd9202/userlayout/img/bild1.jpg - this is for your images;
    http://u.jimdo.com/www48/o/se6c3874162cd9202/userlayout/js/coin-slider-min.js - for your js files

  • #17

    Frandenpack (Tuesday, 27 March 2012 09:35)

    FANTASTIC, it works!!! Mille Grazie :-)

  • #18

    boxnotify (Thursday, 05 April 2012 21:46)

    Nevermind. It finally works. Jimdo simply needs some time until the uploaded files are accessible on the server.

    So for all users who use one of the default Jimdo Layout: You can upload your files under "Layout" > "Custom Layout" > "Files".

    In order to find out the path to your files, just do the following:

    1. Insert a picture somewhere on a dummy page.
    2. Then access your page normally (not in edit mode)
    3. In Firefox, right-click on an image of your page and select "View Image Info".
    4. Now Firefox will display the image url (location). It should look something like this:

    5. Copy the firt part of that url:

    Now add this "userlayout/img/"

    and you get this:

    This is the path to your images. If your image is named "MyImage.jpg", then the full path to that image is http://u.jimdo.com/www52/o/sc807c704691c0246/userlayout/img/MyImage.jpg

    Change "img" to "js" and you have the path to your js files:



    P.S. Admin, can you please post my previous post? I accidentally inserted my Email as name. I don't want to get spam.

  • JimdoPro

    Serhiy (Thursday, 05 April 2012 21:53)

    @boxnotify thank you:)

  • #20

    boxnotify (Thursday, 05 April 2012 21:55)

    Thanks for deleting the requested post. I just saw, I wrote "can you please post my previous post". I meant "delete my previous post", of course. But I see, you knew what I mean. Thank you very much!

    By the way, your blog is very helpful. I'm a beginner on Jimdo and your tutorials are a great support.

  • #21

    tenjinlodge (Wednesday, 09 May 2012 03:07)

    Hi, firstly I followed the instructions and combined with the forum I got the coinslider working properly so thank you. The problem is my primary market is Japan where the predominant browser is IE6 where things don't work so well. Using IE tester, I get

    Line: 13
    Char: 1
    Error: 'jQuery' is undefined
    Code: 0
    URL: http://www.tenjinlodge.com/

  • JimdoPro

    Serhiy (Wednesday, 09 May 2012 22:00)

    The coin slider is compatible with IE+6 so i think it may be ok for you.The same error you'll find using the Firebug. You can also use dropbox for your js files

  • #23

    GoldenApple (Thursday, 24 May 2012 06:27)

    Hi! Thank you so much for this post. I was wondering, how do I add description for each image? And is there a way to link each image so that when I click on the image, it would direct me to another webpage? Thank you!

  • #24

    GoldenApple (Thursday, 24 May 2012 06:29)

    Oh one more question, is there a way to hide the "prev" and "next" buttons, but still keep the little squares navigation at the bottom? Thanks again!

  • JimdoPro

    Serhiy (Thursday, 24 May 2012 12:07)

    To add a description for each image, use this :
    <a href="http://www.anywebsite.com/"><img src="slide.jpg" alt="Image"/><span>Your awesome description</span></a>
    To hide the nav. buttons, change "navigation:false"

  • #26

    madroom (Thursday, 09 August 2012 18:03)

    Сергей, доброе время суток, у меня проблема на счет слайдера, я ставлю по вашему уроку Слайдер, он поработает 3-5 дней, потом просто не отображается. Захожу на сайт он все исправно показывает, а когда посещаю его как пользователь, то его просто нету. Подскажите из-за чего так?

  • JimdoPro

    Serhiy (Thursday, 09 August 2012 18:40)

    я не вижу на вашем сайте слайдера и файлов, которые нужно загрузить

  • #28

    hearthstone (Friday, 24 August 2012 05:01)

    Сергей здравствуйте, поставил слайдер по вашему уроку, посмотрите что у меня получилось, что я не так сделал, подскажите пожайлуйста. У меня в режиме администратора все нормально показывает.

  • JimdoPro

    Serhiy (Friday, 24 August 2012 06:37)

    Ошибка в url файла "coin-slider-min.js" которого загрузили на сайт. Правильная ссылка на этот файл:
    Такая же проблема была у Вас на сайте с Flex slider

  • #30

    hearthstone (Friday, 24 August 2012 18:25)

    Большое спасибо Сергей, вы очень помогли)

  • JimdoPro

    dwphoto1 (Monday, 10 September 2012 17:57)

    Hi Serhiy!

    Thanks for your great work. Though, I have a problem with running the coin slider on my page properly.
    I chose coin slider because I dislike the jimdo slideshow which produces these ugly grey frames above and below the pictures (→ www.dwphoto.de/, see the bottom slideshow on the left.). Plus I wanted a slide that would be visible on iOS for example.

    Here is what I get:

    Problem 1:
    The size is wrong. All pictures are 800x600 px. The width works, the height doesn't. I tried to add the height to the code but then all pictures are shown simultaneously one under another.

    Problem 2: There are no „boxes“ below the pictures for navigation, just tiny numbers instead. And although I removed navigation buttons ( navigation:false ) the words are still visible.

    Problem 3: I tried to change the transition effect to a simple fade – has not worked until now. It is still the random circle of effects.

    Any idea?

    Thanks a lot

  • JimdoPro

    Serhiy (Tuesday, 11 September 2012 00:32)

    Hello Daniel, you need to add a CSS code as well.The list of all transition you'll find here

  • JimdoPro

    dwphoto1 (Tuesday, 11 September 2012 11:11)

    Hello again,

    thanks for the quick answer.
    Like the manual says I have added the css to the head section. Tried it again a minute ago. But nothing happenes.

    Anyway, the available transitions are not exactly what I am lokking for.
    Ok, I will try another plugin first. Maybe I#ll turn back to "coin" later.
    Once again: Thanks a lot for your quick help and great work!


  • #34

    Mnb7 (Thursday, 27 September 2012 10:03)

    Hey, I was wondering if I can change the title background color(the area where the image description is)?
    In the css styles it is #000000. I suppose I could change that color in the style sheet and upload it, but I wanted to make each photo have a different colored title background. Can this be done?

  • JimdoPro

    Serhiy (Sunday, 30 September 2012 16:00)

    You can do it with CSS creating a different color caption for each slide

  • JimdoPro

    the-greece (Monday, 22 October 2012 04:03)

    Чи можливо, щоб слайдер був замість зображення шапки сайта ?

  • JimdoPro

    Serhiy (Monday, 22 October 2012 15:22)

    Привіт, так можливо але в нестандартному шаблоні. Ось тут детально описано:

  • #38

    khemetbe (Wednesday, 24 October 2012 18:42)

    Hi Serhiy

    You tutorial worked really well. I've installed the nivo slider. My question is if there is any way to ad an url to each slide so when you click on the slide that is being displayed it takes you to the url you put on it?

    Where should I add the url to the image? in the widget or where? I'm new to this so I couldnt figure out this by myself. Thank you very much for your help.

  • #39

    khemetbe (Wednesday, 24 October 2012 21:21)


    LOL Ive already figured out how to put the link, thank you very much.

    BTW is there any way to change the time for the transitions of the photos in the slider? if it is possible where can I change it? Thanks

  • JimdoPro

    Serhiy (Wednesday, 24 October 2012 22:58)

    hi, sorry for the late answer. The other transition effects you'll find here:

  • JimdoBusiness

    Cordula Braun (Thursday, 15 November 2012 21:31)

    Hi, thanks for this great work. It works :)
    I have one question: How can I do a border-radius on the corners??

  • JimdoBusiness

    Cordula Braun (Friday, 16 November 2012 10:38)

    At the moment I saw, it works only in the adapting modus?? What did I do wrong??

  • JimdoPro

    Serhiy (Friday, 16 November 2012 11:34)

    For the border you can use
    background: #fff;
    border: 4px solid #fff;
    border-radius: 5px;

    The url of js file in header and images are wrong .
    For the header slider, i suggest you to use Nivo or Flex slider

  • JimdoBusiness

    Cordula Braun (Friday, 16 November 2012 14:28)

    Thanks for the tip of the url of js file. I got it....that was it!!:) I'm happy :))

  • JimdoBusiness

    Ayesha Williams, Lincoln Center (Thursday, 29 November 2012 18:02)

    Hi Serhiy, I've uploaded all of the code and files as stated in your instructions but for some reason still can not get the slideshow to work properly. Would you mind taking a look to see what i might be doing incorrectly?


    Thank you

  • JimdoPro

    joehogan (Thursday, 29 November 2012 18:38)

    Got this working after some trail and error. Thanks for the instructions. Great widgit.

  • #47

    sema-altmuenster (Wednesday, 16 January 2013 20:07)

    3 minutes - it works. thank you;-)

  • JimdoPro

    bluebaerry (Thursday, 31 January 2013 14:11)

    Very helpful! Thank you very much!

  • #49

    UplayNet [Администратор сайта] (Friday, 29 March 2013 14:17)

    Большое спасибо всё получилось!!!!

  • #50

    Sefa (Monday, 22 April 2013 21:58)

    What a Good information ! Thanks a lot !

  • #51

    Анастасия (Saturday, 04 May 2013 08:30)

    Напишите мне уже все на HTML.Ну не понимаю....я.





Top 5 Most Popular Jimdo Themes of 2013

Freelance Web Designer Milano
Best Jimdo templates of 2013

2013 has been a year of the launch of Jimdo iOS app. For those who are using custom layout, the most important new function that has been added this year are advanced options of Jimdo navigation which now allows to create dropdown and breadcrumb menu without any external widget. And here's the most popular Jimdo themes of the 2013

read more 0 Comments





Sailing to Antarctica - the book

Freelance Web Designer Milano
Michael Schrodt Project

A project by Michael Schrodt that can't make you to be indifferent. Sailing to Antarctica and its remote islands across the Southern Ocean. Over 5600 miles by boat, from Cape Horn to Cape of Good Hope with the amazing stories about people Michael met on the way, feelings, emotions and his passion for photography and traveling

read more 0 Comments





Custom Jimdo Themes: Support and Free Updates

Freelance Web Designer Milano
Custom Jimdo Themes: Support and Free Updates

Here we are again! After enjoying the windy summer holidays in Berlin, I'm again in Milan. To tell the truth, it was hard to leave Germany and I already miss it. I really had a good time,- kind people, beautiful places and I'll definitely come back soon!

read more 1 Comments

Buy Jimdo theme

Premium Jimdo themes


Useful links

About the author

Mein Name ist Serhiy Hembarevskyy, ich bin ein freiberuflicher Webdesigner und lebe in Mailand, Italien. Ich bin spezialisiert auf die Gestaltung indivdueller CMS Themes für Privatpersonen und kleine Unternehmen.

Blog categories

Latest posts