How to add a Responsive Slideshow Widget to Blogger

It is almost 2016. And now responsive/ fluid design became very trendy things for websites/ blogs. Not only trendy but it is very necessary for websites to have responsive design, as high percentage of users going mobile.

So here I came up with a responsive slideshow widget for Blogger webmasters. This slideshow widget is build with Camera Slideshow jQuery Plugin, which is an open source project of Pixedelic


Blogger Slideshow

Features of Responsive Blogger Slideshow Widget (Camera Slideshow)

  • Fully Responsive
  • Cross-Browser Supported 
  • 33 Different Colors Skin
  • Lots of options to customize it in your way
  • jQuery Easing Supported
  • Custom jQuery Mobile for mobile devices compatibility.


Check out the demo (Static & Blogger version) of Responsive Slideshow Widget



I Would Say ‘One Of The Best’ If You Ask For Responsive Slider/Slideshow Plugin

There is many beautiful jQuery slider/ slideshow plugin out there. But I found that most of them (slider with lots of features) aren’t fully responsive. Another dependable responsive slider I found is FlexSlider, which is very popular for its simplicity. Alongside responsiveness this Camera Slideshow plugin has some other cool features too including..
  • Lots of transition effects
  • Play/Pause, Thumbnail Navigation, ToolTip Navigation etc. 
  • HTML5 Data Attribute supported. By using it, many properties can be added to slide. For example a link/URL, thumbnail URL/ slider image URL etc.
  • You don’t have to worry about image size or aspect ratio. 
  • Images will be re-sized to fit automatically with the slideshow box. 
  • When images are larger than container / slideshow box, or have different aspect ratio then they will be cropped (from middle) automatically with maintaining their aspect ratio, that’s mean they won’t get Stretch.
  • Video Supported.

I recommend to add larger images than the container/slideshow box or at least same size of the container.



Get The Code!

To add this slideshow to your BlogSpot blog, just Copy and Paste the code given below into a HTML/Javascript Widget

  1. Go to Blogger Dashboard > Layout > Add a Gadget Select HTML/Javascript 
  2. Copy the code below and paste on it. Then Save it. And you’re done!.
<!---------------------------------------------
    Blogger Slideshow Widget by
    http://imagesliderforblogger.blogspot.com/
    org. by dimpost.com 
----------------------------------------------->
<!--  Camera_Slideshow Styles  -->
<link rel='stylesheet' id='camera-css' href='http://project.dimpost.com/camera-slideshow/css/camera.css' type='text/css' media='all'>
<!-- Camera Slideshow Scripts -->
<script type='text/javascript' src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
<script type='text/javascript' src='http://project.dimpost.com/camera-slideshow/scripts/jquery.mobile.customized.min.js'></script>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
<script type='text/javascript' src='http://project.dimpost.com/camera-slideshow/scripts/camera.min.js'></script>
<script type='text/javascript'>
jQuery(function() {
    jQuery('#camera_wrap_1').camera({
        time: 2500, // milliseconds between the end of the sliding effect and the start of the nex one
        transPeriod: 1200, // length of the sliding effect in milliseconds
        thumbnails: false, // thumnails & tooltip is controlled by it
        pagination: true, // only when "pagination" is set to "false" thumbnails will be visible
        fx: 'curtainTopLeft, curtainTopRight, curtainBottomLeft, curtainBottomRight, curtainSliceLeft, curtainSliceRight, blindCurtainTopLeft, blindCurtainTopRight, blindCurtainBottomLeft, blindCurtainBottomRight, blindCurtainSliceBottom, blindCurtainSliceTop, stampede, mosaic, mosaicReverse, mosaicRandom, mosaicSpiral, mosaicSpiralReverse, topLeftBottomRight, bottomRightTopLeft, bottomLeftTopRight, bottomLeftTopRight, scrollLeft, scrollRight, scrollHorz, scrollBottom, scrollTop', // transition effects
        hover: false, // Pause on hover
        height: '50%' // slideshow height (50% is default)
    });
});
</script>
<style type="text/css">
.fluid_container {
    margin: 0 auto;
    /* aling centered */
    width: 100%;
    max-width: 900px;
    overflow: hidden;
}


/* Blogger CSS Conflict Fix */

.camera_pag_ul {
    border: none !important;
    background: none !important;
}

.camera_pag_ul li {
    float: inherit !important;
    padding: inherit !important;
}

