The new slider component of CodeDesign.ai allows you to create stunning image sliders that enhance the visual appeal and interactivity of your website. Whether you're looking to showcase a portfolio, highlight products, or create engaging visual stories, the slider component is your go-to solution. Let's dive into the process of creating a slider on your webpage.
Adding Slider Component - The Process
Dropping the Slider Component to the Canvas
To get started, you’ll need to add the slider component to your page. Follow these steps:
Access the Sidebar: Navigate to the sidebar on your CodeDesign Builder interface.
Find the Slider Component: Go to the 'Elements' tab and scroll down to the ‘Functional’ section.
Drag and Drop: Drag the slider component to your desired location on the page.
Configuring the Slider
Once the slider component is added, you’ll see the slider settings on the sidebar. Here’s how to configure it:
Select a Slide: By default, there are three slides. Use the right and left arrows in the slider settings to navigate between slides.
Add a New Slide: Click "Add Slide" if you need more than three slides.
Customizing Slides
Now let’s customize each slide:
Slide 1:
Select the first slide.
Scroll down to the style settings to see the placeholder image.
Replace the placeholder by clicking the replace button and selecting an image from your uploads, the searchable image repository, or by uploading a new one.
Other Slides:
Repeat the same process, after selecting slides from the dropdown on the slider settings.
If you feel like adding more slides, click on 'Add Slide' button.
Quick Tip
If you need to adjust the design or positioning, use the position settings in the slider configuration. This allows you to tweak the position of the image within the slider frame to get the perfect look.
Additional Settings
Enhance your slider with additional settings:
Enable Arrows: Choose whether to show navigation arrows on your slider.
Animation Options: Select different animations for slide transitions.
Autoplay: Enable autoplay for the slides and set the duration between each slide.
Publishing Your Slider
After configuring your slider to your satisfaction:
Publish the Page: Click the publish button to make your changes live.
View the Slider: Scroll to the slider section on your published page to see it in action.
Video Guide | Creating Sliders on CodeDesign Builder
Creating a slider with CodeDesign.ai is straightforward and user-friendly. With just a few steps, you can add a dynamic and visually appealing slider to your website. We've put together this video explaining the whole process step by step. If you have any questions or need further assistance, our team is always ready to join you via support chats, forums and our social handles.