CSS Image Slider Installation Guide

Thank you for purchasing the 7th Circle Designs CSS Image Slider plugin! This guide will walk you through the installation process and help you get started creating your first slider.

System Requirements

  • WordPress 6.0 or higher
  • PHP 8.0 or higher
  • Any modern WordPress theme

Installation Process

Method 1: Direct Upload (Recommended)

  1. Download the Plugin
  • Log in to your 7th Circle Designs account
  • Navigate to “My Downloads” or “Purchases”
  • Download the .zip file of the CSS Image Slider plugin
  1. Install via WordPress Admin
  • Log in to your WordPress admin dashboard
  • Go to Plugins → Add New
  • Click the Upload Plugin button at the top of the page
  • Choose the downloaded .zip file and click Install Now
  • After installation completes, click Activate Plugin

Method 2: FTP Installation

  1. Download and Extract the Plugin
  • Download the plugin .zip file from your 7th Circle Designs account
  • Extract the .zip file to your local computer
  1. Upload via FTP
  • Connect to your website using an FTP client
  • Navigate to the /wp-content/plugins/ directory
  • Upload the extracted 7thcircle-css-slider folder to this directory
  1. Activate the Plugin
  • Log in to your WordPress admin dashboard
  • Go to Plugins
  • Find “7th Circle Designs CSS Image Slider” in the list
  • Click Activate

License Activation

After installation, you’ll need to activate your license to receive updates and support:

  1. In your WordPress admin, go to CSS Sliders → License
  2. Enter your license key (found in your purchase email or account dashboard)
  3. Click Activate License
  4. You should see a confirmation message that your license is active

Creating Your First Slider

Now that you’ve installed and activated the plugin, let’s create your first image slider:

  1. Create a New Slider
  • Go to CSS Sliders → Add New Slider
  • Enter a name for your slider in the title field
  1. Add Images
  • In the Slider Images section, click the Add Image button
  • Select images from your Media Library or upload new ones
  • You can reorder images by dragging them
  • For each image, select the desired alignment (Center, Top, or Bottom)
  1. Configure Settings
  • In the Slider Settings box on the right:
    • Set the Transition Time in seconds (how long each image displays)
    • Set the Slider Height for desktop view
    • Set the Mobile Slider Height for screens smaller than 768px
  1. Save Your Slider
  • Click the Publish button to save your slider
  1. Copy the Shortcode
  • Note the shortcode displayed in the settings box (e.g., )
  • Copy this shortcode to use in your pages or posts

Using Your Slider

You can add your slider to any page or post using the shortcode:

  1. Edit the page or post where you want to display the slider
  2. Paste the shortcode where you want the slider to appear
  3. Update or publish the page

Customizing Your Slider

Changing Image Alignments

For each image, you can select how it’s positioned within the slider frame:

  • Center – Centers the image (default)
  • Top – Aligns to the top edge (good for images with important content at the top)
  • Bottom – Aligns to the bottom edge (good for images with important content at the bottom)

Adjusting for Mobile

The Mobile Slider Height setting controls how tall your slider appears on devices with screens smaller than 768px wide. This helps ensure your slider looks good on all devices.

Troubleshooting

Slider Not Appearing

  • Verify you’ve copied the correct shortcode
  • Make sure the slider ID in the shortcode matches your slider
  • Check that the slider contains images

Images Not Displaying Correctly

  • Make sure your images are properly uploaded and not corrupted
  • Try different image alignment settings
  • Adjust the slider height to better accommodate your images

Plugin Conflicts

Our CSS-only approach minimizes conflicts, but if you experience issues:

  • Temporarily deactivate other plugins to identify conflicts
  • Check your browser console for any errors
  • Ensure your theme isn’t overriding slider styles

Getting Support

If you encounter any issues or have questions not covered in this guide:

Please include your license key, WordPress version, PHP version, and a detailed description of any issues when contacting support.

Thank you for choosing 7th Circle Designs CSS Image Slider! We hope you enjoy using our plugin to create beautiful, high-performance image sliders on your WordPress site.