[Resolved] Hide Flexslider directionals/arrows when only featured image is present

[Author]

Posts

[Charles]

Nigel,

I have successfully added flexslider to my view and it shows great for posts with more than just the featured image. However, for posts that only have a featured image, the flexslider directionals are still present and when clicked they show a blank slider. Is there a way to "hide" the arrows for when only the featured image is available and no additional images are present for the post?

Thanks,
Chuck

[Minesh]

Hello. Thank you for contacting the Toolset support.

Well - you can use simple CSS or jQuery to remove the arrow buttons.

For example - if slider has only one li - remove arrow buttons using jQuery remove button.

You may try to use following code, add to - that should work, you can adjust the code as per your need, if needed 🙂

jQuery(document).ready(function($){

if ($('ul.slides li.flex-active-slide').length == 1){
$('ul.flex-direction-nav li').remove();
}

});

[Charles]

Minesh,

Thanks. I tried a few variations of your JQuery, but nothing worked.

Here is my flexslider CSS:

/* 
FLEXSLIDER 
*/
.flexslider {
  border: none;
  margin-bottom: 2%}

.fleximgs {
  height:auto;
  display:block;
  object-fit: scale-down !important;
  vertical-align: middle !important;
  margin: auto !important}

.loading {
  display:block;
  margin: auto;
  padding-top: 20%;
  padding-bottom: 20%}

.flex-direction-nav a {
  background-color: rgba(34, 34, 34, 0.5) !important;
  font-size: 0;
  height: 50px;
  line-height: 50px;
  margin-top: -25px;
  opacity: .5;
  top: 50%;
  width: 50px;}

.flex-direction-nav .flex-next {
  text-align:center;}

.flex-direction-nav a::before {
  color: rgb(255, 255, 255);
  font-size: 32px;
  margin-left: 6px;
  margin-top: 2px;}

.flex-direction-nav a.flex-prev{
	left:0;}

.flex-direction-nav a.flex-next {
  left: auto;
  right: 0;}

.flexslider:hover .flex-direction-nav .flex-prev {
  left: 0;
  opacity: 1;}

.flexslider:hover .flex-direction-nav .flex-next {
  left: auto;
  right:0;
  opacity: 1;}

.flex-direction-nav a.flex-prev::before {
  margin-left: 0;}

Thanks,
Chuck

[Minesh]

Well - rather to write too much CSS, have you tried the jQuery code I've shared? Does that work?

If not, I need problem URL.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I would additionally need your permission to de- and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important. If you agree to this, please use the form fields I have enabled below to provide temporary access details (wp-admin and FTP).

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Could you please share problem URL where you like to remove the next navigation link.

[Charles]

The home page has multiple posts with one image.

Third post: "Visol Donovan White Ceramic Cigar Ashtray"

Seventh post: "Custom Monogram Engraved 7 oz Flask Funnel Cigar Cutter Lighter Stainless Steel Gift Box Set Personalized"

[Minesh]

I've added following jQuery code to your 'Main Post View' content template "Loop item in Main Post View"' JS box:

jQuery('.flexslider').each(function(index){
    
  		  if (jQuery(this).find('ul.slides li').is(':empty')) {
     			  jQuery(this).find('ul.slides li:empty').remove();
  			    jQuery(this).find('.flex-direction-nav').remove();
      
  		  }
   });

Now, it will remove the empty li as well as remove the pagination arrow where only one image is available with slider.

[Charles]

Thanks. The arrow is removed, but I'm still able to swipe to an empty slide. Not sure if this can be disabled?

Thanks,
Chuck

[Minesh]

Well - I do not see any navigation arrow here:
=> hidden link

Where you able to navigate please - could you please tell me.

[Charles]

Yes, even though there are no errors displayed, I was able to navigate to an empty slide using my laptop touchscreen and mobile device.

[Minesh]

Ok I've added the code to your view's content template JS box as given under:

jQuery(window).load(function() {
  jQuery('.flexslider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    touch: jQuery('.flexslider ul.slides li:empty').remove().length > 1,
    start: function() {
          jQuery('.flexslider').find('.loading').hide();
      
       jQuery('.flexslider').each(function(index){
         
        jQuery(this).find('ul.slides li:empty').remove();
        
     	  if (jQuery(this).find('ul.slides li').length == 1) {
               	 jQuery(this).find('ul.slides li:empty').remove();
  			    jQuery(this).find('.flex-direction-nav').remove();
           }
});
      
 
    }  
  });

 });

The game changer line here is:

    touch: jQuery('.flexslider ul.slides li:empty').remove().length > 1,

Could you please confirm it works as expected on your mobile version as well.

[Charles]

Indeed, that was the ticket!

Thank you,
Chuck

[Minesh]

Sorry - you said:

Indeed, that was the ticket!

Is it resolved? could you please confirm. 🙂

[Charles]

Yes, it worked. Thanks!