Basic use of swiper (5)

This section explains how to display swiper pages in groups.
Sometimes only displaying one page on a screen cannot meet our development needs. Swiper packages a method of displaying a group of pages on one screen. You only need to add an attribute to the initialization of the swiper page.

The first step is to write a basic swiper page.

<div class="swiper-wrapper">
                <div class="swiper-slide">第一页</div>
                <div class="swiper-slide">第二页</div>
                <div class="swiper-slide">第三页</div>
                <div class="swiper-slide">第四页</div>
                <div class="swiper-slide">第五页</div>
                <div class="swiper-slide">第六页</div>
                <div class="swiper-slide">第七页</div>
                <div class="swiper-slide">第八页</div>
                <div class="swiper-slide">第九页</div>
                <div class="swiper-slide">第十页</div>
            </div>
        </div>

Then initialize the page in js and add attributes for better viewing effect.
We added a slide gap to the page.

<script>
            var swiper = new Swiper(&#39;.swiper-container&#39;,{
                slidesPerView:3,   //页面分组显示，这里显示为3组
                spaceBetween:30   //slide间隙
            });
        </script>

Of course, don’t forget to quote our framework file, so when you run our page, you will find that a group of our pages will be displayed on the current screen.

The above is the basic use of swiper (5). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Related labels：

swiper

source：php.cn

Previous article：Basic use of swiper (4) Next article：Basic use of swiper (6)

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Latest Articles by Author

• Video material on building your own PHP framework from scratch
  2023-03-15 16:54:01
• Example analysis of how PHPMailer uses QQ mailbox to complete the email sending function
  2023-03-15 12:26:02
• Introduction to how to receive emails in IMAP in php
  2023-03-14 18:58:01
• Example of how to quickly implement array deduplication in PHP
  2023-03-14 11:30:01
• Summary of the use of all attributes of the tag in html
  1970-01-01 08:00:00
• Summary of basic knowledge of PHP (necessary for beginners to get started)
  2023-03-16 15:20:01
• Introduction to the use of typeof in JavaScript
  1970-01-01 08:00:00
• Introduction to the use of confirm() method in JavaScript
  1970-01-01 08:00:00
• A detailed introduction to the HTML5 Placeholder attribute
  1970-01-01 08:00:00
• How to implement single-select, multiple-select and reverse-select in forms in ReactJS
  1970-01-01 08:00:00

Latest Issues

function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...

From 2024-04-29 11:01:01

0

3

2037

How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?

From 2024-04-23 00:22:19

0

11

2197

The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.

From 2024-04-19 15:37:47

0

1

1851

There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...

From 2024-04-18 23:52:34

0

1

1744

Where is the courseware about CSS mind mapping? Courseware

From 2024-04-16 10:10:18

0

0

1763

Related Topics

More>

• Solution to reboot and select proper boot device
• How to open url file
• ps paint bucket shortcut keys
• What's going on with the red light on the light signal?
• How to solve the problem that the msxml6.dll file is missing
• meta search engine
• How to switch between full-width and half-width
• js shift operator usage