How to Create Modern Center-Focused Slider Using Swiper.js

Pradeep Maurya
Create Modern Center-Focused Slider Using Swiper.js

If you’re looking to add a clean, modern image slider to your website that highlights the center slide while gently showing the slides on either side, you’re in the right place. In this tutorial, i’ll show you how to create a modern, responsive image slider where the center slide stands out, using Swiper.js, a powerful and easy-to-use slider library.

Whether you’re building a product showcase, portfolio, or banner slider, this design will grab attention while staying lightweight and mobile-friendly.

By the end of this tutorial, you’ll have a responsive slider with smooth transitions, pagination dots, and navigation buttons — all with minimal code.

Suggested Read: Responsive Accordion Photo Gallery using html & css

Why Use Swiper.js?

Swiper.js is one of the most popular libraries for sliders today. Here’s why developers love it:

  • Touch and swipe support (perfect for mobile)
  • Lightweight and fast
  • Built-in pagination, navigation, looping, autoplay
  • Fully customizable with CSS

Are you want to get implementation help, or modify or extend the functionality?

A Tutorialswebsite Expert can do it for you.

Hire an Expert

Create a Center-Focused Slider with Swiper.js

Step-1: Create index.html file

Let’s create an index.html file in your current folder. Now open this file in your editor and copy and paste the below code and save it.




  
  
  Simple Center-Focus Slider
  
  



  

    

       
Image 1

      
Image 2

      
Image 3

      
Image 1

In the above code, you can see the image path like img/banner-1.jpg. So you have to create new folder named “img” in your current directory and upload you slider banner in this folder.

Now edit this code and replace your banner path and image file name with your original image name.

That’s It. Now your Modern Center-Focused Slider is ready.

Create Modern Center-Focused Slider Using Swiper.js

Also Read: Create Dynamic Image Slider Using PHP and MySQL

View Demo

Are you want to get implementation help, or modify or extend the functionality?

A Tutorialswebsite Expert can do it for you.

Hire an Expert

How It Works

  • .swiper is the main slider container.
  • .swiper-wrapper holds all your slides.
  • Each .swiper-slide contains an image.
  • Pagination dots and navigation buttons are added below.
  • All slides start smaller (scale(0.8)) and semi-transparent (opacity: 0.5).
  • The active slide gains full size (scale(1)) and full opacity (opacity: 1) via the active-custom class.
  • Smooth transitions make it look polished.

Conclusion

This center-focused slider is a great choice for portfolios, banners, and product showcases. Thanks to Swiper.js, it’s touch-friendly, responsive, and easy to enhance. With just a bit of CSS and JavaScript, you can achieve a beautiful effect that works on all devices.

Related Article: How to Create Bootstrap Carousel Slider

Related posts