Arrows and Bullets for Header Fullscreen Slider

I like the fullscreen Header-Slider in the header area, is there a easy way to integrate arrows and bullets ?

Thanks

Hello there,

Thank you for getting in touch here. In order to achieve that objective, try to follow this tutorial.

Regards,
Kharis

Hi Kharis,

thanks a lot.

Also untouchable slider function, only bullets to click ?

Regards

Hello there,

Unfortunately there is no way to enable touch event. You could use arrow navigation instead. Try to edit the inc/slider.php file. Find this line of code:


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

then insert the following code underneath it. 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>

Then apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css.

.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

thanks a lot

Best regards

You are always welcome here. :slight_smile:

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Have a nice day/night!

Regards,
Kharis

Hello, Slider navigation is working fine but text title and subtitle is not change by the slide…please guide me as soon as possible…thanks in advance…

Hello, sorry but it doesn’t work for me. Web www.vyzivne.com

Thanks
Best Regards
Jaromir

Hello Jeromir,

Please share your final code in inc/slider.php file, so I can inspect what goes wrong in there. Use gist service to host the code and share its link here.

Regards,
Kharis

Thanks https://gist.github.com/jmindl/ddd69e07a1e69449e29e26ae5b94fa37

Thank you for sharing. The code seems correct. Now please try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    .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: #d65050;
    }

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

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

Regards,
Kharis

Absolutely great. Thanks a lot.
One more question how difficult would be to dd also bullets on the bottom of the slide header?

Thanks

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($) {

       'use strict'
       
       if ( $( ".sydney-hero-area #slideshow" ).length ) {
         $('.sydney-hero-area #slideshow').superslides({
           play: $('.sydney-hero-area #slideshow').data('speed'),
           animation: 'fade',
           pagination: true,
         });
       }


    })(jQuery);
  1. Update
  2. Then add the below extra custom CSS code to Additional CSS:
    .slides-pagination {
      display: block;
      width: 100%;
      position: absolute;
      bottom: 5px;
      left: 0;
      text-align: center;
      z-index: 10;
    }

    .slides-pagination a {
      text-indent: -9999px;
      display: inline-block;
      width: 10px;
      height: 10px;
      margin-left: 3px;
      margin-right: 3px;
      background-color: #fff000;
      border-radius: 100%;
    }

    .slides-pagination a:hover,
    .slides-pagination a.current {
      background-color: #ff0000;
    }

Regards,
Kharis

You are the briliant. :nose::+1::+1:

Hi Kharis,

You pointed me here from another entry. The bullets have worked but I can’t get navigation working using either process - slider.php or main.js

Can you help me to get the navigation shown. If I have to choose, I would prefer navigation rather than bullets. If I can have both then all good.

Thanks

Hello there,

Have your added this as mentioned in my previous reply?

    <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>

Please share a link to your site to let me inspect it. Maybe some CSS code in other area prevents this to show.

Regards,
Kharis

Hi Kharis,
I duplicated slider.php to my child theme and added that code there

The site is www.universe.school

Hello there,

It looks like the changes in your child theme can’t be loaded. Probably it should be corrected a little bit. For efficiency reason, would me allow me to access your site admin area to edit the slider.php file over there? Send the working login credentials to my email at kharisblank@gmail.com. Mention the link to this topic in your email body to signal its a followup from this forum reply.

Regards,
Kharis

Hey, is there any possibility to get some insights? I’m having the same issue as I just posted here Once again - Navigation arrows at sydney header slider

Thanks very much.
René

Hi René,

If could get of what you’d like to achieve on the bullets navigation, it would be CSS code solution for you:

    .sydney-hero-area .header-slider .slides-pagination {
      display: block;
      width: 100%;
      position: absolute;
      bottom: 10px;
      text-align: center;
    }

Add it to Appearance > Customize > Additional CSS from dashboard.

Stay safe.
Have an excellent day :slight_smile:

Regards,
Kharis
aThemes Support