Titles and Sub titles video slider

Hi,
How can I add moving Titles and Sub titles and the CLICK TO BEGIN button to the video slider in Sydney Pro exactly like the ones in the FrontPage of your Sydney Free Demo http://demo.athemes.com/themes/?theme=Sydney
Thanks,

Hello Afia,

It looks like your issue requires some coding and testing, this goes beyond our support policy. It’s considered advanced customization.

As an option, you can contact Codeable for this kind of service, or find a freelancer on Upwork.

Kind Regards, Roman.

Hello there,

To accomplish it, try doing the following 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($) {

   'use strict'
    
   if( $('.video-container').length > 0 ){

    var mainTitle = 'Maintitle';
    var subTitle = 'Subtitle';
    var buttonURL = '#';
    var buttonText = 'Click Me';
    
    var videoCaption = '<div class="video-caption"><div class="slide-inner"><div class="text-slider"><h2 class="maintitle">'+mainTitle+'</h2><p class="subtitle">'+subTitle+'</p></div><a class="roll-button button-slider" href="'+buttonURL+'">'+buttonText+'</a></div></div>';

    $('.video-container').append(videoCaption);
    
   }

})(jQuery);

  1. Update

To manage its styling, apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css.

.video-container{
  position: relative;
}

.video-caption{
  width: 100%;
  height: 100%;  
  position: absolute; 
  top:0; 
  left:0; 
}

.video-caption .slide-inner{
  display: block !important;
  width: 100% !important;
}

@media only screen and (max-width:500px){
  
  .video-caption .slide-inner{
    -webkit-transform: translateY(-30%);
    -moz-transform: translateY(-30%);
    -ms-transform: translateY(-30%);
    -o-transform: translateY(-30%);
    transform: translateY(-30%);    
  }  
  
}

Regards,
Kharis

Hi Kharis,
Thank you for the codes however I was hoping to get the animation effect in the titles (main and subtitles) with 2 or 3 main titles coming and a clickable “click to begin button” at the bottom. Exactly, like how you have on the Sydney Free version for the slider http://demo.athemes.com/sydney/
Also if you could please specify where do I add the link so that clickable button works.

I want to get an effect like this https://demo.mageewp.com/onetone/.

I also wanted to have a control button at the bottom of the video on Sydney Pro, just like in onetone theme. Could that be possible ?

Here is the link to my website http://client123.website/

Also my menu is messed up. I can’t seem to find the front page items to add them to the menu. For example Services, Testimonial, Employees etc.

Thank you,

Hi Afia,

Please replace the jQuery code I suggested on step 3 above with this one:


;(function($) {

   'use strict'
    
   if( $('.video-container').length > 0 ){

      // Slide 1 content
      var mainTitle1 = 'ADVANSIS VIRTUAL';
      var subTitle1 = 'connect. grow. prosper';

      // Slide 2 content
      var mainTitle2 = 'ADVANSIS VIRTUAL 2';
      var subTitle2 = 'connect. grow. prosper 2';

      // Slide 3 content
      var mainTitle3 = 'ADVANSIS VIRTUAL 3';
      var subTitle3 = 'connect. grow. prosper 3';

      // Button
      var buttonURL = '#'; 
      var buttonText = 'CALL NOW';

      var videoCaption = '<div class="video-caption"><div id="slideshow" class="header-slider" data-speed="4000"><div class="slides-container">';

          videoCaption += '<div class="slide-item">';
          videoCaption += '<div class="slide-inner"><div class="contain animated fadeInRightBig text-slider"><h2 class="maintitle">'+mainTitle1+'</h2><p class="subtitle">'+subTitle1+'</p></div><a class="roll-button button-slider" href="'+buttonURL+'">'+buttonText+'</a></div>'
          videoCaption += '</div>';

          videoCaption += '<div class="slide-item">';
          videoCaption += '<div class="slide-inner"><div class="contain animated fadeInRightBig text-slider"><h2 class="maintitle">'+mainTitle2+'</h2><p class="subtitle">'+subTitle2+'</p></div><a class="roll-button button-slider" href="'+buttonURL+'">'+buttonText+'</a></div>'
          videoCaption += '</div>';    

          videoCaption += '<div class="slide-item">';
          videoCaption += '<div class="slide-inner"><div class="contain animated fadeInRightBig text-slider"><h2 class="maintitle">'+mainTitle3+'</h2><p class="subtitle">'+subTitle3+'</p></div><a class="roll-button button-slider" href="'+buttonURL+'">'+buttonText+'</a></div>'
          videoCaption += '</div>';  
          
          videoCaption += '</div></div></div>';

      $('.video-container').append(videoCaption);    

    }

})(jQuery);      

The button link value can be defined on this line:


var buttonURL = '#';

Replace # with any URL of your choice.

Regards,
Kharis

Hi Kharis,
Thank you again, is there a way to add a control button at the bottom of the video on Sydney Pro, just like in onetone theme to mute or unmute the music?
See the mute button on bottom left side of the demo theme https://demo.mageewp.com/onetone/.

Also my menu is messed up, I can’t seem to find the front page items Service, Employees, Contact Us etc. I want to get the same effect as the Sydney Pro and Sydney Free FrontPage menu. So that if I click on one of the menu items like Services it takes me to the Services part of the front page – see demos
http://demo.athemes.com/themes/?theme=Sydney%20Pro

Here is the link to my website http://client123.website/

Thank you,