Image and Text Slider For your blog

In my previous post, you all have learned about Marquee tag in HTML, Its uses and  much more. Now, Its time to design or develop something which is useful for your website or blog. So here I will tell how to  make professional Marquee Slider like jQuery. In this Widget, I used simple JavaScript as well as Marquee tag to implement this. You have seen this widget in Many blog or website to show their clients at the bottom of page. Now this time you can also develop your own Slider with simple Steps. Here I am showing you three different format of this slider. One for Text just like a Floating News Widget and other for Image with Pause, Start and Stop buttons. So Lets starts with this tutorial.


You May Also Like : Make Interactive Webpages using Marquee.

How to Make this Slider.

Here I am explaining step by steps to add this widget in your blog. For any type of slider you have to include this JavaScript File in your blog before </head> tag.

<script type="text/javascript" src="http://probloggingtools.googlecode.com/files/marquee_slider.js"></script>

Type 1 Slider [Text]

This is a leading website about blogging tools, tips , Widget and template Customization. I hope you are happy with blog posts and tutorials.

Code of This Text Slider

<div class="slider_text" id="marquee0">
This is a leading website about blogging tools, tips , Widget and template Customization. I hope you are happy with blog posts and tutorials.
</div>
<script type="text/javascript">
marqueeInit({
 uniqueid: 'marquee0',
 style: { //style object for this marquee container (use quotes on both sides of the : as shown)
    'width': '100%',
    'height': '1.6em',
    'color': '#fff',
    'background-color': '#32f',
    'font-family': 'sans-serif',
    'margin': '0 auto'},
      inc:1, //speed - of marquee slider.
 });
</script>

I this text slider, whenever user hover the text, it pause the slider.

Type 2 Image Slider [onMouse Pause]

Code of this Image Slider

<div class="marquee_slider" id="marquee1">
<a href="" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBHu3I0i9t2-LfojZXMr22VEmiAGYzNAGEMU8dTEn-ohKEV6DOczglcgAq6eZ-9PO4qCDJYZ2yFh_Ym832maAZaj11c0uX9M-9rqmpD2M9S3YvCvFN9CpCGyn7TOaCc4AR1JqdJdVZiVmd/s1600/CMCltdlogo.gif" /> </a>
<a href="" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhqnHofQJqD8hsB4QEoHv1C8nsT6eHAQMMiwGJQO4eyWE1IZbxWe2VFiRt2LO-inXb5xtTuwJPu9BkMEd0_oOa49bWQ8MHfZ-Gy2BiK0Nlwq6E8hN8cNlp6kVvur5j5cSVspaA1LA12Y_n/s1600/YesBanklogo.gif" /> </a>
<a href="" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipAJ5FnQV7rdnYbvXELOA0s9ujgUupuVzjjDrw17dXOEb9hvL2YNST1GCO2ntMIMyHuRLU4KoA0UsOmjARzbh5y-Xnn_z4m9VwQwQWV8TOU7lXKPJo8v71SOrT4qy9bXi5Kpds0kNWdKJH/s1600/accenturelogo.gif" /> </a>
<a href="" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEyMf4_6rOYw_7SXk11lvsWmIGKScklpT20onaEXlI8IURXpwFMdqFWGwVPLejZihaK9kUVtXOR3PX13Sqq7LnCMHvzVKMe2FCG0VmrSdAvJDRTqvpa10_iUa9sQFRZkX6PLVYzd8y8xjZ/s1600/aonhewittlogo.gif" /> </a>
<a href="" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUTgxKMLVPV1HuTHVgmkXev7oKQPGG0qDSrdmUv-nmUCfyklFNRzgXU_IfLG06YwRAeanwf2UkFPnbXXjkbLnIXszBhAwGMrz5LhayqQPwBQe_mhSycZPyFWsdGa1p59ZOvVsCe6p24eri/s1600/birlasoftlogo.gif" /> </a>
<a href="" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0AEGhy1m59cBXJRU5QwBEI3dZSpDEmXI70JqQno-fmlkSW4XbiRVX6w-dnksbq5U3akdInf6cSyKf7hmE8GMu3Stwv5w6nbyNBszRaFAn0RfL_KLXUFKAvB3EHVx_rn4YyLRpy2UvnMQb/s1600/cognizantlogo.gif" /> </a>
<a href="" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTygx55KqUHRD6gEnEvZkFeI4aipsm5iH78w-JUKx9Qwf5jfXZ2aUsHdrbwCldscDLu8cp2NVF4I2IBVavd8KDgCN3OZnl1JcVyCiERE2kEXs6IyqbP3dxl4k1714IKePmicfJMsus1x4k/s1600/hcl_partner_logo.gif" /> </a>
<a href="" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT5VxGdX43t6yFE7cxV7wJed3gq73FlujePTb_IZBqsMb2ROwZJVUmCxsLzypKZnKqKm3AqkWpC4ijk25t_xr8xtN-vSXMux-1Hea1gcoRU4d_NUh3U_MMDUeqrtZdhjFAA2Vu5SBS-TZN/s1600/mphasislogo.gif" /> </a>
<a href="" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGfyAvgq69w8BCssoeGRsGkjangtwcKe4mCMIGFisoEgd5aBpsIE7gUWtrieNoB_0IzInHFHnngVhdfizd-Mu7BrAdMcUFlnqJ5ErzMzPdOnJGRePZKHispn7yxe5JieN8I20sYsSIcXuZ/s1600/punjlloydlogo.gif" /> </a>
</div>
<script type="text/javascript">
marqueeInit({
 uniqueid: 'marquee1',
 style: { //style object for this marquee container (use quotes on both sides of the : as shown)
    'width': '400px',
    'height': '100px',
    'color': '#fff',
    'background-color': '#4dd469',
    'font-family': 'sans-serif',
    'margin': '5px auto'},
 inc:1, //speed - of the Marquee Slider
 });
