Homepage slider height and arrows

Hello there,

Thank you for reaching out to us here.

Decrease the main slider’s height

1. Install and activate the TC Custom JavaScript plugin
2. Go To Appearance > Custom JavaScript
3. Paste the following code into the provided box

jQuery(function($) {
   function headerDecrease() {
      var slideHeight = $('#slideshow').height();
      var newHeight = slideHeight - 150; //Replace 150 with the value you want
      $('#slideshow').height(newHeight);
   }
   $(document).ready(headerDecrease);
   $(window).on('resize',headerDecrease);
});

4. Update

Add next/previous arrows

1. Edit the inc/slider.php file. Find this line of code:

<div id="slideshow" class="header-slider" data-speed="<?php echo esc_attr($speed); ?>">

2. Then insert the following code underneath it:

<nav class="slides-navigation">
  <a href="#" class="next"><i class="fa fa-angle-right"></i></a>
  <a href="#" class="prev"><i class="fa fa-angle-left"></i></a>
</nav>

So it will look like:

<div id="slideshow" class="header-slider" data-speed="<?php echo esc_attr($speed); ?>">

    <nav class="slides-navigation">
      <a href="#" class="next"><i class="fa fa-angle-right"></i></a>
      <a href="#" class="prev"><i class="fa fa-angle-left"></i></a>
    </nav>

3. Apply the following CSS code into Additional CSS option:

.slides-navigation {
  top: 50%;
  margin: 0 auto;
  position: absolute;
  z-index: 3;
  top: 46%;
  width: 100%;
}

.slides-navigation a {
  position: absolute;
  font-size: 40px;
  color: #fff;
}

.slides-navigation a.next {
  right: 15px;
}

.slides-navigation a.prev {
  left: 15px;
}

As you are editing the theme’s core file, you should take it at your own risk. The changes you have made there will be lost once the theme gets updated in the future. You should do adjustment/modification again.

Regards,
Kharis

Kharis,

Thanks so much for a quick reply.

Is there anyway to accomplish this without editing the core file?

Hello there,

Yes, there is a way to accomplish it in a child theme instead of editing the core code.

You have to copy the sydney_slider_template() function (starting from line 10 to 123) which resides in the inc/slider.php file to your child theme’s functions.php file. Then start editing from there.

If you haven’t yet created a child theme, you can use our premade Sydney child theme https://athemes.com/download/sydney-child-theme/.

Regards,
Kharis

Thanks, I will try it in my child’s theme.

For decrease the main slider’s height, it did not change…

Hello there,

If your site is being cached by a plugin like W3 Total Cache, you need to flush cache after adding that jQuery code. You also need to clear your web browser’s cache before reloading your site.

If none of which helps, please share the link to your site, so I can check what is going on.

Regards,
Kharis

Kharis,

I do not have any Cache plugin. I cleared web browser’s cache and it still doesn’t work. Is there anyway I can share my site privately?

Hello there,

Due to sharing an email address is restricted here on WP.org community support forum, I’d suggest you to continue the discussion on our support forum by opening a new topic https://athemes.com/forums/forum/sydney/#new-post. I’ll reply with how you can contact me privately then.

Regards,
Kharis

Thanks, Kharis. I just opened a new ticket on the link you provided.

I got it.

Thank you.