How to implement jquery slick slider plugin in wordpress?

Hello again, here we are explaining a little how this is going for the slick slider in wordpress, the only indispensable requirement for the correct functioning of the plugin would be to have access to the installation of the wordpress or FTP connection.

First

Download the necessary files for the plugin installation that will make your life easier by downloading them from the following link: Download Slick Slider.

Second

Locate the installation of our wordpress theme that is normally in the following path: / wp-content / themes / your-theme / Then very carefully locate the folder “js or script” one of the two .js files, the one you prefer one of them is the minified version.

You also locate the css folder, where your theme stores the styles and paste these two files there, slick.css and slick-theme.css. The latter in particular is for the styles of the slider but you want to customize it, omit uploading it and from the css of your theme appearance> theme editor, select the style file that ends in .css and edit the slider there to your liking (with the classes corresponding clear).

Continuing with the installation, it only remains to call the files that we have just uploaded from our functions.php, there we will put the following lines:

wp_enqueue_style( 'slick-css', get_template_directory_uri() . '/dist/css/slick.css' );
wp_enqueue_script ('slick-js', get_template_directory_uri() . '/dist/js/slick.min.js', array('jquery'), '', true);

If you can’t find the file from FTP, you can also find it here from your wordpress: appearance> theme editor. Now from your wordpress following the same line appearance> theme editor> you locate the default .js file of the theme or somewhere where you can add JS code and inside you write the following code:

$('.slider-prueba').slick({        
infinite: true,        
speed: 300,        
slidesToScroll: 1,        
slidesToShow: 1,        
arrows: false,        
dots: true,        
autoplay: true,        
autoplaySpeed: 3500,    
});

Then we will do the following; we go to the page that we want to make the slider. We are looking for the classic block.

From the classic block we add all the images we want.

Then we go to the three dots in the upper left corner and click on “Edit as HTML”

Then after the label we add a with our class without forgetting to close it before the closing of the We will get this notice we give it to convert to HTML and ready our slick slider in wordpress is finished !!

Obviously if you have a custom theme it will be much easier, because it would be done with templates for the theme and custom fields. But since most use pre-designed templates this is your best option also because it is much lighter. If you have any questions, don’t hesitate to write to me. Bye!

Comparte para enseñar a otros

Leave a Reply

Your email address will not be published. Required fields are marked *

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