Swiper-页面当中开启循环模式

悠悠 2022-09-23 04:00 423阅读 0赞

这次内容我们介绍如何在swiper页面当中开启循环模式。  
首先让我们用积累了十四节……不十三节的功力来搭建一个基本的swiper的布局。并且根据需要来设置CSS样式。

<div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">H5EDU 1<img src="logo.png"></div>
                    <div class="swiper-slide">H5EDU 2<img src="logo.png"></div>
                    <div class="swiper-slide">H5EDU 3<img src="logo.png"></div>
                    <div class="swiper-slide">H5EDU 4<img src="logo.png"></div>
                    <div class="swiper-slide">H5EDU 5<img src="logo.png"></div>
                    <div class="swiper-slide">H5EDU 6<img src="logo.png"></div>
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>

然后到js当中进行页面的初始化，再加上我们的循环属性（loop：true）.

var swiper = new Swiper('.swiper-container',{
                    pagination:'.swiper-pagination',
                    paginationClickable:true,
                    nextButton:'.swiper-button-next',
                    prevButton:'.swiper-button-prev',
                    slidesPerView:1,
                    spaceBetween:30,
                    loop:true  //开启循环属性
                });

完成之后我们就可以一直进行翻页了，能玩三天三夜，还不会累！

发表评论取消回复

表情：

评论列表（有 0 条评论，423人围观）

还没有评论，来说两句吧...

相关阅读

相关 Swiper-页面当中添加键盘控制翻页的功能

这次内容我们介绍如何在swiper的页面当中添加键盘控制翻页的功能。开始还是搭建swiper页面。 <div class="swiper-container">

ゝ一纸荒年。/ 2022年09月23日 04:00/ 0 赞/ 278 阅读

相关 Swiper-页面当中开启循环模式

这次内容我们介绍如何在swiper页面当中开启循环模式。首先让我们用积累了十四节……不十三节的功力来搭建一个基本的swiper的布局。并且根据需要来设置CSS样式。

悠悠/ 2022年09月23日 04:00/ 0 赞/ 424 阅读

相关 swiper-抓手光标，即改变光标在swiper页面当中的样式

本次章节呢，我们来介绍swiper当中的抓手光标，即改变我们光标在swiper页面当中的样式。第一步我们还是搭建一个基础的swiper页面布局。 <b

淩亂°似流年/ 2022年09月23日 04:00/ 0 赞/ 222 阅读

相关 Swiper-当中的swiper嵌套

这节课我们介绍swiper当中的swiper嵌套。这次第一步有些不一样，虽然同样是要搭建swiper页面，但是我们在一个swiper页面当中的slide里面嵌套了

小咪咪/ 2022年09月23日 04:00/ 0 赞/ 481 阅读

相关 swiper-页面的free模式。

这节课我们介绍swiper页面的free模式。第一步，我们还是要创建一个swiper的基础页面。 <div class="swiper-containe

女爷i/ 2022年09月23日 04:00/ 0 赞/ 255 阅读

相关 Swiper-如何让swiper页面分组显示

本节讲解如何让swiper页面分组显示。有时候一个屏幕当中只显示一个页面并不能满足我们的开发需求，在swiper当中就包装了一个屏幕显示一组页面的方法，只需要在swipe

落日映苍穹つ/ 2022年09月23日 04:00/ 0 赞/ 70 阅读

相关 Swiper-页面布置

首先我们要搭建一个基础的swiper页面。当然事先不要忘记引用下载好的框架文件。这一章我们添加了设置容器的宽、高 > > <!doctype html

ゞ浴缸里的玫瑰/ 2022年09月23日 03:59/ 0 赞/ 201 阅读

相关 Swiper-页面垂直滚动样式

首先按照第一节课的内容，将一个基本的swiper页面实现。然后在初始化的js代码当中添加属性。当然事先不要忘记引用下载好的框架文件。我们先添加翻页导航

小咪咪/ 2022年09月23日 03:59/ 0 赞/ 435 阅读

相关页面当中，删除ul当中的一个li

<ul class="phone-bumber" id="ul_author"> <!--<li>张大军（13735898529）<

悠悠/ 2022年09月21日 13:24/ 0 赞/ 153 阅读

相关谷歌开启暗黑模式，页面全黑模式开启方法

1. 在谷歌浏览器中输入： chrome://flags/\enable-force-dark 2. 然后搜索enable-force-dark 3. 然后将

向右看齐/ 2022年08月30日 11:41/ 0 赞/ 312 阅读