How to add a Responsive Slideshow Widget to Blogger

It is almost 2019 and now responsive design Sliders became very trendy things for blogs. Not only Stylish but it is very necessary for websites to have responsive design as high percentage of users going mobile.

So Today I came up with a responsive slideshow widget for Blogger. This slideshow widget is build with Camera Slideshow jQuery Plugin.There is many beautiful JQuery slider plugin out there.

Features of Responsive Blogger Slideshow Widget

• Fully Responsive
• Video Supported
• Play/Pause Button 
• Next/Previous Button
• Upto Fives Slides
• Images will be Re-Sized to fit automatically with the slidehow box
• When the images are larger than container / slideshow box or have different aspect ratio then they will be cropped (from middle) 
• Lots of options to customize it in your way
• jQuery Easing Supported
• Custom jQuery Mobile for mobile devices compatibility.

Check out the demo of  Responsive Slideshow Widget

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

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

Go to Your Blogger Dashboard -> Layout -> Add a Gadget Select HTML/Javascript Copy the below code and paste on HTML/Javascript Gadget.Then Save it And you’re done!.

<!--------------------------------------------- Blogger Slideshow Widget by https://www.thetechsoff.com/ -----------------------------------------------> <!-- Slider Styles --> <link rel='stylesheet' id='camera-css' href='http://project.dimpost.com/camera-slideshow/css/camera.css' type='text/css' media='all'> <!--end-->
<!-- 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, // Thumbnails & 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%' // Slider 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="https://www.thetechsoff.com/" data-thumb="https://www.hum.tv/images/baandi.jpg?v=2" data-src="https://www.hum.tv/images/baandi.jpg?v=2"> <div class="camera_caption fadeFromBottom"> Slide<em>1</em> </div> </div> <div data-link="https://www.thetechsoff.com/" data-thumb="https://dailytimes.com.pk/uploads/temp/578f51a0cc6a7.jpg" data-src="https://dailytimes.com.pk/uploads/temp/578f51a0cc6a7.jpg"> <div class="camera_caption fadeFromBottom"> Slide<em>2</em> </div> </div> <div data-link="https://www.thetechsoff.com/" data-thumb="https://dailytimes.com.pk/assets/uploads/2019/05/23/Title-Ranjha-Ranjha-Kardi-1280x720.jpg" data-src="https://dailytimes.com.pk/assets/uploads/2019/05/23/Title-Ranjha-Ranjha-Kardi-1280x720.jpg"> <div class="camera_caption fadeFromBottom"> <em>Slide</em> 3 </div> </div> <div data-link="https://www.thetechsoff.com/" data-thumb="https://i.ytimg.com/vi/oF3oeamzTMw/maxresdefault.jpg" data-src="https://i.ytimg.com/vi/oF3oeamzTMw/maxresdefault.jpg"> <div class="camera_caption fadeFromBottom"> Slide<em>4 </div> </div> <div data-link="https://www.thetechsoff.com/" data-thumb="https://www.hum.tv/images/khaas.jpg?v=2" data-src="https://www.hum.tv/images/khaas.jpg?v=2"> <div class="camera_caption fadeFromBottom"> 
Slide 5 </div> </div> </div> <!-- #camera_wrap_1 --> </div> <!-- .fluid_container If You want Any Coustom Coutomization -->

Customization Options:
Look at the code below. This is where you customize the slideshow. Play with it.

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)

Keywords