AS RUBIK DOCUMENTATION

Complete implementation guide for beginners

Our Mission: To Make Your Journey as Smooth as Possible

Revolutionary tools should be accessible to everyone. We've designed Anti Swiper Rubik to be intuitive despite its advanced multi-directional capabilities. Every step is documented, every example demonstrates the dynamic movement patterns, and every question is welcome. Your creative vision is our priority, and we're here to help you bring content to life in all directions.

— AS RUBIK TEAM

Complete Implementation Guide

Follow these 5 steps to implement Anti Swiper Rubik, even if you're new to HTML:

1Prepare & Upload Your Media

For Images (All Plans)

  • Format: JPG, PNG, WebP
  • Standard Plan: Up to 1920x1080px, under 500KB each
  • Pro & Enterprise: Higher limits available
  • Filename: Use simple names (e.g., `image-01.jpg`)

For Videos (Pro & Enterprise Plans)

  • Format: MP4 (H.264 codec)
  • Pro Plan: Under 5MB each
  • Enterprise Plan: Higher limits & 4K support
  • ⚠️ Avoid videos exported from Wondershare products

Upload your prepared files to your web server using an FTP client like WinSCP.

2Create Your HTML File

For Complete Beginners:

  1. Open Notepad (Windows) or TextEdit (Mac)
  2. Copy and paste the complete template below
  3. Save as "carousel.html" (make sure to change file type to "All Files")

Complete HTML Template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Carousel</title>
    <style>
        .anti-swiper-container {
            width: 100%;
            max-width: 800px;
            height: 400px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            border-radius: 10px;
        }
        
        /* Responsive design */
        @media (max-width: 768px) {
            .anti-swiper-container {
                height: 250px;
            }
        }
    </style>
</head>
<body>
    <h1>My Image Carousel</h1>
    
    <div class="anti-swiper-container">
        <div class="anti-swiper-track">
            <!-- Slides will be generated automatically -->
        </div>
    </div>

    <script src="https://www.anti-swiper-rubik.com/saas-backend/cdn-server.php?key=YOUR_API_KEY_HERE"></script>
    <script>
        window.addEventListener('load', function() {
            requestAnimationFrame(function() {
                if (typeof AntiSwiperRubik !== 'undefined') {
                    new AntiSwiperRubik('.anti-swiper-container', {
                        images: [
                            'images/image1.jpg',
                            'images/image2.jpg',
                            'images/image3.jpg'
                            // Add more images here
                        ],
                        shuffle: true  // NEW: Set to false to display images in original order
                    });
                } else {
                    console.error('AntiSwiperRubik library not loaded. Check API key.');
                }
            });
        });
    </script>
</body>
</html>

3Customize Your Settings

Replace YOUR_API_KEY_HERE:

Find this line in your HTML:

<script src="https://www.anti-swiper-rubik.com/saas-backend/cdn-server.php?key=YOUR_API_KEY_HERE">

Replace YOUR_API_KEY_HERE with your actual API key from your purchase confirmation.

Update Image Paths:

In the images array, replace the example paths with your actual image file paths:

images: [
    'path/to/your/image1.jpg',
    'path/to/your/image2.jpg',
    'path/to/your/image3.jpg'
]

Adjust Size (Optional):

To change the carousel size, modify these CSS values:

.anti-swiper-container {
    max-width: 800px;  /* Change width */
    height: 400px;     /* Change height */
}

4Configuration Options

Standard Plan Options:

Pro Plan Options:

Example with Videos (Pro Plan):

// The Pro plan initialization
window.addEventListener('load', function() {
    requestAnimationFrame(function() {
        if (typeof AntiSwiperRubikPro !== 'undefined') {
            new AntiSwiperRubikPro('.anti-swiper-container', {
                displayCount: 10,
                random: true,  // NEW: Set to false to disable random selection
                mediaItems: [
                    { type: 'image', src: 'images/photo1.jpg' },
                    { type: 'video', src: 'videos/video1.mp4' },
                    { type: 'image', src: 'images/photo2.jpg' },
                    { type: 'video', src: 'videos/video2.mp4' }
                    // Add up to 20 items total (10 images + 10 videos)
                ]
            });
        } else {
            console.error('AntiSwiperRubikPro library not loaded. Check API key.');
        }
    });
});

🆕 NEW FEATURE: Random/Shuffle Control

Standard Plan: Use shuffle: true/false to control image order randomization.

Pro Plan: Use random: true/false to enable/disable random selection from your media pool.

Benefits: Perfect for creating consistent presentations or completely randomized experiences!

5Test and Deploy

Testing:

  1. Upload your HTML file and media files to your web server
  2. Access your file via browser (https://yoursite.com/carousel.html)
  3. ⚠️ Remember: Testing must be done online, not locally

Recommended Test Setup:

User-agent: *
Disallow: /test/

Advanced CSS Customization

Responsive Design Examples:

/* Desktop */
.anti-swiper-container {
    max-width: 1200px;
    height: 600px;
}

/* Tablet */
@media (max-width: 1024px) {
    .anti-swiper-container {
        max-width: 800px;
        height: 400px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .anti-swiper-container {
        max-width: 100%;
        height: 250px;
        margin: 10px;
    }
}

Custom Styling:

/* Add border and shadow */
.anti-swiper-container {
    border: 2px solid #ddd;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 15px;
}

/* Center on page */
.anti-swiper-container {
    margin: 20px auto;
    display: block;
}

Troubleshooting

Common Issues:

File Upload Help:

If you're new to uploading files to a web server:

Option 1: Use your hosting provider's file manager (Recommended)

  1. Log into your hosting control panel (cPanel, Plesk, etc.)
  2. Find "File Manager" or "Files" section
  3. Navigate to your website's public folder (usually public_html)
  4. Upload your HTML file and media folder directly

Option 2: Use a safe FTP client

  1. Download WinSCP (Windows) or Cyberduck (Mac/Windows)
  2. Get FTP credentials from your web hosting provider
  3. Connect to your server using the FTP client
  4. Upload your HTML file and media folder to your website directory

Why These Steps Are Necessary:

Quick Start (For Experienced Users)

1. Include Anti Swiper Rubik

<script src="https://www.anti-swiper-rubik.com/saas-backend/cdn-server.php?key=YOUR_API_KEY"></script>

2. Basic HTML Structure

<div class="anti-swiper-container">
  <div class="anti-swiper-track">
    <!-- Slides generated automatically -->
  </div>
</div>

3. Initialize

window.addEventListener('load', function() {
  requestAnimationFrame(function() {
    if (typeof AntiSwiperRubik !== 'undefined') {
      new AntiSwiperRubik('.anti-swiper-container', {
        images: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
        shuffle: true  // NEW: Control randomization
      });
    }
  });
});

Plan Differences

Standard Plan ($9.99/month):

  • Up to 10 images maximum
  • Image formats: JPG, PNG, WebP
  • File size: 500KB max per image
  • Resolution: HD 1920x1080 maximum
  • Email support (48h response)
Get Standard Plan

Pro Plan ($19.99/month):

  • Image pool: 10 images + Video pool: 10 videos
  • Random selection: 10 items per session from pools
  • Mixed image/video carousels
  • HD video support (5MB max)
  • Priority support (24h response)
Get Pro Plan

Need More Help?

Check out our Support page for FAQ and contact information.

Pro Plan subscribers get priority support - contact us directly for faster assistance.

Quick Navigation