</script>

 Change the Image links with yours. It is same as Text slider.

Type 2 Image Slider [Advanced]

Code of this Slider

<div class="marquee_slider" id="marquee2">
<a href="" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBHu3I0i9t2-LfojZXMr22VEmiAGYzNAGEMU8dTEn-ohKEV6DOczglcgAq6eZ-9PO4qCDJYZ2yFh_Ym832maAZaj11c0uX9M-9rqmpD2M9S3YvCvFN9CpCGyn7TOaCc4AR1JqdJdVZiVmd/s1600/CMCltdlogo.gif" /> </a>
<a href="" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhqnHofQJqD8hsB4QEoHv1C8nsT6eHAQMMiwGJQO4eyWE1IZbxWe2VFiRt2LO-inXb5xtTuwJPu9BkMEd0_oOa49bWQ8MHfZ-Gy2BiK0Nlwq6E8hN8cNlp6kVvur5j5cSVspaA1LA12Y_n/s1600/YesBanklogo.gif" /> </a>
<a href="" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipAJ5FnQV7rdnYbvXELOA0s9ujgUupuVzjjDrw17dXOEb9hvL2YNST1GCO2ntMIMyHuRLU4KoA0UsOmjARzbh5y-Xnn_z4m9VwQwQWV8TOU7lXKPJo8v71SOrT4qy9bXi5Kpds0kNWdKJH/s1600/accenturelogo.gif" /> </a>
<a href="" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEyMf4_6rOYw_7SXk11lvsWmIGKScklpT20onaEXlI8IURXpwFMdqFWGwVPLejZihaK9kUVtXOR3PX13Sqq7LnCMHvzVKMe2FCG0VmrSdAvJDRTqvpa10_iUa9sQFRZkX6PLVYzd8y8xjZ/s1600/aonhewittlogo.gif" /> </a>
<a href="" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUTgxKMLVPV1HuTHVgmkXev7oKQPGG0qDSrdmUv-nmUCfyklFNRzgXU_IfLG06YwRAeanwf2UkFPnbXXjkbLnIXszBhAwGMrz5LhayqQPwBQe_mhSycZPyFWsdGa1p59ZOvVsCe6p24eri/s1600/birlasoftlogo.gif" /> </a>
<a href="" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0AEGhy1m59cBXJRU5QwBEI3dZSpDEmXI70JqQno-fmlkSW4XbiRVX6w-dnksbq5U3akdInf6cSyKf7hmE8GMu3Stwv5w6nbyNBszRaFAn0RfL_KLXUFKAvB3EHVx_rn4YyLRpy2UvnMQb/s1600/cognizantlogo.gif" /> </a>
<a href="" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTygx55KqUHRD6gEnEvZkFeI4aipsm5iH78w-JUKx9Qwf5jfXZ2aUsHdrbwCldscDLu8cp2NVF4I2IBVavd8KDgCN3OZnl1JcVyCiERE2kEXs6IyqbP3dxl4k1714IKePmicfJMsus1x4k/s1600/hcl_partner_logo.gif" /> </a>
<a href="" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT5VxGdX43t6yFE7cxV7wJed3gq73FlujePTb_IZBqsMb2ROwZJVUmCxsLzypKZnKqKm3AqkWpC4ijk25t_xr8xtN-vSXMux-1Hea1gcoRU4d_NUh3U_MMDUeqrtZdhjFAA2Vu5SBS-TZN/s1600/mphasislogo.gif" /> </a>
<a href="" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGfyAvgq69w8BCssoeGRsGkjangtwcKe4mCMIGFisoEgd5aBpsIE7gUWtrieNoB_0IzInHFHnngVhdfizd-Mu7BrAdMcUFlnqJ5ErzMzPdOnJGRePZKHispn7yxe5JieN8I20sYsSIcXuZ/s1600/punjlloydlogo.gif" /> </a>
</div>
<script type="text/javascript">
marqueeInit({
 uniqueid: 'marquee2',
 style: { //style object for this marquee container (use quotes on both sides of the : as shown)
    'width': '400px',
    'height': '100px',
    'color': '#fff',
    'background-color': '#4dd469',
    'font-family': 'sans-serif',
    'margin': '5px auto'},
 inc:10, //speed - of marquee slider
 mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
 moveatleast: 4,
 neutral: 150,
 savedirection: true
});
</script>

In this slider, Its change the sliding speed according to the position of the mouse. At left it move in right direction and vice versa.