html,Code片段,代码实例,代码示例,代码片段库

html Matrix Tiny Slider Banner Rotator（

网站上还需要一个额外的滑块吗？ 全高/宽。包含幻灯片/淡入淡出和过渡时间的选项。使用Tiny Slider。 即http://cloud.madebyspeak.com/a363a7 | https://www.stjohnsroanoke.org/admin/settings/sitewide-content.aspx?scph=8633#0

matrix-template.liquid

{% assign items = List.Items %}
<div id="auto-slider">
   <ul>
      {% for Item in items %}
      {% if Item.FieldValues.Active %}
      <li>
         <img src="{{ Item.FieldValues.Image }}" alt="">
      </li>
      {% endif %}
      {% endfor %}
   </ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.8.8/min/tiny-slider.js?ckcachebust=568244149"></script>

<script>

 
{% if Module.FieldValues.Transition == 'Slide' -%}
var slider = tns({
      container: '#auto-slider ul',
      items: 1,
      autoplay: true,
      stopOnHover: false,
      mouseDrag: false,
      controls: false,
      nav: false,
      touch: false,
      autoHeight: true,
      loop: true,
      autoplayButtonOutput: false,
      freezable: false,
      autoplayTimeout: {{ Module.FieldValues.SlideDelayTime }}000
   });

{% elsif Module.FieldValues.Transition == 'Fade' -%}
   var slider = tns({
      container: '#auto-slider ul',
      items: 1,
      autoplay: true,
      stopOnHover: false,
      mouseDrag: false,
      controls: false,
      nav: false,
      touch: false,
      autoHeight: true,
      loop: true,
      autoplayButtonOutput: false,
      freezable: false,
      autoplayTimeout: {{ Module.FieldValues.SlideDelayTime }}000,
      mode: "gallery"
   });

{% elsif Module.FieldValues.Transition == '' -%}
   var slider = tns({
      container: '#auto-slider ul',
      items: 1,
      autoplay: true,
      stopOnHover: false,
      mouseDrag: false,
      controls: false,
      nav: false,
      touch: false,
      autoHeight: true,
      loop: true,
      autoplayButtonOutput: false,
      freezable: false,
      autoplayTimeout: {{ Module.FieldValues.SlideDelayTime }}000,
   });
{% endif %}

$("body").addClass("active-autoslider");
</script>

matrix-head.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.1/tiny-slider.css">

html Matrix Tiny Slider Banner Rotator（

网站上还需要一个额外的滑块吗？ 全高/宽。包含幻灯片/淡入淡出和过渡时间的选项。使用Tiny Slider。 即http://cloud.madebyspeak.com/a363a7 | https://www.stjohnsroanoke.org/admin/settings/sitewide-content.aspx?scph=8633#0

matrix-template.liquid

{% assign items = List.Items %}
<div id="auto-slider">
   <ul>
      {% for Item in items %}
      {% if Item.FieldValues.Active %}
      <li>
         <img src="{{ Item.FieldValues.Image }}" alt="">
      </li>
      {% endif %}
      {% endfor %}
   </ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.8.8/min/tiny-slider.js?ckcachebust=568244149"></script>

<script>

 
{% if Module.FieldValues.Transition == 'Slide' -%}
var slider = tns({
      container: '#auto-slider ul',
      items: 1,
      autoplay: true,
      stopOnHover: false,
      mouseDrag: false,
      controls: false,
      nav: false,
      touch: false,
      autoHeight: true,
      loop: true,
      autoplayButtonOutput: false,
      freezable: false,
      autoplayTimeout: {{ Module.FieldValues.SlideDelayTime }}000
   });

{% elsif Module.FieldValues.Transition == 'Fade' -%}
   var slider = tns({
      container: '#auto-slider ul',
      items: 1,
      autoplay: true,
      stopOnHover: false,
      mouseDrag: false,
      controls: false,
      nav: false,
      touch: false,
      autoHeight: true,
      loop: true,
      autoplayButtonOutput: false,
      freezable: false,
      autoplayTimeout: {{ Module.FieldValues.SlideDelayTime }}000,
      mode: "gallery"
   });

