js常用插件以及使用说明

Swiper

插件主页:https://www.swiper.com.cn/

使用说明:

引入swiper.min.css和swiper.min.js

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-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
</div>

js:

var swiper = new Swiper('.swiper-container', {
    slidesPerView: 3,
    spaceBetween: 30,
    pagination: {
        el: '.swiper-pagination',
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

额外:

如果是一页显示多个且是自适应需求,需要获取可视化宽度,根据可视化宽度判断一页显示几个,示例:

jQuery(document).ready(function () {
    var ww = document.body.clientWidth;
    var n = 2.2;
    if (ww>=768) {
        n = 4
    }
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: n,
        spaceBetween: 30,
        pagination: {
            el: '.swiper-pagination',
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
      },
    });
});
jQuery( window ).resize(function() {
    var ww = document.body.clientWidth;
    var n = 2.2;
    if (ww>=768) {
        n = 4
    }
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: n,
        spaceBetween: 30,
        pagination: {
            el: '.swiper-pagination',
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
      },
    });
});

Glightbox

插件主页:https://biati-digital.github.io/glightbox/
Github主页:https://github.com/biati-digital/glightbox/

使用说明:

引入glightbox.css和glightbox.min.js

html

<a href="xxx.jpg" class="glightbox">
    <img src="xxx.jpg">
</a>

js:

var lightbox = GLightbox();

额外:

需要将glightbox.min.js在底部引入,之后再custom.js放入代码:var lightbox = GLightbox();

LightGallery

插件主页:https://sachinchoolur.github.io/lightGallery/

使用说明:

引入lightgallery.css和lightgallery-all.min.js

html

<div id="aniimated-thumbnials">
  <a href="img/img1.jpg">
    <img src="img/thumb1.jpg" />
  </a>
  <a href="img/img2.jpg">
    <img src="img/thumb2.jpg" />
  </a>
  ...
</div>

js

jQuery('#aniimated-thumbnials').lightGallery({
    thumbnail:true,
    share:false
});

Isotope(瀑布流)

插件主页:https://isotope.metafizzy.co/

使用说明:

引入isotope.pkgd.min.js和imagesloaded.pkgd.min.js,结合bootstap4使用

html

<div class="row" id="list">
    <div class="col-6 item">
    ...
    </div>
    <div class="col-6 item">
    ...
    </div>
</div>

js

jQuery(document).ready(function(){
  var $container = jQuery('#list');
  $container.imagesLoaded(function(){
    $container.isotope({
      itemSelector:'.item',
      transitionDuration:'0.6s',
      masonry:{columnWidth:$container.width()/ 12},
      layoutMode:'masonry'
    });
  });
});

额外:

解决瀑布流与lazyload插件问题:

jQuery(document).ready(function(){
  var $container = jQuery('#list');
  $container.imagesLoaded(function(){
    $container.isotope({
      itemSelector:'.item',
      transitionDuration:'0.6s',
      masonry:{columnWidth:$container.width()/ 12},
      layoutMode:'masonry'
    });
    jQuery(".lazyload").on('load', function () {
      $container.isotope('layout');
    });
  });
});

Lazyload

129 total views, 2 views today

Revisions

No comments yet.

发表评论