Adding a translation to header slide

Hello, I am building a website for a client and he wants the header slide to have a transition just like the website https://www.eatthb.com. The website I am building is iwantbagelbrunch.com. Any css code that can help me do this?

Hello there,

If I got what you’ve written correctly, so you’d like to slower fading slide animation? Is that correct?

Regards,
Kharis

Hi Kharis,

Yea, so if you visit this link www.eatthb.com just look at the slideshow
and see how the fade is.
If we can accomplish that with some css code that would be awesome. Let me
know if you need
any more additional explanation.

Thank you

Hello there,

Please try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
;(function($) {

  (function() {
    if ( $( "#slideshow.header-slider" ).length ) {
      $('#slideshow.header-slider').superslides({
        play: $('#slideshow.header-slider').data('speed'),
        animation: 'fade',
        animation_speed: 3000, // Animation speed
        pagination: false,
      });
    }
  })();

})(jQuery);

Set the speed of animation speed transition in animation_speed line:

  1. Update

Regards,
Kharis

is there any possiblity to change the animation effects of slider

Hello there,

That might be possible. However it might require some extra custom coding. If it’s not quite complex and take few minutes, probably we could help. What’s the final animation you’d like to achieve? Any link of example to share here?

Regards,
Kharis

simple slide effect instead of fade is enough…i just found

animation: ‘fade’

in main.js file and tried to change it as

animation: ‘slide’

but its not working

is it possible to adding sliding image instead of fade effect

the main.js file isn’t loaded in the front end. This is file is only a readable code for study purpose. The one which’s loaded is minified version main.min.js.

Try doing the below steps, please.

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    ;(function($) {

      (function() {
        if ( $( "#slideshow.header-slider" ).length ) {
          $('#slideshow.header-slider').superslides({
            play: $('#slideshow').data('speed'),
            animation: 'slide', // slide
            pagination: false,
          });
        }
      })();

    })(jQuery);
  1. Update

Regards,
Kharis