It is almost 2018. 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
To adjust the slider size edit this CSS rule from the main code
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
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.
- Go to Blogger Dashboard > Layout > Add a Gadget Select HTML/Javascript
- Copy the code below and paste on it. Then Save it. And you’re done!.
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
To adjust the slider size edit this CSS rule from the main code