Tutorial Simple Animation Blogger Template Image Slider for BlogrCart White2 Theme

When we promised our Blogger store themes/templates with the added shopping cart e-commerce featured we really mean it.

Via Blogger template uploads & setting-up your store details using BlogrCart theme custom Blogger widgets, your e-commerce blog store will be up in minutes. And the best part, all the detail functions is in the theme itself without depending on external resources. This way you can maintain (or even extend) the functions to work to you custom setup easily!

In this tutorial we will show you how easy it is to extend the no code editing image slider used with BlogrCart White2 - recently released Blogger store template. The pre-installed image slider is responsive, touch swipe & mobile ready with customizable heading text & click to action buttons from your Blogger layout section.

View theme features here at http://blogrcart-white2.blogspot.com or better yet click the Explore White2 link & take the 2 minute theme tour - it's cool!

Using this method, you will not have to touch your theme codes as all will be accessed externally via:-

• The plug-in add on widget located at Blogger Layout
• Blogger Designer Template at Add CSS link

Requirments

• slickjs responsive image slider plug-in by Ken Wheeler version 1.5.+ (used by most BlogrCart Blogger store theme collection)
• Some basic CSS & jquery/havascript knowledge

Tutorial Adding Cool Transistions to BlogrCart White2 Responsive Image Slider

The CSS styles

We are going to add specific styling to the image slider heading text & call to action button to create the transition animation effect. The codes here are  exactly the same codes used at BlogrCart White2 theme demo.

The reasons we are using CSS is due to the ability of all modern web browsers to render almost perfectly animations using pure CSS. It also reduces weight when using additional javascripts to your slider functions hence speed up your site when displayed on web browsers.

Go to Template > click the Customize Template > at Template Designer click the Add CSS link.

Copy the codes below inside the box.

/* Added CSS for image slider text animations starts */
.slider-caption h3,
.slider-caption a.btn  { position:relative; }

/* the timings */

/*timing before displayed */
.slider-caption.animate h3  {
-webkit-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
}
.slider-caption.animate a.btn  {
-webkit-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
     -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
}

/* timing after displayed state */
.slider-caption.no-animate h3 {
-webkit-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
}
.slider-caption.no-animate a.btn {
-webkit-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
     -o-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
}

/* the positioning */

/* the slider text BEFORE transitions positioning *
.slider-caption h3  { top:-999px; }
.slider-caption a.btn  { bottom:-999px; }

/* DISPLAYED state use top/bottom/left/right */
.slider-caption.animate h3  { top:0; }
.slider-caption.animate a.btn  { bottom:0; }

/* AFTER transition positioning use top/bottom/left/right */
.slider-caption.no-animate h3 { top:-999px; }
.slider-caption.no-animate a.btn { bottom:-999px; }

/* Added CSS for image slider text animations ends */

Click Update Template and head back to your Blogger Dashboard.

At this state when you refresh your Blogger store, the text will not display. This is because you have relatively position away the .slider-caption h3 (image slider heading title) & .slider-caption a.btn (image slider click to action button) away (or outside) the image slider container.

Adding the jQuery/javascripts Helpers

At your Blogger dashboard go to Layout > find Plug-ins widget at the very bottom of the screen. This is where we can include additional actions using jquery/javascripts to your store image slider without touching the existing template codes.

Adding more jquery here is part of web page best practices implemented on all BlogrCart themes to quickly display your store pages.

Now click the widget Edit link and copy/paste the codes below:-

<!-- Helper functions for image text animations -->
<script>
$(function(){
  // helper for 1st slider image
  $('.slick-active .slider-caption').addClass('animate');

  // slickjs call back adds & remove animations
  $('.slider-section').on('afterChange', function(event, slick, currentSlide){
      $('.slick-active .slider-caption').removeClass('no-animate');
      $('.slick-active .slider-caption').addClass('animate');
  });
  $('.slider-section').on('beforeChange', function(event, slick, currentSlide){
      $('.slick-active .slider-caption').removeClass('animate');
      $('.slick-active .slider-caption').addClass('no-animate');
  });
});
</script>
<!-- Helper functions for image text animations -->

Click Save to save widget > then click Save Template & you are al set.

Please keep all the comments as reference because if you are adventurous customizing this theme, there will be lots of these. So finding add on would be easier for your fine tuning later.

Refreshing your store will automatically display the text with the up and down transitions for the image slider title heading .slider-caption h3 & the click to action button .slider-caption a.btn

What does the Add on do?

The CSS handles how the timing to positioning actions for the image slider title heading & also the click to action button.

We added a class .animate & class .no-animate to begin/end the transitions for the specified elements. Changing the miliseconds respectively at /*timing before displayed */ & /* timing after displayed state */ adjust when your elements to be moved/shown during the image slider transitions.

While the jQuery/javascript add on is using a callback function that comes shipped with slickjs - the last image slider you need built by Ken Wheeler. You can safely add in additional customization to work to your requirements at anytime you wish.

The add on script is telling the responsive touch swipe image slider, if the image is about to display, add the class .animate to the text element container. While when the image is about to transit out, removes the class .animate & add the class .no-animate to the same container.

Now we hear a lot of ahhaaaaa's...

By adding our custom classes at specific image slider transition points, class.animate & .no-animate will be hooked hence the slow effects comes into action (via the new CSS codes we just entered above) for both our text elements .slider-caption h3 & the click to action button .slider-caption a.btn .

Play around with the timings & adjust the positioning (top/bottom/left/right) for before & after state for both example elements. It should be awesome & crazy!

We also added vendor prefixes so it will play nicely in most modern web browsers including mobile devices default browsers that comes pre-installed.

There are tonnes of customization made available that you can add using the same technique without harming your setup. You can animate the texts to different timings & positions according to the image it is displaying using the many callback provided with the image slider plug-in.

We have tested it & works like a charm. Tell us what your think?

Visit more Blogger e-commerce inspired templates here at sellfy.com/irsah to download & test our awesome templates for free.