jQuery Coin Slider (Image Slider) Plugin

jQuery Coin Slider or Image Slider is very useful in web page design. It allows the same location to show images with interesting transition effects. Each image will link to a different website therefore this is especially useful for banner rotation and products display.

Using the jQuery Coin Slider Plugin:

1. The first step is to download jQuery Coin Slider at developer website:

  • http://workshop.rs/projects/coin-slider/

2. The download package include the following three files:

  • coin-slider.js
  • coin-slider.min.js
  • coin-slider-styles.css

3. Save the files.

4. Prepare some image files that will be used for the slide show. The default image size for the jquery coin slider plugin is 565×290 pixels. If the sizes of your image are also 565×290 pixels you don’t need to modify the settings of the plugin.

For illustration, the sizes of my images are 540×360 pixels.

5. It’s time to see how to use the jQuery Coin Slider plugin.

6. Using the jQuery Coin Slider plugin is very simple and easy.

Webpage Header Section:

Include the required files within the header section:

<head>

<title>jQuery Coin Slider (Image Slider) Plugin Example</title>
<meta name="description" content="jQuery Coin Slider: Image Slider Plugin with Transition Effects" />
<meta name="keywords" content="jquery slideshow plugin, jquery plugin,image slider, slider" />

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<script type="text/javascript" src="coin-slider.js"></script>
<link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />

<script type="text/javascript">
    $(document).ready(function() {
        $('#coin-slider').coinslider();
    });
</script>

</head>

Webpage Body Section:

Insert the slide images one by one within a coin-slider Div layer:

<body>

<h2>jQuery Coin Slider (Image Slider) Example</h2>

<div id="coin-slider">

            <a href="http://www.gobiznow.com/" target="_blank">
                <img src="images/image-1.jpg" alt="Flower 1" />
                <span>
                    <b>Flower 1</b><br />
                    Write some description here if required.....
                </span>
            </a>

            <a href="http://www.flashwonderland.com/" target="_blank">
                <img src="images/image-2.jpg" alt="Cat and Flower" />
            </a>

            <a href="http://www.keepfast.com/" target="_blank">
                <img src="images/image-3.jpg" alt="Beautiful Flower" />
            </a>

            <a href="http://www.oscommerce-template-easy.com/" target="_blank">
                <img src="images/image-4.jpg" alt="Wind Mill" />
                <span>
                    <b>Butterfly</b><br />
                    Write something about wind mill here if required.....
                </span>
            </a>

            <a href="http://www.mygreatname.com/" target="_blank">
                <img src="images/image-5.jpg" alt="Butterfly" />
            </a>

</div>

</body>
</html>

Note:
Add the title and description for the image if required, as shown in the example above.

7. Save the file. The result will be shown as below:

As mention before, the default size of slider images are 565×290 pixels. And my images are 540×360 pixels. That’s why the slider images are not fitted into the panel.

8. Modify the size of slider panel.

Open coin-slider.js file with a text editor. Browse to about line 470. The default settings of coin-slider are:

Change the width from 565 to: 540
Change the height from 290 to: 360

9. Save the file. Refresh browser to see the changes.

10. Hm…. The size of title and description bar at the bottom is not correct. Of course, if you don’t use the tile and description for the slider image, you don’t need to modify the size of title and description bar.

11. Modify the size of title and description bar.

Open coin-slider-styles.css file with a text editor. Browse to line 14. The default setting of the title bar are:

Since the padding of cs-title bar is 10px, on both left and right side. Therefore the width of the title bar is 540 – 20 = 520 pixels.

Change the width of title from 545px to: 520px.

12. Save the file. Refresh browser to see the changes.

Everything seems fine now.

Take a look at the navigation bar again at the bottom.

The position of navigation bar is not align with the slider panel. Let’s fix it now.

13. Open coin-slider.js file again with a text editor. Browse to about line 288.

The position of the navigation bar can be adjusted with the value of margin-left property. Change it so that it shift to the left a little, as shown below:

14. Save the file again. Refresh browser to see the changes.

As you can see, this is rather easy to use a jQuery image slide show plugin.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>