【jQuery】レスポンシブ対応ギャラリースライダープラグインvit-Gallery

jQuery

vit-gallery

May 16, 2018

vit-GalleryはjQueryプラグインを使用することで、ウェブサイトにギャラリースライダーを追加することができるプラグイン。

Getting started

ファイルを読み込みます

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> 

<script type="text/javascript" src="js/vit-gallery.js"></script>

<link rel="stylesheet" type="text/css" href="styles/vit-gallery.css">

HTMLマークアップ

<div class="gallery">
    <div class="gallery__img-block ">
        <span class="">Picture #1 description</span>
        <img src="http://elitefon.ru/images/201503/elitefon.ru_38824.jpg" >
    </div>
    <div class="gallery__img-block">
        <span class="">Picture #2 description</span>
        <img src="http://placekitten.com/800/600">
    </div>
    <div class="gallery__img-block ">
        <span>Picture #3 description</span>
        <img src="http://placekitten.com/360/200">
    </div>
    . . .
</div>

ギャラリー

<script>  
    $(document).ready(function(){
        var $gallery = $('.gallery');
        $gallery.vitGallery()
    })  
</script>

Settings

  1. galleryHeight
  2. imgBlockClass
  3. controls
  4. thumnailWidth
  5. thumnaiHeight
  6. thumbnailMargin
  7. thumbnailAnimation
  8. thumnailAnimationSpeed
  9. transition
  10. animateSpeed
  11. description
  12. autoplay
  13. autoplayDelay
  14. fullscreen

Use settings

<script>  
    $(document).ready(function(){
        var $gallery = $('.gallery');
        $gallery.vitGallery({
            controls: 'points', 
            transition: 'crossfade',
            fullscreen: true
        })
    })  
</script>

Latest Posts

Related Posts