Home >Web Front-end >HTML Tutorial >Basic use of swiper (4)

Basic use of swiper (4)

黄舟Original: 2017-01-20 15:12:441068browse

First we need to build a basic swiper page.
Of course, don’t forget to quote the downloaded framework file in advance.
In this chapter we added setting the width and height of the container

<!doctype html>
<html>
    <head>
        <title>在slide之间加上间隙</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="swiper.min.css">
        <style>
            body{
                margin:0;
                padding:0;
            }
            .swiper-Container{
                width:500px;
                height:300px;
                margin:20px auto;
            }
            .swiper-slide{
                text-align:center;
                font-size:18px;
                display:flex;
                justify-content:center;
                align-items:center;
                background:#F2F2F2;
            }
        </style>
    </head>

After that, we still implement the layout of a basic swiper page according to the content of the first lesson

 <body>
        <div class="swiper-container">
            <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>
            <div class="swiper-pagination"></div>

16b28748ea4df4d9c2150843fecfba68

Then just add the gap attribute to the js initialization code

 <script src="swiper.min.js"></script>
        <script>
            var swiper = new Swiper(&#39;.swiper-container&#39;,{
                pagination:&#39;.swiper-pagination&#39;,
                paginationClickable:true,
                spaceBetween:30  //添加每个slide的间隙
            });
        </script>
    </body>
</html>

This allows you to add gaps in the middle of each slide page.

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

Statement：

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

Previous article：Basic use of swiper (3)Next article：Basic use of swiper (3)

See more

Basic use of swiper (4)

Related articles