# Remove click event slider

**URL:** https://colorlibsupport.com/t/remove-click-event-slider/7657
**Category:** Sparkling
**Created:** [July 3, 2015, 2:41pm UTC](https://colorlibsupport.com/t/remove-click-event-slider/7657 "2015-07-03T14:41:35Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![bluecastle](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/b/bbe5ce/32.png) [@bluecastle](https://colorlibsupport.com/u/bluecastle)
#### Post date: [July 3, 2015, 2:41pm UTC](https://colorlibsupport.com/t/remove-click-event-slider/7657/1 "2015-07-03T14:41:35Z")

</div>

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

---

<div class="post-metadata">

### Author: ![movin](https://colorlibsupport.com/user_avatar/colorlibsupport.com/movin/32/10922_2.png) [@movin](https://colorlibsupport.com/u/movin)
#### Post date: [August 10, 2015, 3:45pm UTC](https://colorlibsupport.com/t/remove-click-event-slider/7657/2 "2015-08-10T15:45:31Z")

</div>

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

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

```

Best Regards,  
[Movin](https://colorlib.com/)

---

<div class="post-metadata">

### Author: ![ollx](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/o/8e7dd6/32.png) [@ollx](https://colorlibsupport.com/u/ollx)
#### Post date: [August 11, 2015, 2:12pm UTC](https://colorlibsupport.com/t/remove-click-event-slider/7657/3 "2015-08-11T14:12:46Z")

</div>

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

---

<div class="post-metadata">

### Author: ![movin](https://colorlibsupport.com/user_avatar/colorlibsupport.com/movin/32/10922_2.png) [@movin](https://colorlibsupport.com/u/movin)
#### Post date: [August 11, 2015, 2:56pm UTC](https://colorlibsupport.com/t/remove-click-event-slider/7657/4 "2015-08-11T14:56:59Z")

</div>

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](https://codex.wordpress.org/Child_Themes).

```auto

/**
 * 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](https://colorlib.com/)

---

<div class="post-metadata">

### Author: ![ollx](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/o/8e7dd6/32.png) [@ollx](https://colorlibsupport.com/u/ollx)
#### Post date: [August 11, 2015, 8:53pm UTC](https://colorlibsupport.com/t/remove-click-event-slider/7657/5 "2015-08-11T20:53:59Z")

</div>

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

---

<div class="post-metadata">

### Author: ![bluecastle](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/b/bbe5ce/32.png) [@bluecastle](https://colorlibsupport.com/u/bluecastle)
#### Post date: [August 12, 2015, 7:35am UTC](https://colorlibsupport.com/t/remove-click-event-slider/7657/6 "2015-08-12T07:35:49Z")

</div>

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

---

<div class="post-metadata">

### Author: ![movin](https://colorlibsupport.com/user_avatar/colorlibsupport.com/movin/32/10922_2.png) [@movin](https://colorlibsupport.com/u/movin)
#### Post date: [August 14, 2015, 9:33am UTC](https://colorlibsupport.com/t/remove-click-event-slider/7657/7 "2015-08-14T09:33:54Z")

</div>

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](https://colorlib.com/)

---

<div class="post-metadata">

### Author: ![movin](https://colorlibsupport.com/user_avatar/colorlibsupport.com/movin/32/10922_2.png) [@movin](https://colorlibsupport.com/u/movin)
#### Post date: [August 14, 2015, 9:36am UTC](https://colorlibsupport.com/t/remove-click-event-slider/7657/8 "2015-08-14T09:36:41Z")

</div>

Hi Bluecastle,

> I added the function sparkling\_featured\_slider() to extras.php. And it works.

Glad it worked fine for you 🙂

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](https://colorlibsupport.com/t/remove-click-event-slider/#post-27323)

Cheers,  
[Movin](https://colorlib.com/)