{% elsif Module.FieldValues.Transition == '' -%}
   var slider = tns({
      container: '#auto-slider ul',
      items: 1,
      autoplay: true,
      stopOnHover: false,
      mouseDrag: false,
      controls: false,
      nav: false,
      touch: false,
      autoHeight: true,
      loop: true,
      autoplayButtonOutput: false,
      freezable: false,
      autoplayTimeout: {{ Module.FieldValues.SlideDelayTime }}000,
   });
{% endif %}

$("body").addClass("active-autoslider");
</script>

matrix-head.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.1/tiny-slider.css">

html CSS悬停

cssHover

<style type="text/css">
  /* EXTRA Animations */
  .hofbtn {
    transition: ease-out 0.1s;
    background-color: #EF7926;
  }
  .hofbtn:hover {
    transition: ease-in 0.1s;
    background-color: #bf601e;
  }
 
</style>

html vue模板

component.js

<template>
hello snippet
</template>

html 00_CustomVueAwesomeSwiperOnNuxt.md

00_CustomVueAwesomeSwiperOnNuxt.md

Nuxt.js環境で問題なく動くカルーセルのカスタムサンプル

こちらを使用  
https://github.com/surmon-china/vue-awesome-swiper

カスタマイズする際に注意する  
スコープセレクタをディープセレクタにする  
https://vue-loader-v14.vuejs.org/ja/features/scoped-css.html

