jQuery Image Slider(wow slider) with Thumbnails for Blogspot


Here I came up with another awesome image slider for blogspot. This is a 'jQuery Image Slider with Thumbnails' created by WOWSlider. I did a little customization for making it blogger friendly with due respect to wowslider. See demo below.



Lets Step forward to adding this jQuery Image Slider with Thumbnails for Blogspot

1. Go to Blogger Dashboard > Layout > Add a Gadget
2. Select HTML/Javascript
3. Copy the code below and paste on it. 
<style type="text/css">
.slider-box {
    background: none repeat scroll 0 0 #FAFAFA;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 3px #333333;
    margin: 0 auto;
    width: 675px;
    overflow: hidden;
}

#slider-wrapper {
    margin: 0 auto;
    padding: 10px;
}

#jslider-container {
    border: 2px solid #FFFFFF;
    max-width: 550px;
    position: relative;
    text-align: left;
    z-index: 90;
}
</style>
<link href="http://project.dimpost.com/image-slider/wowslider/css/wow-slider.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<div class="slider-box">
    <div id="slider-wrapper">
        <div id="jslider-container">
            <div class="jslider_images">
                <ul>
                    <li>
                        <a href="http://dimpost.com">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-qRn2qm5rOBTKUc0MojS92pYXTF_wVA76KuuvnjibEJyoONnofhe8GOFQ08N3O6RzlWBseZQ5UsKxYUGhrkcGt08w04gM9phUJuszts6U2o5qo7UfHVKZpKetuM4lCTzbhCzOjVFOCLPB/s550/sample1.jpg" title="Sunset" />
                        </a>A boat with beautiful sunset.</li>
                    <li>
                        <a href="#">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhvZxmB9qHGiDSGTSWeJ1yzZKTTncOerirWJ3aghyphenhyphen6vSvMnBci09kEMQRuXkv4kDrGwDOPkNO0nlgMs-PHnkr50tB8nOsSgpywo1k722aOf8mlaU_UMox0hGZHplaEaQzcoNsS373ZZ8cS/s550/sample2.jpg" title="Rainbow" />
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis5kt0CLvYFG3_omB-7FIZuAICl4zkb8pK8SsdPpQ16QHCyFDxw4qjD5QATaqAnE39tw9EoC-1Z7rZ2_M0l5MOQMdfW3njWCmKALbzoD8clOzC4l6i2fhVPLA8bY70Pq8ZJ_nrzV8v5M-Y/s550/sample3.jpg" title="True Nature" />
                        </a>Tree in field with blue sky.</li>
                    <li>
                        <a href="#">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcNzu41nzDhpOrD_ttAKrXpLl52ZqF4r-puY33-VaeV_nxWkJF18SGCYD8LXuVV8sc3IQ219Tbdt3bqEfav0eXulcxXAAFf52Tgxb9oS3LdXFBhwTbcqQXznucPIeyMQPIHwJg10RjLYoF/s550/sample4.jpg" title="Sunrise" />
                        </a>Amaizing sunrise moment</li>
                    <li>
                        <a href="#">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjimo_1yKDdUM01DJKq6aE7LeAbmi7xQh2NizhGG3Ueq2KJuSAoLt4J8dHvcDB5cOHyE3d1ZTzdIrBIw9YCrqYfQc8bYEaXtgStR9U0fvi7e3PU9S7h_lC8qd0f9GbSbW3f4EVEyRh3xBDo/s550/sample5.jpg" title="CAR in HDR Nature" />
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZPync-6lbFyjpPn4aKjJcR7iMHNzYbvnUvcXCUBVJvbxmWDdCjOJnRnSTBooeBapaeBFqZjk281zf4r_GJeoZ8uDfZbs_oLi3OHsWaL8W8brxSEgjOA-8RoRCLy9g4z8ieNkWsQ2IghQh/s550/sample6.jpg" title="Sunshine" />
                        </a>
                    </li>
                </ul>
            </div>
            <div class="jslider_thumbs">
                <div>
                    <a href="#" title="Sunset"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrH1tqkVuBhGb-8hx14CNygRR8210QnhbxpTiOGcAjvKoVpOkjzftcBQzpPFoyADmF87fwvUohBTWyFQbAcsFknbkuJeL2CKdL8xLnWIEQQSEusTH85Z5muecmz0PFOkltXY36CQYuum3Y/s85/sample1.jpg" /></a>
                    <a href="#" title="Rainbow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVMx-6VD_Vs-mzrOhtBQS_kQHsmsDqwnpIQQHzouPKe4aUjtg9OE5INq9um6lTnAPESKCrAOCcpFDv7OHCWIBWVFF1AtNc-wlnsZMUFu0ktLvfOMNvniRGb5jjbhsgpEj2ap1Gp7Q_qiuz/s85/sample2.jpg" /></a>
                    <a href="#" title="True Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuHW2uN9CTFEWaKy9k2bxr0yhgFrpGHAM_-tya_dEyU49lnLoYqB04VUK_CorqTg8RZr7IigObHBmfsOpBThJNtbjsoAo9y0qO0SrDwWcd-fpAR-i9dvLFSfOK7ypTSPnG4bcQHRSHV0S1/s85/sample3.jpg" /></a>
                    <a href="#" title="Sunrise"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXeYEeSYHNCJh-t9n44ji2xzl4uELK7Xzv7O1-LZDXE1Ou4kBRdICtLAcrKEb6lqovD98zJ7pb3ttdoeTOxtGsKVQRyKFlLM8vQtgLRpfNmxVieg1KHeEWZlKyAYIlVYMKElnascFS6dlN/s85/sample4.jpg" /></a>
                    <a href="#" title="CAR in HDR Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgytvF7sO_jZycPVAPUEDuFtfaeir5P9Ozj7-8_kC7qMJAZLXziFobEsvuduJUJqyrgb5LI9MXNu77LSQflzjRF-Az85LmV_OlHoiprx-CQXZ4fVk6EmCtDDp40jvpL1Q57J1Fz2yJ8mG2T/s85/sample5.jpg" /></a>
                    <a href="#" title="Sunshine"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihHEuAwmqxVZLboUEbvPcPaOnok4sjGg3q6k1s9Ikixl6NQky4XzY07G8p0wFhfdml5EocXBcUjTFksdN2DhGZ8eE57XX2JI2TGfTHv8wjMbwoUVIzTMRr_gHw488QcWJ8PmmtVlQCLqkk/s85/sample6.jpg" /></a>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>

