Jadual Kandungan

swiper

Rumah

hujung hadapan web

tutorial js

swiper插件简介以及轮播图的做法

PHP中文网

Jun 19, 2017 pm 05:23 PM

swiper bagaimana pemalam pengenalan

swiper

Swiper是纯javascript打造的滑动特效插件，⾯面向⼿手机、平板电脑等移动终端。

Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常⽤用效果。

Swiper开源、免费、稳定、使⽤用简单、功能强⼤大，是架构移动终端⽹网站的重要选择！

1.首先创建一个swiper的运行环境，需要用到的文件有swiper.min.js和swiper.min.css文件。

<!DOCTYPE html>
<html>
　　<head>
　　　　...
　　　　<link rel="stylesheet" href="path/to/swiper.min.css?1.1.10">
　　</head>
　　<body>
　　　　...
　　</body>

Salin selepas log masuk

　　<script src="path/to/swiper.min.js?1.1.10"></script>

Salin selepas log masuk

</html>

Salin selepas log masuk

2.写HTML内容。

<div class="swiper-container">
　　<div class="swiper-wrapper">
　　　　<div class="swiper-slide">Slide 1</div>
　　　　<div class="swiper-slide">Slide 2</div>
　　　　<div class="swiper-slide">Slide 3</div>
　　</div>

　　<!-- 如果需要分页器 -->
　　<div class="swiper-pagination"></div>
</div>

Salin selepas log masuk

3.你可能想要给Swiper定义一个大小，当然不要也行。

.swiper-container {
　　width: 600px;
　　height: 300px;
}

Salin selepas log masuk

4.初始化Swiper：最好是挨着标签（函数调用）

<script>

Salin selepas log masuk

　　　　var swiper=new Swiper('.swiper-container',{
　　　　　　autoplay:1000,//自动轮播
　　　　　　autoplayDisableOnInteraction:false,//滑动后继续滚动
　　　　　　loop:true,//循环
　　　　　　pagination:'.swiper-pagination',//分页
　　　　　　paginationClickable:true,//小圆点点击
　　　　　　spaceBetween:30,//图片间隙
　　　　　　direction:"horizontal"//默认横向 vertical垂直
　　　　})

</script>
</body>

Salin selepas log masuk

Atas ialah kandungan terperinci swiper插件简介以及轮播图的做法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Repo: Cara menghidupkan semula rakan sepasukan

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Cara mendapatkan biji gergasi

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?

3 minggu yang lalu By DDD

R.E.P.O. Simpan Fail Lokasi: Di manakah & bagaimana untuk melindunginya?

3 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7333

Tutorial Java

1627

Tutorial CakePHP

1351

Tutorial Laravel

1262

Tutorial PHP

1209

Tunjukkan Lagi

Related knowledge

Panduan Pemula PyCharm: Pemahaman menyeluruh tentang pemasangan pemalam! Feb 25, 2024 pm 11:57 PM

PyCharm ialah persekitaran pembangunan bersepadu (IDE) Python yang berkuasa dan popular yang menyediakan pelbagai fungsi dan alatan supaya pembangun boleh menulis kod dengan lebih cekap. Mekanisme pemalam PyCharm ialah alat yang berkuasa untuk meluaskan fungsinya Dengan memasang pemalam yang berbeza, pelbagai fungsi dan ciri tersuai boleh ditambahkan pada PyCharm. Oleh itu, adalah penting bagi pemula untuk PyCharm untuk memahami dan mahir dalam memasang pemalam. Artikel ini akan memberi anda pengenalan terperinci kepada pemasangan lengkap pemalam PyCharm.

Apakah direktori pemasangan sambungan pemalam Chrome? Mar 08, 2024 am 08:55 AM

Apakah direktori pemasangan sambungan pemalam Chrome? Dalam keadaan biasa, direktori pemasangan lalai pelanjutan pemalam Chrome adalah seperti berikut: 1. Lokasi direktori pemasangan lalai pemalam chrome dalam windowsxp: C:\DocumentsandSettings\username\LocalSettings\ApplicationData\Google\Chrome\UserData\ Default\Extensions2 chrome dalam windows7 Lokasi direktori pemasangan lalai pemalam: C:\Users\username\AppData\Local\Google\Chrome\User.

Kongsi tiga penyelesaian mengapa pelayar Edge tidak menyokong pemalam ini Mar 13, 2024 pm 04:34 PM

Apabila pengguna menggunakan penyemak imbas Edge, mereka mungkin menambahkan beberapa pemalam untuk memenuhi lebih banyak keperluan mereka. Tetapi apabila menambah pemalam, ia menunjukkan bahawa pemalam ini tidak disokong. Bagaimana untuk menyelesaikan masalah ini? Hari ini, editor akan berkongsi dengan anda tiga penyelesaian. Kaedah 1: Cuba gunakan pelayar lain. Kaedah 2: Flash Player pada penyemak imbas mungkin sudah lapuk atau tiada, menyebabkan pemalam tidak disokong Anda boleh memuat turun versi terkini dari tapak web rasmi. Kaedah 3: Tekan kekunci "Ctrl+Shift+Delete" pada masa yang sama. Klik "Kosongkan Data" dan buka semula penyemak imbas.

