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

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

• Static Demo
• Blogger Demo

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!