並び順

ブックマーク数

期間指定

  • から
  • まで

1 - 7 件 / 7件

新着順 人気順

slick.jsの検索結果1 - 7 件 / 7件

タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。

slick.jsに関するエントリは7件あります。 検索slickjs などが関連タグです。 人気エントリには 『slick.jsを使用する時に注意するポイント』などがあります。
  • slick.jsを使用する時に注意するポイント

    便利なプラグインslick.jsですが、使用時に注意する点がいくつかあります。 今回はslick.jsを使う時に注意するポイントを上げていきます。 スライドの間隔(margin)の調整は、スライダー直下の<li>タグで行わない。 これは結構重要です。 これをやるとスライドの位置がズレてしまって、スライダーが正常に動かなくなります。 例えば下記のようにslickを設置した場合に、スライドの間隔(margin)を入れたいと思って、<li>タグに margin や padding の style を独自に適用させてはいけないです。 <script> $('#slider').slick(); </script> <ul id="slider"> <li> <!-- 省略 --> </li> <li> <!-- 省略 --> </li> <li> <!-- 省略 --> </li> </ul> ス

      slick.jsを使用する時に注意するポイント
    • slick.jsを使用してページャーに数字を適用する - Qiita

      スライダーを使用したい時、手っ取り早くslickを使っています。便利ですよね。 ある時スライドをポップアップさせて動画を表示させる依頼がありました。 仕様としては 「ページャーには第○章と順に入れてね」 「スマホの時はページャーをドットにしてね」 というもので、やり方を調べて実装しました。以下備忘録です。 ##slickでページャーを変更できる「customPaging」 「customPaging」というオプションで自由に変更できます。 $('.c5-slider').slick({ infinite: true, slidesToShow: 1, slidesToScroll: 1, draggable: false, arrows: true, prevArrow: '<span class="prev-arrow">前</span>', nextArrow: '<span clas

        slick.jsを使用してページャーに数字を適用する - Qiita
      • 「slick.js」を滑らかに動かす方法を解説。jqueryスライダーを完璧に! | WATSUNBLOG

        みなさんこんにちは!ワトスンです。 今回は、、 「slick.jsを使用してスライダーを実装したいが、スライドが滑らかに流れない。。カクつかずに滑らかに流れすにはどうすればいいの?」 という疑問に答えます。 slick.jsを滑らかに動かした例 実際にslick.jsを使用して複数の画像を滑らかにスライドさせた状態をお見せします。 デモサイト このように滑らかにスライドさせていきます。 slick.jsでスライドを滑らかに動かすオプション 「slick.js」には様々なオプションがあり、とても便利です。 「slick.js」の詳しいオプションの使い方は「slick.jsのオプション一覧」からご確認ください。 今回はこのオプションの「autoplaySpeed」「cssEase」を使用してスライドを滑らかにしていきます。 実際にjsファイルに記述する場合は以下のように記述します。 *clas

          「slick.js」を滑らかに動かす方法を解説。jqueryスライダーを完璧に! | WATSUNBLOG
        • スマホOK!スライダーにYouTubeなど自動再生動画を使う方法(slick.js) | 株式会社ウェブ企画パートナーズ

          サイトのメインビジュアルで動画がを再生するのは最近のトレンドとなっています。 今回はさらにアレンジして自動再生動画を使ったスライダーの作成に挑戦してみました。その際の知見をご紹介いたします。 <ul class="slider"> <li><a href="#"><video src="https://wk-partners.co.jp/homepage/wp-content/old-uploads/entryimg/Pexels-Videos-123540.mp4" autoplay loop muted></a></li> <li><a href="#"><video src="https://wk-partners.co.jp/homepage/wp-content/old-uploads/entryimg/Pexels-Videos-2629-1.mp4" autoplay loo

            スマホOK!スライダーにYouTubeなど自動再生動画を使う方法(slick.js) | 株式会社ウェブ企画パートナーズ
          • slick.jsのdots、arrowsのカスタマイズ方法

            以前にslick.jsに関することを2つ書きましたが、今回はもっと絞って「arrows」と「dots」のカスタマイズ方法について紹介します。 以前のslick.jsに関する記事は下記の2つです。 よく使うjQueryプラグイン① 「slick.js」 「slick.js」の使い方応用編 追加で「slick.jsでサムネイル付きスライダーを作成する」も書きました。サムネイルを固定した場合のスライダーのサンプルも紹介しています。 arrowsのカスタマイズ方法 arrowsのカスタマイズ方法はすごく簡単です。これはカスタマイズができるようにもともとオプションが用意されています。 オプションについてはこちらから確認してください。 slick.jsのオプションの箇所に下記のように記述すれば好きな画像をarrowsに設定できます。 $(function(){ $("#slider").slick({

              slick.jsのdots、arrowsのカスタマイズ方法
            • slick.jsのスライダーの矢印をカスタマイズする方法

              ①デフォルトの矢印付きのslickスライダーを実装わかりやすいようにデフォルトの矢印付きのslickスライダーを作成して、 そこから変更を加えていきます。 <div class="slider"> <div><img src="./img/slider_img01.jpg"></div> <div><img src="./img/slider_img02.jpg"></div> <div><img src="./img/slider_img03.jpg"></div> </div> <style> /*--スライダーの位置とサイズ調整--*/ .slider{ width:70%; margin:0 auto; } /*--------画像サイズ調整---------*/ img{ width:100%; } /*-----------height調整----------*/ .slick

                slick.jsのスライダーの矢印をカスタマイズする方法
              • カルーセル Slick.js に文字を重ねる | cocotiie

                <div class="slick-image"> <div class="slick-outer"> <a href="#"><img src="<?php echo site_url(); ?>/wp-content/uploads/2020/04/画像.jpg" alt="sample"></a> <div class="slick-content"> <h2>スライド1</h2> <p>スライドの見本スライドの見本スライドの見本スライドの見本</p> </div> </div> <div class="slick-outer"> <a href="#"><img src="<?php echo site_url(); ?>/wp-content/uploads/2020/04/画像.jpg" alt="sample"></a> <div class="slick-content">

                  カルーセル Slick.js に文字を重ねる | cocotiie
                1

                新着記事