web-dev-qa-db-ja.com

スリックカルーセルにカスタムボタンを追加する

スリックカルーセルにカスタムprevおよびnextボタンを適用するにはどうすればよいですか？ .slick-prevおよび.slick-next cssクラスの背景画像を試しました。ドキュメントに従って新しいクラスを追加しようとしましたが、矢印は完全に消えました：

<script type="text/javascript">
$('.big-image').slick({
  dots: false,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  centerMode: true,
  variableWidth: true,
  nextArrow: '.next_caro',
  prevArrow: '.previous_caro'
});
</script>

任意のポインタをいただければ幸いです。

javascriptcssslick.js
23
rorykoehler

私はこれが古い質問であることを知っていますが、誰かを助けることができるかもしれません。ドキュメントをもう少し読むまで、これも私を困惑させました：

prevArrow文字列（html | jQueryセレクター）|オブジェクト（DOM node | jQueryオブジェクト）Previousノードを選択したり、「Previous」矢印のHTMLをカスタマイズしたりできます。

nextArrow文字列（html | jQueryセレクター）|オブジェクト（DOM node | jQueryオブジェクト）Nextノードを選択するか、「Next」矢印のHTMLをカスタマイズできます。

これは私がボタンを変更した方法です..完璧に機能しました。

  $('.carousel-content').slick({
      prevArrow:"<img class='a-left control-c prev slick-prev' src='../images/shoe_story/arrow-left.png'>",
      nextArrow:"<img class='a-right control-c next slick-next' src='../images/shoe_story/arrow-right.png'>"
  });
74
tallgirltaadaa

ドキュメントから

prevArrow/nextArrow

タイプ：string (html|jQuery selector) | object (DOM node|jQuery object)

一部のサンプルコード

$(document).ready(function(){
    $('.slick-carousel-1').slick({
        // @type {string} html
        nextArrow: '<button class="any-class-name-you-want-next">Next</button>',
        prevArrow: '<button class="any-class-name-you-want-previous">Previous</button>'
    });

    $('.slick-carousel-2').slick({
        // @type {string} jQuery Selector
        nextArrow: '.next',
        prevArrow: '.previous'
    });

    $('.slick-carousel-3').slick({
        // @type {object} DOM node
        nextArrow: document.getElementById('slick-next'),
        prevArrow: document.getElementById('slick-previous')
    });

    $('.slick-carousel-4').slick({
        // @type {object} jQuery Object
        nextArrow: $('.example-4 .next'),
        prevArrow: $('.example-4 .previous')
    });
});

スタイリングに関する少しの注意

Slickが新しいボタンを知ったら、それらを心ゆくまでスタイルできます。上記の例を見ると、class name、id name、さらにはelementに基づいてターゲットを設定できます。

誰かがJSFiddleと言った？

11
Kenneth Stoddard

任意のアイコンフォントライブラリのアイコンを使用する場合は、jsファイルのスライダーを呼び出すときにオプションでこれを試すことができます。

prevArrow: '<div class="class-to-style"><span class="fa fa-angle-left"></span><span class="sr-only">Prev</span></div>',

nextArrow: '<div class="class-to-style"><span class="fa fa-angle-right"></span><span class="sr-only">Next</span></div>'

ここで、「fa」はFontAwesomeアイコンフォントライブラリに由来します。

10
Xuwel Khan

Bootstrap 3を使用している場合、Glyphiconsを使用できます。

.slick-prev:before, .slick-next:before {
    font-family: "Glyphicons Halflings", "slick", sans-serif;
    font-size: 40px;
}

.slick-prev:before { content: "\e257"; }
.slick-next:before { content: "\e258"; }
6
Yes Barry

デフォルトのCSSクラスを使用してスタイルを追加できないのはなぜですか？

.slick-next {
  /*my style*/
  background: url(my-image.png);
}

そして

.slick-prev {
  /*my style*/
  background: url(my-image.png);
}

シンプルなbackgroundcssプロパティを使用していますか？

例： http://jsfiddle.net/BNvke/1/

Font Awesomeも使用できます。 CSS疑似要素を忘れないでください。

また、jQueryを忘れないでください。要素の置換、クラスの追加などができます。

3
Aivaras Čenkus

Sassを使用している場合は、以下の変数を設定するだけで、他のフォントが提供するアイコンを使用できます。

$slick-font-family:FontAwesome;
$slick-prev-character: "\f053";
$slick-next-character: "\f054";

これらは、slickのテーマcssで使用されるフォントファミリを変更し、prevおよびnextボタンのUnicodeも変更します。この例では、FontAwesomeの左シェブロンアイコンと右シェブロンアイコンを使用します。

設定可能な他のsass変数は Slick Githubページ

2
par

これらの他の多くの項目が機能しなかったとき、これは私のために働いた：

.slick-prev:before {
  content: url('your-arrow.png');
}
.slick-next:before {
  content: url('your-arrow.png');
}
2
Buck3000

それは非常に簡単です。以下のコードを使用してください。ここではfontawesomeアイコンを使用しましたが、画像やその他のアイコンのコードとして何でも使用できます。

$(document).ready(function(){
    $('.slider').slick({
        autoplay:true,
        arrows: true,
        prevArrow:"<button type='button' class='slick-prev pull-left'><i class='fa fa-angle-left' aria-hidden='true'></i></button>",
        nextArrow:"<button type='button' class='slick-next pull-right'><i class='fa fa-angle-right' aria-hidden='true'></i></button>"
    });
});
1
Chamon Roy

ボタンにiconフォントを使用しているためです。この画像に見られるように、「スリック」フォントを使用しています。

enter image description here

基本的に、文字「A」をアイコンの形にし、文字「B」を別の形にします。

例えば：

enter image description here

アイコンのフォントについてもっと知りたい場合ここをクリック

アイコンを変更する場合は、ボタンコード全体を置き換えるか、www.fontastic.me独自のアイコンフォントを作成します。その後、現在のフォントファイルを置き換えると、独自のアイコンが表示されます。

1
mrpinkman

@tallgirltaadaaによる回答のバリエーションでは、キャレットの形で独自のボタンを描画します。

var a = $('.MyCarouselContainer').slick({
    prevArrow: '<canvas class="prevArrowCanvas a-left control-c prev slick-prev" width="15" height="50"></canvas>',
    nextArrow: '<canvas class="nextArrowCanvas a-right control-c next slick-next" width="15" height="50"></canvas>'
});

function drawNextPreviousArrows(strokeColor) {
    var c = $(".prevArrowCanvas")[0];
    var ctx = c.getContext("2d");
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.moveTo(15, 0);
    ctx.lineTo(0, 25);
    ctx.lineTo(15, 50);
    ctx.lineWidth = 2;
    ctx.strokeStyle = strokeColor;
    ctx.stroke();
    var c = $(".nextArrowCanvas")[0];
    var ctx = c.getContext("2d");
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.moveTo(0, 0);
    ctx.lineTo(15, 25);
    ctx.lineTo(0, 50);
    ctx.lineWidth = 2;
    ctx.strokeStyle = strokeColor;
    ctx.stroke();
}
drawNextPreviousArrows("#cccccc");

その後、CSSを追加します

.slick-prev, .slick-next 
    height: 50px;s
}
0
mhenry1384