.camera_pag_ul {
    margin: 0 !important;
    border: 0 !important;
}
</style>
<div class="fluid_container">
    <!-- camera_slideshow camera_wrap-->
    <div class="camera_wrap" id="camera_wrap_1">
        <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/1.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/1.jpg">
            <div class="camera_caption fadeFromBottom">
                Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
            </div>
        </div>
        <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/2.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/2.jpg">
            <div class="camera_caption fadeFromBottom">
                It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
            </div>
        </div>
        <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/3.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/3.jpg">
            <div class="camera_caption fadeFromBottom">
                <em>It's completely free</em> (even though a donation is appreciated)
            </div>
        </div>
        <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/4.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/4.jpg">
            <div class="camera_caption fadeFromBottom">
                Camera slideshow provides many options <em>to customize your project</em> as more as possible
            </div>
        </div>
        <div data-link="http://www.dimpost.com/" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/5.jpg" data-src="http://project.dimpost.com/camera-slideshow/images/slides/5.jpg">
            <div class="camera_caption fadeFromBottom">
                It supports captions, HTML elements and videos.
            </div>
        </div>
    </div>
    <!-- #camera_wrap_1 -->
</div>
<!-- .fluid_container -->

Customization Options:

Look at the code below. This is where you customize the slideshow. Play with it. (Read code comments for get easily).

Slideshow Options 
    time: 2500, // milliseconds between the end of the sliding effect and the start of the nex one
    transPeriod: 1200, // length of the sliding effect in milliseconds
    thumbnails: false, // thumnails & tooltip is controlled by it
    pagination: true, // only when "pagination" is set to "false" thumbnails will be visible
    fx: 'curtainTopLeft, curtainTopRight, curtainBottomLeft, curtainBottomRight, curtainSliceLeft, curtainSliceRight, blindCurtainTopLeft, blindCurtainTopRight, blindCurtainBottomLeft, blindCurtainBottomRight, blindCurtainSliceBottom, blindCurtainSliceTop, stampede, mosaic, mosaicReverse, mosaicRandom, mosaicSpiral, mosaicSpiralReverse, topLeftBottomRight, bottomRightTopLeft, bottomLeftTopRight, bottomLeftTopRight, scrollLeft, scrollRight, scrollHorz, scrollBottom, scrollTop', // transition effects
    hover: false, // Pause on hover
    height: '50%' // slideshow height (50% is default)

To adjust the slider size edit this CSS rule from the main code
.fluid_container {
    margin: 0 auto; /* aling centered */
    width: 100%;
    max-width: 900px;
    overflow: hidden;
}


Your feedback is most welcome!

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...

