Home › Language Notes › swiper displays in different ways on different screens

swiper displays in different ways on different screens

Hong Mu 2022-11-06 11:20:56 Browse 151 📖 approx. 1 minutes

breakpoints: { 
     320: {  //当屏幕宽度大于等于320
       slidesPerView: 2,
       slidesPerGroup: 2,
       spaceBetween: 50
     },
     1000: {  //当屏幕宽度大于等于768 
       slidesPerView: 3,
       slidesPerGroup: 3,
       spaceBetween: 60
     },
     1280: {  //当屏幕宽度大于等于1280
       slidesPerView: 4,
       slidesPerGroup: 4,
       spaceBetween: 45
     }
   },

WeChat

Alipay

Author of this article: Hong Mu

Link to this article: https://www.4s5.cn/en/archives/280.html

Copyright statement:This article is an original article. Any form of reproduction, collection, or mirroring without authorization is prohibited. Violators will be prosecuted. If you need to reprint, please indicate the source and keep the link to the original text.

✍️ Author: Hong Mu

webmaster · Thanks for reading, stay tuned for more exciting content

Author homepage View home page →

Click to expand the menu js code on the mobile side Language Notes JavaScript

HTML code: <div class= "menu" > <i></i> <i></i> <i></i> </div> CSS code:.hdCon.menu {width: 40px; border...

2022-11-06 11:20:48 👁 174

js determines whether the mobile terminal and PC terminal jump to different pages Language Notes JavaScript

Method 1: /* * * Determine whether the device is a PC or a WAP device */ var mobile_bs = {versions: function() {var u = navigator.userAgent; return {trident: u.indexOf('Trident')> -1, // IE kernel...

2022-11-06 11:20:51 👁 225

How to refresh the verification code when clicking on it Language Notes JavaScript

Generally implemented through js, just reload the value of src<img src="index.php?p=back&c=Admin&a=captcha" onclick="this.src=this.src+'&k='+Math.random();"/…

2022-11-06 11:20:51 👁 172

window.open() displays the window in the center Language Notes JavaScript

var iWidth = 400; //弹出窗口的宽度; var iHeight = 450; //弹出窗口的高度; var iTop = (window.screen.height-30-iHeight)/2; //获得窗口的垂直位置; var iLeft = (window.screen.wi...

2022-11-06 11:20:51 👁 293

js move the mouse up to modify the style attribute Language Notes JavaScript

When the mouse hovers over the element, the color changes to red; when the mouse leaves the element, the color changes to black. To retrieve an element by its ID: `document.getElementById()`; Event handler for mouse hover: `onmouseover`; Event handler for mouse leave: `onmouseout`.<!DOCTYPE html><html lang= "en">...

2022-11-06 11:20:55 👁 130

jquery screen size judgment Language Notes JavaScript

2022-11-06 11:20:56 👁 191

Recommended reading

Custom Cable Tray Manufacturing Website Template 0624 Practical Collection Yiyou template

An eyoucms website template for cable tray customization manufacturing companies. The design style is professional and industrial, able to display bridge products, customized production services and engineering cases. It helps cable tray companies display their products online and attract power and construction customers. Template display Installation instructions Website backend: /login.php Account: admin Password: admin Related articles Yiyou CMS installation FAQ summary Yiyou CMS...

2026-07-31 20:19:19 👁 32

Electric retractable gate and rolling shutter website template – 0625 Practical Collection Yiyou template

This EyouCMS template is ideal for companies specializing in electric telescopic gates and rolling shutter gates. Its modern, tech-driven design is perfect for showcasing these products and demonstrating relevant project cases. It enables door manufacturing enterprises to showcase their products online and attract both commercial and industrial clients. Template Display | Installation Instructions | Website Backend: /login.php | Username: admin | Password: admin | Related Articles: Summary of Common Installation Issues for EyouCMS | EyouCMS (E...

2026-07-31 20:19:23 👁 31

Responsive Precision Machinery and Mold Website Template 0626 Practical Collection Yiyou template

An eyouCMS responsive website template designed specifically for precision machinery and mold manufacturing enterprises. Its professional and sophisticated design effectively showcases precision mold products, processing equipment, and technical expertise. This template helps mold manufacturing companies demonstrate their high-precision manufacturing capabilities online and attract clients from the electronics and automotive industries. Template Display | Installation Instructions | Website Backend: /login.php | Username: admin | Password: admin | Related Articles: Common Installation Questions for eyouCMS...

2026-07-31 20:19:28 👁 49

Resource website typecho001 template Program Notes Typecho

typecho001 template template please do not modify the folder name of this template. The folder name is: typecho001 1.4 Fix the js output problem on the article page 1.3 Fix the error prompt when the plug-in is not installed Optimize the list page code output 1.2 Fix the comment function and add a custom homepage title 1.1 Fix the comment reply asymmetry function Add a separate title setting function on the homepage Add the website favicon.ico icon Add one...

2022-11-06 11:20:27 👁 199

Marketing generator electromechanical equipment website template 0627 Practical Collection Yiyou template

This set of eyoucms templates is suitable for marketing generators and electromechanical equipment companies. The design style is professional and industrial, and can display generator set products, electromechanical equipment and technical solutions. It helps electromechanical companies display their products online and attract industrial and power customers. Template display Installation instructions Website backend: /login.php Account: admin Password: admin Related articles Summary of common problems in Yiyou CMS installation Yiyou C...

2026-07-31 20:19:32 👁 52

Modification of typecho paging style Program Notes Typecho

Sir, times have changed! Typecho is currently the most perfect solution, because Baidu can only see the code of fixed thinking. The actual generated HTML code is breathtakingly clean and fully customized, including adding classes to the li element, adding classes to the a element, adding classes to the previous page and next page, and removing the li tags that come with typecho to express more. I can even add some text to the content inside...

2022-11-06 11:20:27 👁 517