bxSlider でアイテムが少し見切れるような実装をする方法

まずは実装から

こんな感じに実装する必要があったんですが、オプションで提供されているわけでもなかったので、色々いじくった結果です。

コツ

デモでは 4 つのアイテム + 1つ見きれ という感じでやるために、こんなオプションを渡しました。

{
  slideWidth: 64,
  minSlides: 1,
  maxSlides: 4
}

そして、スタイルで li の幅を小さくします。

.item-partly li {
  width: 58px !important; // 適当な感じで小さくする
}

.item-partly は ul につける想定ですが、要するにリストの li の幅を制御できればいいのです。

要素が少し小さくなるので、適宜表示したい幅は調整してください。

これで、ページを送った時にも見きれたアイテムが一番左にきちんとくるようにできました。結構簡単でよかった。

ただし、見切れは右側だけしか実現できません。

さらに、ループ時に最後表示が遅れる要素がでたり、ループの最初と最後の部分の挙動が微妙です。

その辺を割りきって使う小手先テクニックでした。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする