How can I modify the code in my Webflow website using Splide JS to display 2.5 slides instead of 1.5 slides on tablet view (between 768px and 991px)?

To modify the code in your Webflow website to display 2.5 slides instead of 1.5 slides on tablet view, you can use Splide JS in combination with some custom JavaScript code. The following steps will guide you through the process:

1. Add Splide JS to your Webflow project:

• Visit the Splide JS website ( https://splidejs.com/ ) and download the latest version of the library.
• Extract the downloaded file and locate the splide.min.js file.
• Rename the file to splide.js and upload it to your Webflow project's assets or hosting.

1. Import Splide JS into your Webflow project:

• In your Webflow project, open the page where you want to include the Splide JS slider.
• Go to the page settings and navigate to the Custom Code tab.
• In the Head Code section, add the following line to import Splide JS:
  ```html ```

1. Create the HTML structure for the slider:

• On the page where you want to include the slider, add a div element to serve as the container.
• Inside the container div , add a ul element with class splide__list .
• Within the ul , add li elements for each slide you want to display.
• Apply appropriate classes and styling to these elements to achieve the desired layout.

1. Initialize Splide JS with custom configuration:

• In your Webflow project, navigate to the custom JavaScript file where you want to initialize Splide JS (e.g., a script block or an external JS file).
• In this JavaScript file, add the following code to initialize Splide JS with custom configuration:
  ```javascript
  document.addEventListener('DOMContentLoaded', function() {
  new Splide('.splide__list', {
  perPage: 2.5,
  gap: '1rem', // Adjust this value according to your design
  breakpoints: {
  991: {
  perPage: 2.5
  }
  }
  }).mount();
  });
  ```

1. Adjust the slider layout for tablet view (768px - 991px):

• The code provided above sets 2.5 slides per page between the 768px and 991px viewport widths.
• Customize the gap value according to your design, or remove it if not required.
• You can tweak the perPage value to adjust the number of slides displayed on tablet view.

1. Preview and publish your Webflow project:

• Save your changes and preview your project in tablet view (within the specified breakpoint range).
• If everything looks as expected, publish your project to make the changes live on your website.

By following these steps, you will be able to modify the code in your Webflow website using Splide JS to display 2.5 slides instead of 1.5 slides on tablet view.

Additional Questions:

1. How do I add a slider to my Webflow website?
2. Can I customize the animation effects in Splide JS?
3. How can I create a responsive carousel in Webflow using Splide JS?