45 comments

  1. Replies
    1. Hi,

      The slider is beautiful. Lots of transition effects. Love it.

      Now it appears on the desktop but it does not appear on mobile.
      How to make it appear on mobiles too?

      PS: Yes I added as a widgets, so I have included "mobile='yes'" in the template code.

      Delete
  2. Nice article, But how do i change the Image? and i adjusted the height of the slider so the caption did not adjust with it. Please what do i do?

    ReplyDelete
    Replies
    1. Changing images are quite easy. I'll show you.

      Search for data-src=
      Yo'll see that data-src is containing image URL for every slide.

      Replace those image URLs with yours

      And if you want to show thumbnails like shown in this demo(slider with thumbnails) then put your thumbnails url into data-thumb=""

      I hope this helps

      Thanks for visiting.

      Delete
  3. awesome slider! For all that cant change the image just open the html and change the things that say "HERE" to your own images.

    div data-link="THIS IS THE LINK WHEN SOMEONE CLICKS ON IT" data-thumb="INSERT IMAGE SRC HERE" data-src="HERE AGAIN">

    ReplyDelete
  4. Thank you very much ! it worked for me, I CHANGED some things but i like it. You can check it here http://lejournaldefee.blogspot.com/

    ReplyDelete
  5. Hi, i tried your code, which is fantastic, but it did not appear on my blog. why is that? I hope you can answer back, thanks. My blog: http://chivasaganar.blogspot.com/

    ReplyDelete
    Replies
    1. @¡CHIVAS A GANAR!, You did great. There is nothing wrong with your installation but jQuery conflict is causing the trouble.

      Your blog has now two jQuery script. All you have to do is remove one.

      I'd recommend to remove just this code below:

      <!-- Camera Slideshow Scripts -->
      <script type='text/javascript' src='https://code.jquery.com/jquery-2.1.4.min.js'></script>

      And that's it. But if you still have that problem or anything else, let me know.

      Thanks :)

      Delete
  6. Thanks for the reply. So I did what you said, i removed the code but i'm still having the same problem. Hope you can help. Thanks! :)

    ReplyDelete
    Replies
    1. It is quite impossible for me to say whats causing the bug there without seing/investigating the whole code (template).

      If you still need help, contact me

      Delete
  7. Thanks! I'll send you the code template. I'll email it to you.

    ReplyDelete
  8. Can you put the widget directly into the home page? Thanks!

    ReplyDelete
  9. Hello! I find it impossible to replace with my own pictures..!

    ReplyDelete
  10. Please how do I change the image links. Please. :((

    ReplyDelete
    Replies
    1. Hello Paulson Ikenna Kyrian & Katerina Christopoulou

      Changing images are quite easy. I'll show you.

      Search for data-src=
      Yo'll see that data-src is containing image URL for every slide.

      Replace those image URLs with yours :)

      And if you want to show thumbnails like shown in this demo(slider with thumbnails) then put your thumbnails url into data-thumb=""

      I hope this helps :)
      Thanks for visiting.

      Delete
  11. is there a way for the images to automatically change wen new posts is made...

    ReplyDelete
    Replies
    1. Blogger Dynamic Slider is the only slider which has that functionality to update slider images from new posts or from a selected Label. Currently this slider does not have that. I’ll think about adding this option to it next. Thanks for visiting.

      Delete
  12. thats is the best-/thank you so much :) http://goo.gl/NTgrmM

    ReplyDelete
  13. Hello thankyou for your nice slider.I can change the image but how can i add a new Image from my Desktop computer or how can i create my picture link??Please :((

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Rachel: I saw your comment about automatic updates. Did you ever figure out how to do that? thanks

      Delete
  15. Thanks for the best one ever....i want to ask how to add link for image article below the image????

    ReplyDelete
  16. Beautiful slider and easy to customize! Thank you!

    ReplyDelete
  17. is it only for blogspot or custom domain can use it too?

    ReplyDelete
  18. Great slider! Everything is working good, however I would like the slider to only display on the home page. Do you have a fix, preferably CSS for that?

    Thanks a bunch for making this available. :)

    ReplyDelete
  19. thanks and i loved it but my problem is that i wants to add two widgets on my blog www.readersdiary.co, ibut only one is visible please help @-)

    ReplyDelete
  20. How do I remove the captions of my images during the slideshow?

    ReplyDelete
  21. hello . excelent widget but i face 2 problems. can you help me ?
    first i see 2 arrows for left, right and pause buttons
    secondly the dots ( that move through the slides) are supposed to appear lower and not that hight with result of a white space below the widget.
    http://adalianisb.blogspot.gr/
    thank you in advance for your help

    ReplyDelete
  22. is there any option to add this slider insider blogger post instead of widget bxo

    ReplyDelete
  23. i added to myblogg, but just display as below. What wrong ? https://bottramhuong.blogspot.com/


    Camera is a responsive/adaptive slideshow. Try to resize the browser window
    It uses a light version of jQuery mobile, navigate the slides by swiping with your fingers
    It's completely free (even though a donation is appreciated)
    Camera slideshow provides many options to customize your project as more as possible
    It supports captions, HTML elements and videos.

    ReplyDelete
  24. hi I found it imposible to put the slider in my blog and the reason is that it does no appear, at all what do you think can be the reason, my blog is bibliotecaesotericacr.com

    ReplyDelete
  25. I had slideshows on my blog earlier but suddenly disappeared. I tried following your directives to get it restored but it didn't work, instead, it is showing details on 'Camera responsive/adaptive slideshow'. I earlier had a slideshow which I uploaded images from PC and not from camera. Please, how do I get it restored?

    ReplyDelete
  26. Great slider. I wonder if it is possible to show an album in spite of give the place or name of each picture. (Source Google photo's)
    Kind regards
    Marianne ten Klooster

    ReplyDelete
  27. how to make the box of images be lager ?

    ReplyDelete
  28. Hello, I hope you can help, I am a dummy on html https://lh4.googleusercontent.com/-0R7-2DC1klM/T2WEmMQajfI/AAAAAAAACdM/-4JFCeC6QD8/s36/8.gif
    But the slicer works fine except one thing. My images are of different sizes. So now most of them does not fit in the window.
    This is for me the last finish touch to make it work!
    Kind Regards,

    Marianne

    ReplyDelete
  29. THANKS, THANKS THANKS THANKS...... RECEIVE UNLIMITED THANKS
    i love it it worked so cool

    ReplyDelete
  30. Perfect work! It looks so nice! Many thanks for sharing!! :)

    By the way, is there any easy way to show the pictures randomly? I guess I will need to code to modify this but maybe there's an easy way I don't see. Thanks in advance!

    ReplyDelete
  31. pls i don't know how to add on my blog am trying to do it but is not showing so painful
    source:https://dwaygist.blogspot.com.ng/

    ReplyDelete
  32. I was using this slider for a couple of days in my blog. I had to add i more slider to the blog that I got from another source. When I installed the second widget slider , i found that this slider donor work. When I removed the second slider this one is working properly.

    Please help me to sort this.

    Regards,

    Anoop

    ReplyDelete
  33. how to change the pictures with auto slide recent post?

    ReplyDelete
  34. I got this message :

    "Camera is a responsive/adaptive slideshow. Try to resize the browser window
    It uses a light version of jQuery mobile, navigate the slides by swiping with your fingers
    It's completely free (even though a donation is appreciated)
    Camera slideshow provides many options to customize your project as more as possible
    It supports captions, HTML elements and videos."

    can you solve it ?

    ReplyDelete

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

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