Create WordPress Slider Without Javascript

CSS without javascript is created by codeconvey.com which I migrated to the WordPress Plugin. This is a request from one of the my visitors who has difficulty displaying the CSS slider library into the WordPress CMS site. Follow the short tutorial below

Creating CSS Sliders Without Javascript

This library is created using only CSS3 and HTML5. The advantage of using the slider plugin is lightweight and has a good animation display.

Here is a piece of the CSS slider code that I took from the official site codeconvey.com

There is 1 main CSS file that is used so that the slider can run normally, namely component.css

component.css

To try the slider, please use the following HTML code snippet

If run on your browser, the CSS slider result like the following gif image below:

Slider Gallery With Pure Css3 And Html5

You can download the complete project on http://codeconvey.com/pure-css-image-slider

How? Cool and easy right? the question is, how can the script above run on the WordPress CMS? I will share the code to make the CSS slider plugin working normally on your WordPress.

Migrate the CSS Slider Library to the WordPress Plugin

  1. Download the css slider source code in http://codeconvey.com/pure-css-image-slider.
  2. Create a folder called css-slider.
  3. Create a file named css-slider.php in the css-slider folder.
  4. Copy and paste the component.css file into the css-slider folder.
  5. Copy the images folder on the original source into the css-slider folder.
  6. Change the bit of code in component.css so the next and prev navigation image can display properly like the following code snippet

Copy the following code in the css-slider.php file

How to use the css-slider plugin on WordPress

  1. compress the css-slider folder into zip format.
  2. Install on your WordPress site.
  3. Put the following code to display the slider on the WordPress page, usually placed these code in the index.php file under <body>.

The results are as follows

Wordpress Slider Plugin Without Javascript

Noteworthy in the query_posts section, you can change it as needed.

Read another article : Create a Responsive Jquery Slideshow With Flexslider for WordPress

Download the full source code at the following link

That’s a short tutorial on how to make WordPress sliders without javascript.

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

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