タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
どうも、まさとらん（@0310lan）です！ 今回は、誰でも簡単に美しいオンラインドキュメントを無料で作成できるWebサービスをご紹介します！ 多彩なテンプレートやすぐに使えるコンテンツなどが搭載されているので、ちょっとしたドキュメントを作ってシェアするのに重宝します。また、カスタマイズ次第では個人サイトなどのWebページを公開する用途にも活用できるので、ご興味ある方はぜひ参考にしてください！ 【 Slick 】 ■「Slick」の使い方 それでは、「Slick」をどのように使えばいいのか詳しく見ていきましょう！ まずはサイトのトップページから【Sign up】ボタンをクリックして、無料のユーザー登録を済ませておきます。 ユーザー名、メールアドレス、パスワードを設定するだけなので簡単です。 （※GoogleやFacebookアカウントでもログイン可能） 以下のようなダッシュボード画面が表示
WordPress化したらslick（スライダー）が動かない？！その原因はjQueryの処理タイミングかも。 | 仙台のウェブ制作会社AndHA
WordPress化したらslick（スライダー）が動かない？！その原因はjQueryの処理タイミングかも。 公開日 : 2021.07.01 最終更新日 : 2023.08.25 コーディング たったの2単語で解決！？！？！？！ 静的HTMLで一度コーディングし終え、よしWordPress化（PHP化）するぞ！ 「あれ、slickが動かない、、、」という経験がありませんか？ ちなみに私の場合、たった一行（というか２単語）書き換えるだけで動くようになりました。 それの原因はズバリ、jQueryの記述方法にありました。 記述方法といっても、headタグ内に記述するとか、bodyの閉じタグ直前に記述するといった「jQueryの処理自体を読み込ませるタイミング」のことではないです。 jQueryが「処理を実行するタイミング」です。 詳しく見ていきましょう。
「スライダーを実装したい！」「でも何を使えばいいの？」という方に朗報です。 この記事ではスライダーを作成するプラグイン「slick」の設定方法から使い方、カスタマイズまでをしっかりばっちり説明していきます。 slickを使えばデザイナーやディレクターの要望にばっちり応えられること間違いなし！（かもしれません。） slick（スリック）とは slickはjQueryベースの、スライダーを作成するためのプラグインです。レスポンシブにも対応し、IE8以上のブラウザであれば完全対応で、カスタマイズの幅も広いため、世界的に利用されています。 また、商用の利用もOK（※ちょっぴり条件があります）なので我々のような制作会社で導入するのにも安心です。 ※slickはMITライセンスというライセンスの中でトップクラスに緩い制限のライセンスを採用しています。MITライセンスはざっくりいうと「このソフトウェアは
GitHub - mifi/editly: Slick, declarative command line video editing & API
Editly is a tool and framework for declarative NLE (non-linear video editing) using Node.js and ffmpeg. Editly allows you to easily and programmatically create a video from a set of clips, images, audio and titles, with smooth transitions and music overlaid. Editly has a simple CLI for quickly assembling a video from a set of clips or images, or you can use its more flexible JavaScript API. Inspir
【jQuery】スライダープラグイン「slick」実装サンプル集 | 125naroom / デザインするところ（会社）です。
よく見かけるスライダー（自動再生） See the Pen 【jQuery】スライダープラグイン「slick」よく見かけるスライダー（自動再生） by 125naroom (@125naroom) on CodePen. HTMLとjQueryはこちら <div class="sliderArea"> <div class="regular slider"> <div><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt="125naroom"></div> <div><img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt="125naroom"></div> <div><img src="https://125naroo
GitHub - ChrisPenner/slick: Static site generator built on Shake configured in Haskell
Want to get started quickly? Check out the Slick site template! Slick is a static site generator written and configured using Haskell. It's the spiritual successor to my previous static-site generator project SitePipe; but is faster, simpler, and more easily used in combination with other tools. Slick provides a small set of tools and combinators for building static websites on top of the Shake bu
なんかいい感じのマンガビューア ～slick-custom～とは 「なんかいい感じのマンガビューア～slick-custom～」は、個人サイト向けのWEB漫画ビューアスクリプトです。 htmlは1作品につき1ページでOK！複数枚の画像を自動で連番表示させるので、ページの数だけhtmlを作らずに済みます。 PCの大きな画面では見開き表示、スマホの小さな画面では単ページ表示に自動で切り替わるレスポンシブ仕様です。 スワイプ操作にも対応しているので、スマホ対応にお悩みの方にもぴったり！ ☆土台としてjQueryスクリプトの「slick」を使用しています。slick本体とjQuery本体はCDNで外部から読み込んでるので別途ダウンロードは不要です。 自分のサイトに設置してブラウザ上で動かせてレスポンシブでスワイプ対応のマンガビューアが欲しすぎて頑張りました！ 可能な限り最低限の編集で動くようにして
【jQuery】slickの使い方とよく使うサンプル集 公開日 : 2022.07.04 最終更新日 : 2023.11.07 コーディング スライダーのプラグインは数多くありますが、その中でもよく使われる「slick」について、使い方とよく使う実装方法についてご紹介します。 今回紹介するサンプルを組み合わせることで様々なカスタマイズにも対応できるかと思いますので、是非参考にしてみてください！ slickの導入方法slickを使うためには、以下2つの方法があります。 ファイルをダウンロードして読み込む方法CDNを使って読み込む方法なお、slickを利用するためはjQuery本体の読み込みも必要になるので、忘れずに！ slickファイルをダウンロードして使う場合公式サイトにアクセスし「get it now」をクリックします。 「Download Now」をクリックすると、skickのファイル
スライダーはスライドが切り替わるだけでなく、常に定速で流れ続ける無限ループスライダーも作る事が出来ます。 今回はslickを使って無限ループスライダーを作る方法をコードとデモを使って解説していきます（逆方向も可能） slickの基本的な使い方と、slickを使うのに必要なjQueryの使い方については以下の記事を参照下さい。
昨日Twitterのタイムラインで下記を見かけました slickのがたつきの件、NxWorldさんのサイトのサンプルでもなってるからやっぱり自分だけじゃないな。／https://t.co/EJ5swAVGAu — ヤマシタレイコ｜OOOPEN (@OOOPEN_jp) January 30, 2019 以前このプラグインを使った時に同じような不具合に直面し、自力で何とかした経験があるので、同じように困っている方の参考になれば。。 現象 ここのスライドのNextとかPrevを押すと分かりますが、2周目の最初のスライドに来た時と、最初のスライドから最後のスライドに戻る時にがたつきます。 これは.slick-currentというクラスが来た時に透過にしたり大きくしたりしているのですが、がたつくパターンの場合クラスが付与されるまでにDOMの操作が発生しその処理時間の差でがたつくのだと思います。 対
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> ス
スライダーで、PCではスライドを3枚表示していたけど、スマホでは1枚にしたいといったケースがあると思います。 slickのオプションを使ってブレイクポイントを指定すれば、スライドの表示枚数を変えることが出来ます（ブレイクポイントは複数指定できます）。 今回は、コピペ可能なコードとサンプル（デモ）を使って解説していきます。 slickの基本的な使い方と、slickを使うのに必要なjQueryの使い方については以下の記事を参照下さい。
slickでスライダーを作る時にいちいち同じサイズで画像を作るのがめんどくさい！と思ったことはありませんか？ バナーのようなデザインのメインビジュアルの場合は、サイズを合わせて作ればいいのですが、風景画像をスライドで背景にしたい場合はわざわざ同サイズで作るのが面倒です。 というわけで今回は「slickスライダーで画像サイズがバラバラの時の対処法！」を2つご紹介します！ slickの設置がされているという前提で進めていきますので、「まだ！」という方は、下記の記事で紹介してますのでslickを準備してください。 簡単にスライダーを設置！JQueyプラグイン「slick」の使い方【jQuery】
こんにちは。現役フロントエンドエンジニアのd3nskです。 今回は有名なjQueryプラグインのslickスライダーについての記事です。 カルーセルスライダー系のプラグインでSwiperと並んでよく使われるslickですが、慣れていないとうまく起動しないことがあります。 今回はslickを実装する際に初心者の方がやりがちなミスと解決方法をまとめてみました。 slickの実装方法を知りたい方はこちらの記事をご覧ください。 まずデベロッパーツールを起動して、原因究明の準備 原因究明のために、ブラウザ「Google Chrome」のデベロッパーツールを使っていきます。 デベロッパーツールを使うと、HTMLやJavaScriptで起きているエラーやその他情報が一目で分かるので、サイトの検証には必須のツールです。F12キーを押してデベロッパーツールを起動し、コンソールを見ながら原因を探っていきましょ
Googleスプレッドシートでチケット販売も可能なイベントページを作成出来る・「Slick.events」 - かちびと.net
Slick.eventsはGoogleスプレッドシートでチケット販売も可能なイベントページを作成出来るWebアプリです。 テキスト等やフォーム、参加者等をGoogleスプレッドシートで管理してチケット販売も出来るようにする、というもの。 Googleアカウントさえあれば無料でチケット販売サイトを手軽に作成できます。決済はStripeやGoCardlessが使われるみたいです。 上SSのように編集はGoogleシートがベースなので日本語でも問題ありませんが、まぁ実際に使うと言うよりはこういうサービスが日本向けにあると便利かも、という備忘録的な記事として書きました。 Slick.events
スライダーを使用したい時、手っ取り早く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を使用してスライダーを実装したいが、スライドが滑らかに流れない。。カクつかずに滑らかに流れすにはどうすればいいの？」 という疑問に答えます。 slick.jsを滑らかに動かした例 実際にslick.jsを使用して複数の画像を滑らかにスライドさせた状態をお見せします。 デモサイト このように滑らかにスライドさせていきます。 slick.jsでスライドを滑らかに動かすオプション 「slick.js」には様々なオプションがあり、とても便利です。 「slick.js」の詳しいオプションの使い方は「slick.jsのオプション一覧」からご確認ください。 今回はこのオプションの「autoplaySpeed」「cssEase」を使用してスライドを滑らかにしていきます。 実際にjsファイルに記述する場合は以下のように記述します。 ＊clas
スマホ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
【slick】カスタマイズ用オプションまとめ一覧
今回はそんな疑問にお答えします。 スライダーを簡単に実装できるプラグインとして有名なslickですが、オプションが色々あり、かなり幅広くカスタマイズ可能です。 slickの基本的な使い方と、slickを使うのに必要なjQueryの使い方については以下の記事を参照下さい。
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とはslickとはスライドショーが作れるjQueryのプラグインです。オプションの種類が豊富で、レスポンシブにも対応しているのが特徴です。 slickはスライダー系のプラグインの中でも幅広く使われていて、slickを使った応用事例が数多くあります。 ここからはslickを使うための準備と、基本的な使い方について解説します。 slickの導入方法slickの導入方法は2パターンあります。 ローカルファイルにダウンロードCDNを利用するslickを導入する場合はCDNを利用するのが簡単です。ファイルをダウンロードしなくても公式サイトの記述をheadタグやbodyタグにコピー&ペーストするだけで使えるからです。 ただし、自社のサーバーにslickファイルを保存し利用する場合はローカルファイルにダウンロードしましょう。 1. ローカルファイルをダウンロードする場合 slickの公式サイト
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を使っていたら「Uncaught TypeError: Cannot read property ‘unslick’ of undefined」というエラーが出たので今回はその直し方を解説します。 unslickエラーが出る条件どうやらspもしくはpcのいずれかだけslickを発動させようとするとこのエラーが出るみたいです。とは言えエラーが出ない場合もあり、正直詳しくはよくわかりませんm(__)m リサイズしまくってpcとsp表示を切り替えたりリロードすると出たり出なかったりします。 僕はこんな感じで書いていたらエラーが出ました。 $(window).resize(function () { // spのみ if ($(window).width() < 768) { $('.slider').slick({ // オプション }); } else { // pcのみ $('.s
slick フェードスライド 実装サンプル
メインのFV画像でよく使用されている、画像が少しずつ拡大（ズーム）アニメーションしてフェードで画像が切り替わるスライドのslickを使用しての実装サンプルとコードを紹介します。 特徴 レスポンシブ フェード遷移 目次 フェードスライド ズームフェードスライド 前提 デモでは下記のCSSとJavascriptファイルを読み込んでいます。 <!-- CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css"> <!
カルーセル 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>スライド１</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で実装するサンプルを作成してみました。 See the Pen dyMobjq by OKD (@OKD) on CodePen. 実際は矢印部分をちゃんと作り込んだり、スライド枚数が少ない場合の処理、そしてレスポンシブ対応など作り込んでいきますが挙動のご参考までに。
javascriptでPC、スマートフォンを判定し、PC時は「slick('unslick')」で無効にし、スマートフォン時はslickを再実行する。 「slick」の処理をPC時とスマートフォン時で切り替える。 jQueryのスライダープラグイン「slick」で、スマートフォン時のみ「slick」を有効にし、PCでは無効にする方法をご紹介します。 DEMOはこちら
この記事は 2018年4月24日 に投稿されました。 内容が古いかもしれません。ご注意ください。 ※最後に更新されたのは 2019年2月5日 です。 2018/8/10追記 修正忘れてました。 説明がややこしくなりそうなので別の記事で書きます。 こちら。 2018/5/2追記 すみませんこの方法IE11だとはみ出した部分が表示されてしまい、ちらつきが出ちゃって使えませんでした、、、 全画面背景になら使えると思います。 BxSliderを使ったらもっと簡単にできるかも。今度まとめます。。 経緯 この動きをしようと思ったけど参考サイトのJS覗いたら処理が難しすぎてハァ？ってなったのでもっと簡単にできるだろ！！！と思って考えた結果。プラグインの機能の範囲で済ましてるし自分ではこっちのが良い。 initの発火タイミングが.slickより前っていうのがめっちゃわかりにくかった。 要点 ズームアウトの
![[jQuery]Slickで画像をズームアウトさせながらスライドさせる | ヨネコウェブ](https://cdn-ak-scissors.b.st-hatena.com/image/square/cc0bc120cd8eb3e7a12866d6e7e414a0339456b6/height=288;version=1;width=512/https%3A%2F%2Fyonecoweb.com%2Fcms-v202306%2Fwp-content%2Fthemes%2Fwp_ync_006%2Fassets%2Fimages%2Fblog%2Fogp_blog.jpg)
slickには様々なオプションがありますが、ズームさせるオプションはありません。 しかし、CSSアニメーションを使えば可能です。 今回はslickを使ってズームしながらフェードで切り替わるスライダーをご紹介します。 slickの基本的な使い方と、slickを使うのに必要なjQueryの使い方については以下の記事を参照下さい。
Installing the Slick 'Material Shell' Extension on Ubuntu is Now Easier - OMG! Ubuntu
Installing the Slick ‘Material Shell’ Extension on Ubuntu is Now Easier It’s been a year since we showcased the Material Shell GNOME extension on this site and in that time the add-on has matured greatly. The developer behind the add-on recently shared a ‘one year update’ with Linux customisation fans on Reddit, announcing that the add-on is now considered stable and is available to install direct
中央に1枚表示されていて、左右に少し見えているスライダーは比較的良くあるタイプかと思います。 今回はslickでオプションの『centerMode』を使って実装する方法を解説していきます。 slickの基本的な使い方と、slickを使うのに必要なjQueryの使い方については以下の記事を参照下さい。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
完全無料！誰でも美しいオンラインドキュメントやWebサイトを作成できる「Slick」を使ってみた！ -
slick sliderの使い方からカスタマイズまで【スライダープラグイン決定版】 | 東京のホームページ制作 / WEB制作会社 BRISK
なんかいい感じのマンガビューア～slick-custom～
【jQuery】slickの使い方とよく使うサンプル集 | 仙台のウェブ制作会社AndHA
【slick】横方向に流れ続ける無限ループスライダーを作る方法
slickカルーセルのcenterModeで中央以外を透過にした場合に2周目からがたつく - Qiita
【slick】レスポンシブ対応！ブレイクポイントでスライドの表示枚数を変える方法
高さ変更！slickスライダーで画像サイズがバラバラの時の2つの対処法！【jQuery】
【jQuery】slickスライダーが動かないときの原因と解決方法
slick.jsを使用してページャーに数字を適用する - Qiita
「slick.js」を滑らかに動かす方法を解説。jqueryスライダーを完璧に！ | WATSUNBLOG
Niishi Kubo | GitLab,Limeboard on X: "クレカ情報漏洩の件、技術的な原因特定はこの投稿が一番分かりやすかった。 slick.min.js（画像切り替えのライブラリ）を改ざんされてマルウェアが仕込まれて、クレカ情報はサーバーに送信される前にフロントエンドから外部に送信されていたらしい。Content-Security-Policy https://t.co/AJuYi6Xr7k"
【jQuery】slickの使い方とカスタマイズ・オプションの解説 | ZeroPlus Media
slickのCannot read property ‘unslick’ of undefinedエラーを直す方法
片側だけはみ出たデザインのカルーセルスライダーをslickで実装する方法 | oku-log
slickをスマートフォン時のみ有効にする - WEB制作の解決策FAQブログ
[jQuery]Slickで画像をズームアウトさせながらスライドさせる | ヨネコウェブ
【slick】ズーム(拡大)しながらフェードで切り替える方法
【slick】centerMode(センターモード)で左右が少し見切れているスライダーを作る方法
gayasan.exblog.jp
www.iezo.net
www.tetsu7017.com
www.softel.co.jp
www.asahi.com
zenn.dev/d2c_mtech_blog