Portfolio slider

Introduction

Users like sliders, designers like making them fancy, and developers ... well we have to deal with it.

This slider has a few nice features:

• It is responsive ( using swiperjs can be tricky to position )
• It has a loading indicator
• It supports swiping gestures
• It supports keyboard input
• It is butter smooooth

Having the timing of the active bullet growing together with the slide moving makes it feel really smooth.

This component is wrapping it's own CSS and JS code blocks, so it can be moved.

‍

Getting Started

1. Clone it here

2. Add custom code for swiperjs

In the header:

‍

< link
 rel="stylesheet"
 href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>

‍

Before closing body tag:‍

‍

< script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

‍

3. Copy the whole portfolio slider block

4. Upload custom background

5. Adjust .moc-slider_window

6. Customize

You can find colors in the variables pannel, timing changes are in the custom code boxes.