Chiara Carousel Widget¶

Description¶

The Chiara Carousel Widget is a custom carousel for the Chiara theme, using Slick Slider with special configuration including variable width and autoplay.

Page Builder Name: Carousel | PapaThemes Chiara

Version: 1.0.0

Features¶

• ✅ Variable width slides
• ✅ Autoplay with custom speed
• ✅ Progressive lazy loading
• ✅ Arrows and dots navigation
• ✅ Responsive settings
• ✅ Inline editing

How to Use¶

1. Add Widget¶

1. Open Page Builder
2. Drag Carousel | PapaThemes Chiara widget to the page
3. Widget displays default carousel

2. Default Configuration¶

Widget uses the following configuration:

{
    arrows: true,
    dots: true,
    mobileFirst: true,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 5000,
    lazyLoad: 'progressive',
    variableWidth: true,
    responsive: [
        {
            breakpoint: 551,
            settings: {
                arrows: true,
                dots: false
            }
        }
    ]
}

Configuration Details¶

Navigation¶

Autoplay¶

• Enabled: true
• Speed: 5000ms (5 seconds)
• Pause on hover: yes

Variable Width¶

• Each slide can have different width
• Slides auto-align
• No fixed width

Lazy Loading¶

• Mode: Progressive
• Images load gradually as needed
• Improves initial load time

Responsive Behavior¶

Desktop (> 551px)¶

• Arrows: visible
• Dots: visible
• Variable width: active

Mobile (< 551px)¶

• Arrows: visible
• Dots: hidden
• Touch swipe: active

Slide Structure¶

<div class="_row">
    <div class="slide">
        <img src="slide1.jpg" alt="">
        <div class="slide-content">
            <h3>Title</h3>
            <p>Description</p>
        </div>
    </div>
    <!-- More slides -->
</div>

Inline Editing¶

1. Enable Edit Mode
2. Click on slide
3. Edit content
4. Save changes

Usage Examples¶

Hero Carousel¶

Slides: 3-5 banner images
Autoplay: true (5s)
Variable width: true

Testimonials¶

Slides: Customer reviews
Autoplay: true (7s)
Variable width: false

Logo Slider¶

Slides: Partner logos
Autoplay: true (3s)

Dependencies¶

Widget requires: - jQuery - Slick Slider

$ = await loadjQuery();
await loadSlick();

Styling Tips¶

Custom Arrows¶

.slick-prev,
.slick-next {
    /* Custom arrow styles */
}

Custom Dots¶

.slick-dots li button {
    /* Custom dot styles */
}

.slick-dots li.slick-active button {
    /* Active dot */
}

Notes¶

1. Variable width: Need to set width for each slide
2. Images: Use lazy loading to optimize
3. Autoplay: User can pause by hovering
4. Mobile: Dots hidden to save space
5. Performance: Keep under 10 slides