Adding more slides to Frontpage Slider

Dear Csaba, I couldn’t get the 6. slide work (and I need minimum 8) on http://markaled.com/.
Besides, i need left and right arrows and nav dots on the lower edge of the slider.
Can I add a video to this same slider of photos?
Thank you in advance,

  • Pelin

I still did not get any response. I am in urgent need of it.

Hi Csaba,

You told me that I should start this topic on Sydney Pro, which I did. It’s been 6 days already. Why don’t I get any response? I am losing a lot of time. My client has been waiting for me that I finish up these revisions.
Plus, I could not update to Sydney Pro 2, either. The conflict starts at file naming already.

Please, help ASAP!

Pelin

Hello there,

I would like to apologize in advance for the long delay. I am working on it and will back to you shortly.

Regards,
Kharis

Hello there,

To add extra slide items you can use jQuery code solution. Try doing these 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($){

      $.fn.addHeaderSlider=function(e){var i=$.extend({imageUrl:"",mainTitle:"",subTitle:""},e),t=$(".header-slider .slide-item:nth-of-type(1) .button-slider").attr("href"),l=$(".header-slider .slide-item:nth-of-type(1) .button-slider").text(),s='<div class="slide-item" style="background-image:url(\''+i.imageUrl+"')\">";s+='<img class="mobile-slide preserve" src="'+i.imageUrl+'" />',s+='<div class="slide-inner custom-slide-inner"><div class="contain animated fadeInRightBig text-slider">',s+='<h2 class="maintitle">'+i.mainTitle+"</h2>",s+='<p class="subtitle">'+i.subTitle+"</p>",s+='</div><a href="'+t+'" class="roll-button button-slider">'+l+"</a></div>",s+="</div>",""!=i.imageUrl&&this.find(".slides-container").append(s)};


      /* Additional slide items */

      // Additional slide 1
      $('.header-slider').addHeaderSlider({
        imageUrl: 'http://yoursite.com/wp-content/uploads/path/to/slide-image-6.jpg',
        mainTitle: 'Main title of slide 6',
        subTitle: 'Subtitle of slide 6'
      });

      // Additional slide 2
      $('.header-slider').addHeaderSlider({
        imageUrl: 'http://yoursite.com/wp-content/uploads/path/to/slide-image-7.jpg',
        mainTitle: 'Main title of slide 7',
        subTitle: 'Subtitle of slide 7'
      });

      // Additional slide 3
      $('.header-slider').addHeaderSlider({
        imageUrl: 'http://yoursite.com/wp-content/uploads/path/to/slide-image-8.jpg',
        mainTitle: 'Main title of slide 8',
        subTitle: 'Subtitle of slide 8'
      });

      /* Additional slide items ends */

    })(jQuery);

Define your new slide items with this code block:

    // Additional slide 1
    $('.header-slider').addHeaderSlider({
      imageUrl: 'http://yoursite.com/wp-content/uploads/path/to/slide-image-6.jpg',
      mainTitle: 'Main title of slide 6',
      subTitle: 'Subtitle of slide 6'
    });

Adjust the imageUrl value to the valid image path.

4 . Update

If you’ve enabled site caching, you should flush it before reloading your site, as cache often stops new code addition from taking effect.

Regards,
Kharis