cf. [Nuxt.jsでvue-awesome-swiperを使ったスライダー実装](https://qiita.com/IKEMAKI/items/c68e094f412b04b1afc2)

GuideSlideSP.vue

<template>
  <no-ssr>
    <div class="guide__list">
      <swiper :options="swiperOption">
        <swiper-slide class="guide__item"><GuideSlideStep1 /></swiper-slide>
        <swiper-slide class="guide__item"><GuideSlideStep2 /></swiper-slide>
        <swiper-slide class="guide__item"><GuideSlideStep3 /></swiper-slide>
      </swiper>
      <div class="swiper-pagination" ></div>
    </div>
  </no-ssr>
</template>

<script>
import GuideSlideStep1 from '~/components/molecules/GuideSlideStep1'
import GuideSlideStep2 from '~/components/molecules/GuideSlideStep2'
import GuideSlideStep3 from '~/components/molecules/GuideSlideStep3'
export default {
  components: {
    GuideSlideStep1,
    GuideSlideStep2,
    GuideSlideStep3,
  },
  data() {
    return {
      swiperOption: {
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.guide__list{
  z-index: index($z, slide);
  position: relative;
  &/deep/ .swiper-pagination-bullet{
    display: inline-block;
    margin: 0 5px;
    &-active{
      background-color: $brand-color;
    }
  }
}
.swiper-pagination{
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
}
</style>

html 滑块

slider.html

<!-- SIMPLE SLIDER -->
        <div id="slider1" class="carousel slide mb-5" data-ride="carousel">
          <div class="carousel-inner">
              <!-- klass active määrab esimese pildi, mis lehe laadimisel kuvatakse -->
            <div class="carousel-item active">
              <img class="d-block img-fluid" src="https://source.unsplash.com/wgq4eit198Q/700x400" alt="First Slide">
            </div>
            <div class="carousel-item ">
              <img class="d-block img-fluid" src="https://source.unsplash.com/WLUHO9A_xik/700x400" alt="Second Slide">
            </div>
            <div class="carousel-item ">
              <img class="d-block img-fluid" src="https://source.unsplash.com/4yta6mU66dE/700x400" alt="Third Slide">
            </div>
          </div>
        </div>
        
        
         <!-- SLIDER WITH CONTROLS -->

        <div id="slider2" class="carousel slide mb-5" data-ride="carousel">
          <div class="carousel-inner">
              <!-- klass active määrab esimese pildi, mis lehe laadimisel kuvatakse -->
            <div class="carousel-item active">
              <img class="d-block img-fluid" src="https://source.unsplash.com/wgq4eit198Q/700x400" alt="First Slide">
            </div>
            <div class="carousel-item ">
              <img class="d-block img-fluid" src="https://source.unsplash.com/WLUHO9A_xik/700x400" alt="Second Slide">
            </div>
            <div class="carousel-item ">
              <img class="d-block img-fluid" src="https://source.unsplash.com/4yta6mU66dE/700x400" alt="Third Slide">
            </div>
          </div>
          <!-- Carousel control -->
          <!-- Tagasi liikumiseks -->
          <a href="#slider2" class="carousel-control-prev" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </a>
          <!-- edasi liikumiseks -->
          <a href="#slider2" class="carousel-control-next" data-slide="next">
            <span class="carousel-control-next-icon"></span>
          </a>
        </div>
        
        
        
        <!-- SLIDER WITH INDICATORS -->

        <div id="slider3" class="carousel slide mb-5" data-ride="carousel">
            <ol class="carousel-indicators">
                <!-- data-slide määrab mis pildil järjekorras ollaks, klass active määrab esimese pildi mis kuvatakse laadimisel. Li arv määrab mitu indikaatorit on -->
                <li class="active" data-target="#slider3" data-slide-to="0"></li>
                <li data-target="#slider3" data-slide-to="1"></li>
                <li data-target="#slider3" data-slide-to="2"></li>
            </ol>
          <div class="carousel-inner">
              <!-- klass active määrab esimese pildi, mis lehe laadimisel kuvatakse -->
            <div class="carousel-item active">
              <img class="d-block img-fluid" src="https://source.unsplash.com/wgq4eit198Q/700x400" alt="First Slide">
            </div>
            <div class="carousel-item ">
              <img class="d-block img-fluid" src="https://source.unsplash.com/WLUHO9A_xik/700x400" alt="Second Slide">
            </div>
            <div class="carousel-item ">
              <img class="d-block img-fluid" src="https://source.unsplash.com/4yta6mU66dE/700x400" alt="Third Slide">
            </div>
          </div>
          <!-- Carousel control -->
          <!-- Tagasi liikumiseks -->
          <a href="#slider3" class="carousel-control-prev" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </a>
          <!-- edasi liikumiseks -->
          <a href="#slider3" class="carousel-control-next" data-slide="next">
            <span class="carousel-control-next-icon"></span>
          </a>
        </div>
        
        
        
        <div id="slider4" class="carousel slide mb-5" data-ride="carousel">
            <ol class="carousel-indicators">
                <li class="active" data-target="#slider3" data-slide-to="0"></li>
                <li data-target="#slider3" data-slide-to="1"></li>
                <li data-target="#slider3" data-slide-to="2"></li>
            </ol>
          <div class="carousel-inner">
              <!-- klass active määrab esimese pildi, mis lehe laadimisel kuvatakse -->
            <div class="carousel-item active">
              <img class="d-block img-fluid" src="https://source.unsplash.com/wgq4eit198Q/700x400" alt="First Slide">
              <div class="carousel-caption d-none d-md-block">
                  <h3>Slide One</h3>
                  <p>Lorem ipsum dolor sit amet.</p>
              </div>
            </div>
            <div class="carousel-item ">
              <img class="d-block img-fluid" src="https://source.unsplash.com/WLUHO9A_xik/700x400" alt="Second Slide">
              <div class="carousel-caption d-none d-md-block">
                  <h3>Slide Two</h3>
                  <p>Lorem ipsum dolor sit amet.</p>
              </div>
            </div>
            <div class="carousel-item ">
              <img class="d-block img-fluid" src="https://source.unsplash.com/4yta6mU66dE/700x400" alt="Third Slide">
              <div class="carousel-caption d-none d-md-block">
                  <h3>Slide Three</h3>
                  <p>Lorem ipsum dolor sit amet.</p>
              </div>
            </div>
          </div>
          <!-- Carousel control -->
          <!-- Tagasi liikumiseks -->
          <a href="#slider4" class="carousel-control-prev" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </a>
          <!-- edasi liikumiseks -->
          <a href="#slider4" class="carousel-control-next" data-slide="next">
            <span class="carousel-control-next-icon"></span>
          </a>
        </div>
      </div>

html 手风琴

accordion.html

<div class="accordion">
        <div class="card">
          <div class="card-header">
            <h5>
              <a
                href="#collapse1"
                data-parent="#accordion"
                data-toggle="collapse"
              >
                Collapse One
              </a>
                            </h5>
                        </div>

                        <div id="collapse1" class="collapse show">
                            <div class="card-body">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis ea iste a doloremque, cumque, debitis eum vel ipsum architecto aut, recusandae totam ullam aperiam. Nesciunt expedita officiis animi quam corporis optio inventore facilis sint et nulla
                                in, repellat debitis dolor at nisi quo, unde temporibus. Quos nisi nostrum officia, illo.
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h5>
                                <a  href="#collapse2"
                data-parent="#accordion"
                data-toggle="collapse">
                Collapse Two
              </a>
                            </h5>
                        </div>

                        <div id="collapse2" class="collapse" >
                            <div class=card-body>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis ea iste a doloremque, cumque, debitis eum vel ipsum architecto aut, recusandae totam ullam aperiam. Nesciunt expedita officiis animi quam corporis optio inventore facilis sint et nulla
                                in, repellat debitis dolor at nisi quo, unde temporibus. Quos nisi nostrum officia, illo.
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h5>
                                <a  href="#collapse3"
                data-parent="#accordion"
                data-toggle="collapse">
                Collapse Three
              </a>
                            </h5>
                        </div>

                        <div id="collapse3" class="collapse">
                            <div class="card-body">
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis ea iste a doloremque, cumque, debitis eum vel ipsum architecto aut, recusandae totam ullam aperiam. Nesciunt expedita officiis animi quam corporis optio inventore facilis sint et nulla
                                in, repellat debitis dolor at nisi quo, unde temporibus. Quos nisi nostrum officia, illo.
                            </div>
                        </div>
                    </div>
                </div>
            </div>

html 坍方

collapse.html

<!-- BUTTON WITH COLLAPSE -->
      <!-- Collapse'i toimima saamiseks kasuta data-toggle=collapse -->
      <button
        class="btn btn-primary d-block mb-4"
        data-toggle="collapse"
        data-target="#collapse-btn"
      >
        Read More
      </button>
      <!-- data-target väärtus peab ühtima elemendi id'ga -->
      <div class="collapse mb-5" id="collapse-btn">
        <div class="card">
          <div class="card-body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel quae
            dolore impedit exercitationem commodi voluptatum, magnam quod libero
            molestiae, adipisci nesciunt esse minus cumque autem nam? Minima,
            iste error rerum totam dolor fugiat aperiam quam quo cupiditate
            consectetur cumque temporibus!
          </div>
        </div>
      </div>

html 提示

tooltip.html

 <button
        class="btn btn-primary"
        data-toggle="tooltip"
        data-placement="top"
        title="tooltip on top"
      >
        Tooltip On Top
      </button>
      
<!-- TRIGGER WITH JS -->
      <button class="btn btn-secondary" onclick="showTooltip()">
        Show Tooltip
      </button>

    <script>
      // INIT TOOLTIPS
      $('[data-toggle="tooltip"]').tooltip();

      function showTooltip() {
        $('#hello').tooltip('show');
      }
      function hideTooltip() {
        $('#hello').tooltip('hide');
      }
      function toggleTooltip() {
        $('#hello').tooltip('toggle');
      }

      // TOOLTIP EVENTS
      $('#hello').on('show.bs.tooltip', function() {
        console.log('Tooltip is visible');
      });
      $('#hello').on('shown.bs.tooltip', function() {
        console.log('Tooltip is shown');
      });
      $('#hello').on('hide.bs.tooltip', function() {
        console.log('Tooltip is hide');
      });
      $('#hello').on('hidden.bs.tooltip', function() {
        console.log('Tooltip is hidden');
      });
    </script>

html 酥料饼

popover.html

<button
        class="btn btn-danger"
        data-toggle="popover"
        data-placement="top" 
        data-content="Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis magnam accusantium alias blanditiis laudantium amet laboriosam, recusandae minus. Officiis harum omnis quo iusto libero eaque ipsa? Velit atque fugit, est perspiciatis totam autem, facere ipsum veritatis sequi, laborum numquam doloremque?"
      >
        Toggle popover
      </button>
      
      
      Tuleb nüüd initsialiseerida see, ehk käiku panna jQuerys
 <script>
      $('[data-toggle="popover"]').popover();
    </script>