Penanda Aras Prestasi ORM Python: Membandingkan Rangka Kerja ORM Berbeza Mar 18, 2024 am 09:10 AM

Rangka kerja pemetaan hubungan objek (ORM) memainkan peranan penting dalam pembangunan ular sawa, ia memudahkan akses dan pengurusan data dengan membina jambatan antara objek dan pangkalan data hubungan. Untuk menilai prestasi rangka kerja ORM yang berbeza, artikel ini akan menanda aras terhadap rangka kerja popular berikut: sqlAlchemyPeeweeDjangoORMPonyORMTortoiseORM Kaedah Ujian Penanda aras menggunakan pangkalan data SQLite yang mengandungi 1 juta rekod. Ujian melakukan operasi berikut pada pangkalan data: Masukkan: Masukkan 10,000 rekod baharu ke dalam jadual Baca: Baca semua rekod dalam jadual Kemas kini: Kemas kini satu medan untuk semua rekod dalam jadual Padam: Padam semua rekod dalam jadual Setiap operasi

Bagaimana untuk mengenal pasti kotak kasut tulen dan palsu bagi kasut Nike (kuasai satu helah untuk mengenal pasti dengan mudah) Sep 02, 2024 pm 04:11 PM

Sebagai jenama sukan yang terkenal di dunia, kasut Nike telah menarik perhatian ramai. Bagaimanapun, terdapat juga sejumlah besar produk tiruan di pasaran, termasuk kotak kasut Nike palsu. Membezakan kotak kasut tulen daripada yang palsu adalah penting untuk melindungi hak dan kepentingan pengguna. Artikel ini akan memberi anda beberapa kaedah yang mudah dan berkesan untuk membantu anda membezakan antara kotak kasut asli dan palsu. 1: Tajuk pembungkusan luar Dengan memerhatikan pembungkusan luar kotak kasut Nike, anda boleh menemui banyak perbezaan yang ketara. Kotak kasut Nike tulen biasanya mempunyai bahan kertas berkualiti tinggi yang licin untuk disentuh dan tidak mempunyai bau pedas yang jelas. Fon dan logo pada kotak kasut tulen biasanya jelas dan terperinci, dan tiada kabur atau ketidakkonsistenan warna. 2: LOGO tajuk hot stamping LOGO pada kotak kasut Nike biasanya hot stamping Bahagian hot stamping pada kotak kasut tulen akan ditunjukkan

Aplikasi Python ORM dalam projek data besar Mar 18, 2024 am 09:19 AM

Pemetaan hubungan objek (ORM) ialah teknologi pengaturcaraan yang membolehkan pembangun menggunakan bahasa pengaturcaraan objek untuk memanipulasi pangkalan data tanpa menulis pertanyaan SQL secara langsung. Alat ORM dalam python (seperti SQLAlchemy, Peewee dan DjangoORM) memudahkan interaksi pangkalan data untuk projek data besar. Kelebihan Kesederhanaan Kod: ORM menghapuskan keperluan untuk menulis pertanyaan SQL yang panjang, yang meningkatkan kesederhanaan dan kebolehbacaan kod. Abstraksi data: ORM menyediakan lapisan abstraksi yang mengasingkan kod aplikasi daripada butiran pelaksanaan pangkalan data, meningkatkan fleksibiliti. Pengoptimuman prestasi: ORM sering menggunakan operasi caching dan kelompok untuk mengoptimumkan pertanyaan pangkalan data, dengan itu meningkatkan prestasi. Mudah alih: ORM membenarkan pembangun untuk

Bagaimana untuk menangani mesej ralat apabila pemasangan pemalam WordPress gagal? Mar 04, 2024 pm 04:57 PM

Bagaimana untuk menangani mesej ralat apabila pemasangan pemalam WordPress gagal? Sebagai salah satu sistem pengurusan kandungan yang paling popular pada masa ini, WordPress mempunyai perpustakaan pemalam yang kaya, menyediakan pengguna dengan pelbagai sambungan fungsian dan pilihan penyesuaian. Walau bagaimanapun, apabila menggunakan WordPress, kadangkala pemasangan pemalam gagal, dan mesej ralat mungkin muncul, menjadikan pengguna keliru dan cemas. Artikel ini akan memperkenalkan beberapa mesej ralat kegagalan pemasangan pemalam WordPress biasa dan cara menangani masalah ini. 1. Laporan

Bagaimana untuk melihat dan mengedit fail SQL Feb 26, 2024 pm 05:12 PM

Fail SQL ialah fail teks yang biasanya mengandungi satu siri pernyataan SQL. Untuk membuka fail SQL, anda boleh menggunakan editor teks atau alat pembangunan SQL khusus. Cara paling mudah untuk membuka fail SQL ialah dengan editor teks, seperti Notepad atau Notepad++ dalam Windows, atau Editor Teks dalam Mac. Berikut ialah langkah-langkah untuk membuka fail SQL: Mula-mula, cari fail SQL yang anda ingin buka, klik kanan fail dan pilih "Buka dengan". dalam tetingkap pop timbul

See all articles