4. Save & you're done! But don't forget to update slider images and text with yours.
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

22 comments

  1. how to change the image size?

    ReplyDelete
  2. This slide is wonderful! Thanks for sharing! You could teach how to change the width and height of the slide. And also how to remove the thumbnails.

    ReplyDelete
  3. i cant change the dimensions..
    it ignores all the changes. Can you help me ?

    ReplyDelete
  4. hi friend great work i like all your sliders
    but i need your
    can you tell me how to bring slider codes from wow slider because i tried alot but failed many times last i saw your slider so thought that you can help me plzzzzzzzzzzzzzzzzzzzzzzz help me bro

    ReplyDelete
  5. Thank you for the precious sharing. Can I change the images to my own?

    ReplyDelete
  6. so how can change this image and insert my own mage pls help

    ReplyDelete
  7. thank for provide this to me but i can't change photo inoder to insert own photo to my blog header slideshow

    ReplyDelete
  8. want to change the width and the height of this slider. How can I do this?

    ReplyDelete
  9. :) How to Slide Image for blogger and click Link URL

    ReplyDelete
  10. I have applied in my project but does not work on Opera Mini correctly....
    Website designing Pakistan

    ReplyDelete
  11. How to link slider with posts?

    ReplyDelete
  12. one of the most beautiful and practical sliders...thanks !!!! i use it in every blog of mine...

    ReplyDelete
  13. To change the width and height slider . You change #jslider-container in wow-slider.css

    ReplyDelete
  14. ask permission to copy the code slide
    Thank you very much

    ReplyDelete
  15. All sliders are awesome. A special thanks for you dude =p

    ReplyDelete
  16. Great job. Wow! This can be one particular of the most useful blogs we’ve ever arrive across on this subject. Actually Great. I am also a specialist in this topic therefore I can understand your effort. Thanks for inspiration. Will prove really useful in future. I learn something totally new and challenging. Thanks for sharing.

    Regards
    John Albert

    ReplyDelete
  17. Thanks for sharing a useful information
    www.grabbitmedia.com

    ReplyDelete

 
© 2013- Image Slider For Blogger
Created & Maintained by Shuvojit Das
Powered by blogger.com
Privacy Policy | Contact Me
Back to top