Slidesperview Swiper 1.5

7 min read Oct 14, 2024

How to Use Slides per View in Swiper.js (v1.5)

Swiper.js is a powerful JavaScript library for creating beautiful and interactive sliders. One of the most useful features of Swiper.js is the ability to control the number of slides visible at a time, known as slides per view. In this article, we'll explore how to use this feature effectively in Swiper.js version 1.5.

Understanding Slides per View

Slides per view determines how many slides are displayed simultaneously within the Swiper slider. This setting is crucial for controlling the visual layout of your slider and can significantly impact the user experience.

Let's consider some examples:

Slides per view: 1: Only one slide will be visible at a time, creating a classic carousel effect.
Slides per view: 2: Two slides will be displayed side-by-side, creating a wider visual impact.
Slides per view: 'auto': Swiper will automatically adjust the number of slides displayed based on the container's width.

Configuring Slides per View in Swiper.js (v1.5)

Setting the slides per view is quite straightforward in Swiper.js v1.5. You can achieve this using the slidesPerView parameter within the Swiper initialization.

var swiper = new Swiper('.swiper-container', {
  // ... other Swiper options
  slidesPerView: 1, // Default: 1
});

Key Points

Number: You can set the number of slides per view to any positive integer.
Auto: Use 'auto' to dynamically adjust the number of slides based on the container's width.
Fractions: For advanced layouts, you can even use fractional values like 1.5 to display a portion of the next slide.

Example Implementation

Let's create a simple Swiper.js slider with slides per view set to 3:

HTML Structure


  
    Slide 1
    Slide 2
    Slide 3
    Slide 4
    Slide 5
    Slide 6

CSS Styling (Optional)

.swiper-container {
  width: 600px;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #eee;
  padding: 20px;
}

JavaScript Initialization

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 3, // Show 3 slides at a time
  spaceBetween: 30,  // Add space between slides
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
});

Dynamic Slides per View: Responsive Design

You can create responsive sliders that adjust the slides per view based on screen size using Swiper's breakpoints configuration. This allows your slider to adapt seamlessly to different devices.

var swiper = new Swiper('.swiper-container', {
  // ... other options
  slidesPerView: 3,
  spaceBetween: 30,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  breakpoints: {
    // When window width is less than 768px, set slidesPerView to 1
    768: {
      slidesPerView: 1,
    },
    // When window width is less than 992px, set slidesPerView to 2
    992: {
      slidesPerView: 2,
    },
  }
});

Explanation:

breakpoints: This object defines the breakpoints for your responsive design.
768: When the screen width is less than 768px, the slider will display only one slide per view.
992: When the screen width is less than 992px but greater than or equal to 768px, the slider will display two slides per view.
slidesPerView: This property within each breakpoint specifies the desired number of slides per view at that specific screen size.

Advanced Techniques

Fractional Slides Per View

Swiper.js allows you to use fractional values for slidesPerView for creating unique slider layouts. This can be helpful for achieving a more subtle visual effect where slides overlap slightly.

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 1.5, // Show 1.5 slides, resulting in a slight overlap
  spaceBetween: 20, 
});

Centered Slides

The centeredSlides option allows you to center the active slide within the visible area, which can be particularly effective when using fractional slidesPerView values.

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 1.5,
  centeredSlides: true,
  spaceBetween: 20,
});

Space Between Slides

The spaceBetween property allows you to adjust the spacing between slides. This is useful for creating a more visually appealing and organized slider.

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 3,
  spaceBetween: 30, // Add 30px spacing between slides
});

Conclusion

Mastering the slides per view feature in Swiper.js v1.5 empowers you to create visually appealing and highly interactive sliders. By understanding the slidesPerView property, breakpoints, and other advanced techniques, you can tailor your slider to perfectly suit your specific design requirements and user experience goals.