How to Create Image Slidehow using Cycle2 plugin for Blogger

Create Cycle2 Image Slider for Blogger

Hello everyone, In previous tutorial I have posted the article over bxSlider slideshow.

Today,  I'm here with a new cool trick, a new image slider with Cycle2 Plugin customization specially for Blog users. In fact I have created this nice image slider (sometimes called Basic Carousel) by customizing cycle2 Plugin. This can be added on Blog creating Gadget section on homepage. This can be used for both website as well as Blogger.

Introduction to Cycle2 Slider Plugin - 

Cycle2 is a versatile slideshow plugin for jQuery built around ease-of-use. It supports a declarative initialization style that allows full customization without any scripting. Simply include the plugin, declare your markup, and Cycle2 does the rest.

Features and Functions of Cycle2 Plugin :

• Declarative: no scripting needed!
• Responsive 100%
• Responsive: fully control your slideshow via css (resize this page to see!)
• Customizable: per-slide option overrides
• Extensible: fully customizable API (on a per-slideshow basis if you wish)
• Smart: supports image loading and delayed initialization
• Smarter: supports progressive image loading
• Out-of-the-box functionality for pagers, captions, overlays, and prev/next controls
• Support for swipe gesture on mobile devices
• Fade, scroll, shuffle, tile and carousel transitions
• Bookmarkable slides
• And lots more!
• Supports all browsers

View Demo

Now, let's see how to use it to your own Homepage - 

1- Open blogger dashboard Select "Layout"
2- Click on "Add a Gadget"
3- Choose  "HTML/JavaScript" Gadget (Click here for complete guide how to add Gadgets in blogger.)

4- Now paste Below Code inside it. Leave title blank

<!--**********Cycle2 Image slideshow modified by sanjay******************-->

<div class="cycle-slideshow"

    data-cycle-fx="scrollHorz"

    data-cycle-pause-on-hover="true"

    data-cycle-timeout=3000

    data-cycle-fx="tileSlide"

    >

<!-- prev/next links -->

    <div class="cycle-prev"></div>

    <div class="cycle-next"></div>

    <!-- overlays -->

   <div class="cycle-overlay"></div>

    <!-- pager -->

    <div class="cycle-pager"></div>

    <!-- slides -->

   <img onclick="window.open('http://www.webinetscript.com', '_blank')" src="http://malsup.github.io/images/p1.jpg" data-cycle-fx="tileSlide" data-cycle-tile-vertical="false" data-cycle-title="Spring" data-cycle-desc="Sonnenberg Gardens" />

   <img onclick="window.open('http://www.webinetscript.com', '_blank')" src="http://malsup.github.io/images/p2.jpg" data-cycle-fx="tileBlind" data-cycle-tile-count="12" data-cycle-title="Redwoods" data-cycle-desc="Muir Woods National Monument" />

  <img onclick="window.open('http://www.webinetscript.com', '_blank')" src="http://malsup.github.io/images/p3.jpg" data-cycle-fx="tileSlide" data-cycle-tile-count="4" data-cycle-title="Angel Island" data-cycle-desc="San Franscisco Bay" />

    <img onclick="window.open('http://www.webinetscript.com', '_blank')" src="http://malsup.github.io/images/p4.jpg" data-cycle-fx="tileBlind" data-cycle-tile-vertical="false" data-cycle-title="Raquette Lake" data-cycle-desc="Adirondack State Park" />

<!-- cycle-slider Javascript file -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://dl.dropboxusercontent.com/s/4d59zwwnkxd6v3v/jquery.cycle2.min.js"></script>

<script src="https://dl.dropboxusercontent.com/s/i2f1fsm9emqj0kk/jquery.cycle2.tile.min.js"></script>

<!-- cycle-slider CSS file -->

<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/arum4ggw50lvfp4/demo-slideshow.css" /></div>

<style>img{cursor:pointer}</style>

<!--***********************END*********************************-->

5- Save and see the Result

Preferred  image Dimension should be around 690pxX400px.

Customize you own -

1) Highlighted in Yellow color = "You Image Url"
2) Highlighted in Green Color = "Your image Link"

3) Delete  Below line from above code if  you have already added this in your html DOM.
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
4) Preferred  image Dimension should be around 690pxX400px.

And this is the example of Image slideshow using Cycle2 plugin. If you wish to know this in a great detail then go to following Link -

http://jquery.malsup.com/cycle2/

Screenshot:

08:33:00