Remove click event slider

Sparkling
#1

Hello

I would like to use the slider without the click event, directing to the post.
Could this be done? perhaps by adjusting the responsible Php file?

Kind regards, Bluecastle

#2

Hi Bluecastle,

I hope you are well today and thank you for your question.

You can achieve this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Apperance -> Theme Options -> Other -> Custom CSS

.flexslider ul.flex-direction-nav {
  display: none;
}

Best Regards,
Movin

#3

Hi, movin,
The display: none won’t disable the click on the image which redirects to the original post.

To disable the image’s click:
In the child theme

Sep 1. Copy inc/js/dev/functions.js from the parent theme to the child theme as inc/js/functions.js

I found the un-minified version of functions.js is in the inc/js/dev directory.

Step 2: Add the following jquery code to the child theme’s functions.js

jQuery(document).ready(function($) {
$( ‘.flexslider .slides li a’ ).click(function(){
return false;
});
});

Step 3: Update the child theme’s functions.php to include the updated functions.js

Inside function sparkling_enqueue_styles(), add the following two lines of code

wp_dequeue_script( ‘sparkling-functions’ );
wp_enqueue_script( ‘sp-functions’, get_stylesheet_directory_uri() . ‘/inc/js/functions.js’, array(‘jquery’) );

Step 4: To change the cursor, add the following css rule to the child theme’s styles.css

.flexslider .slides li a {
cursor: default;
}

#4

Hi @ollx,

I thought @bluecastle wants to disable slider navigation that navigates posts next & previous and only wants to slide it automatically which can be achieved by using the CSS code that i have shared in my previous reply.

I think i misunderstood it and @bluecastle wants to disable slider click event that directs user to the single post page.

If this is the case then he can achieve this easily by adding the following code in the functions.php file of Sparkling child theme.


/**
 * Featured image slider, displayed on front page for static page and blog
 */
function sparkling_featured_slider() {
  if ( is_front_page() && of_get_option( 'sparkling_slider_checkbox' ) == 1 ) {
    echo '<div class="flexslider">';
      echo '<ul class="slides">';

        $count = of_get_option( 'sparkling_slide_number' );
        $slidecat =of_get_option( 'sparkling_slide_categories' );

        $query = new WP_Query( array( 'cat' =>$slidecat,'posts_per_page' =>$count ) );
        if ($query->have_posts()) :
          while ($query->have_posts()) : $query->the_post();

          echo '<li><a href="#">';
            if ( (function_exists( 'has_post_thumbnail' )) && ( has_post_thumbnail() ) ) :
              echo get_the_post_thumbnail();
            endif;

              echo '<div class="flex-caption">';
                  if ( get_the_title() != '' ) echo '<h2 class="entry-title">'. get_the_title().'</h2>';
                  if ( get_the_excerpt() != '' ) echo '<div class="excerpt">' . get_the_excerpt() .'</div>';
              echo '</div>';

              endwhile;
            endif;

          echo '</a></li>';
      echo '</ul>';
    echo ' </div>';
  }
}

I have attached the Sparkling child theme to this reply that contains the above code so you can just download and use it to achieve it.

Cheers,
Movin

#5

Hi, Movin,

That’s what I did first: overriding the sparking_featured_slider() in the child theme. But, there was an undesirable side effect.

When I clicked on the image, the image’s opacity would be changed, i.e. the image became dimmed until I clicked on the image again. Being not familiar with flex slider, I couldn’t figure out why. Using jQuery to disable the click event does not have this side effect. The only thing left was to change the shape of the cursor.

BTW, there is a bug in the original sparking_featured_slider() code:
echo '</a></li>';
should be inside the while loop.

Best regards.

ollx

#6

Thank you for replying my message.
It was my intention to use the slider only to display a static image.

I added the function sparkling_featured_slider() to extras.php. And it works.

Thank you!

Kind regards Bluecastle

#7

Hi @ollx,

That’s what I did first: overriding the sparking_featured_slider() in the child theme. But, there was an undesirable side effect.

When I clicked on the image, the image’s opacity would be changed, i.e. the image became dimmed until I clicked on the image again.

I have tested it on my test site but didn’t face any such issue. It’s working fine for me.

Is it browser specific issue?

Which browser are you using? Have you tested it on another browser?

Could you please share your site URL where you are having this issue so that i can troubleshoot it?

BTW, there is a bug in the original sparking_featured_slider() code: echo ''; should be inside the while loop.
Yes i could confirm this on my test site and notified the theme developer to fix it.

The issue will be fixed in the future release of the theme. Currently we are not facing any output issue with it as the modern browsers are automatically closing the anchor and list tags.

Regards,
Movin

#8

Hi Bluecastle,

I added the function sparkling_featured_slider() to extras.php. And it works.

Glad it worked fine for you :slight_smile:

Instead of adding it in the extras.php file, please add it in the functions.php file of your child theme as described in my following reply because if you make changes in the Sparkling theme file then you have to make these changes again after theme updation as changes made in the theme file get lost on theme updation.

https://colorlibsupport.com/t/remove-click-event-slider/#post-27323

Cheers,
Movin