How to Create an Image Slider Without a Plugin

Photo By Icons8 Team on Unsplash

In this tutorial, Mangcoding will share with you how to create your own WordPress image slider easily without overloading your website with multiple plugins.

If you are using the Gutenberg editor or Full Site Editing in WordPress, a better way to create an image slider might be by building a block. However, in this tutorial, we will only use an external JavaScript carousel library.

The main question you should ask yourself is: how many sliders will be on your website? If there is only one image slider on the homepage, you can use site options for slider settings.

If you plan to display multiple images in a slider on the homepage, there are some custom fields you need to work on.

Mangcoding recommends working with options since they integrate well with Gutenberg, and for pages, it may be better to use some kind of slider block (pagination).

To create a neat options page, Mangcoding will share two methods: using an options page and using gallery fields directly.

Let’s start by adding this simple code to the functions.php file.

add_filter('simple_register_option_pages', function($option_pages) {
    $option_pages[] = array(
        'id' => 'slider_settings',
        'title' => 'Slider Settings',
        'menu_name' => 'Slider',
        'fields' => array(
            array(
                'id' => 'my_slider',
                'label' => 'Slider Images',
                'type' => 'gallery',
            )
        ),
    );
    return $option_pages;
});

And as a result, we have a settings page like the one below, where we can not only add images but also change their order.

Image Size

Have you uploaded the images? There is a specific slider image size that needs to be set to make it look good and appealing. The slide images are 940×198 in size, so we will add the following line of code to the functions.php file :

add_image_size( 'mishaslidersize', 940, 198, true );

Now you can upload images. If you have already uploaded them and cannot re-upload due to certain reasons, I recommend using the AJAX Thumbnail Rebuild plugin to regenerate their sizes.

Once you have configured the slider settings, you can add it to your website pages. Before doing anything, you need to decide which type of JavaScript to use.

There are many options available, and some of them use jQuery. Below is a list of slider/carousel libraries that we use and recommend at Mangcoding :

• Swiper
• Slick (jQuery)
• OwnCarousel (jQuery)

All of these are excellent and, of course, responsive.

Now, we will use jQuery because there is one important aspect to keep in mind that we will show you.

Enqueueing JavaScript and CSS Assets

Let’s start with this code.

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_style(
        'slickstyle',
        '//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css',
        false,
        null
    );


    wp_enqueue_script(
        'slickscript',
        '//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js',
        array('jquery'),
        null,
        true
    );
});

The most important thing to consider here is that if you are using a jQuery-based slider (pagination), you must add the jQuery library as a dependency in the wp_enqueue_script() function. This ensures that it works properly, regardless of whether your WordPress theme already includes jQuery or not.

You can also add a separate custom JS file where you initialize the slider (pagination), but this is optional. You can still do it in the website footer using the wp_footer hook.

Displaying the Slider

One of WordPress’s default themes, Twenty Ten, has a nice header image. So, we will create and utilize the slider for it.

We will add the following code to the theme’s header.php. Specifically, we will replace the original code that is responsible for displaying the header image.

$image_ids = get_option('my_slider');


if ($image_ids) {
    echo '<div id="misha_slider">';


    foreach ($image_ids as $image_id) {
        echo wp_get_attachment_image($image_id, 'mishaslidersize');
    }


    echo '</div>';
}

And we also need to initialize the slider. As we mentioned earlier, you can do this using the wp_footer action hook.

jQuery( function( $ ) { $('#misha_slider').slick({ autoplay: true, autoplaySpeed: 1000, arrows: false }); } );

And this is the result.

That’s the explanation of How to Create an Image Slider Without a Plugin that Mangcoding can share. Hopefully, this article is useful and provides new insights for you. If you have constructive feedback or suggestions, feel free to leave a comment or contact us via email and Mangcoding’s social media.

Sumber : Rudrastyh