Introduction

The i.e Slick Slider is a popular and customizable jQuery carousel/slider used for creating responsive and flexible sliders on websites. If you want to change the number of slides in a slider, it typically involves adjusting the configuration options that need to change, i.e. slidesToShow: { value } in its Java script. So, in this article, we will teach you how to change the jQuery value to change the number of sliders for any slider via the customizer in WordPress without using plugins. 

Step 1. Create theme mod

First create a theme mod such as ” slider_post_no ” in a customizer.php. Example of code is given below.

  $wp_customize->add_setting(
        'slider_post_no',
        array(
        'default'           => 3,
        'sanitize_callback' => 'absint',
        )
    );
    
    $wp_customize->add_control(
        'slider_post_no',
        array(
        'section'     => 'your_own_section',
        'label'       => __('Enter the number of post that need to slide', 'context-blog'),
        'type'        => 'number',
        )       
    );

Step 2. Add html tag to accept Jquery value.

Add an HTML tag somewhere in the HTML portion of your theme. Below HTML code receives the request to change the value, such as a number post, to show at the slider in one time. This HTML tag is hidden; hence, it will not show up on your site. Please configure theme_mod as ‘slider_post_no’ also.

<input type="hidden" id="value_jquery" value='<?php get_theme_mod('slider_post_no'); ?>' >

Step 3. Add parameter at Js script of corresponding slider to change number of slider

Add the following parameter in jQuery for your slider. Now suppose, for example, that if you want to display two posts at once in your slider, then you need to pass such a request to the parameter slidesToShow as given below. Here, the statement #value_jquery must meet the same criteria as given in step 2, i.e. id=”value_jquery.”

jQuery('.thumb-block').slick(
            {
                dots: false,
                infinite: true,
                arrows: true,
                speed: 500,
                slidesToShow: jQuery("#value_jquery").val(),
                autoplay: true,
                slidesToScroll: 1,
                fade: false,
                swipeToSlide: true,
         
            }
        );

Conclusion:-

If you are able to implement above codes in your theme, you will definitely change the jQuery value to change the number of sliders for any slider via the customizer in WordPress without using any plugins. If need support then you can contact us. We will here to support you. Meanwhile you can see some of our cool free themes here.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Share via
Copy link