アローアイコン付きレスポンシブ対応のスライダー

アローアイコン付きでレスポンシブ対応のスライダーです。ただ、画像にしか対応していません…

iPhone5
iPhone7
iPad
Full
×
クラス名
ボーダー色

Source Code

右上の「コピー」からご利用ください。

<div class="my-parts">
  <ul class="my-parts-items">
    <li class="my-parts-item"><img src="https://haniwaman.com/wp-content/uploads/2018/02/slide_960_300.jpg"></li>
    <li class="my-parts-item"><img src="https://haniwaman.com/wp-content/uploads/2018/02/slide_960_300_2.jpg"></li>
    <li class="my-parts-item"><img src="https://haniwaman.com/wp-content/uploads/2018/02/slide_960_300_3.jpg"></li>
  </ul>
  <div class="my-parts-prev"></div>
  <div class="my-parts-next"></div>
</div>
.my-parts {
  position: relative;
  max-width: 100%;
  width: 100%;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  overflow: hidden;
}

.my-parts-items {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}
.my-parts-items .my-parts-items::after {
  display: block;
  content: '';
  clear: both;
}

.my-parts-items .my-parts-item {
  float: left;
  text-align: center;
}

.my-parts-items .my-parts-item img {
  width: 100%;
  height: auto;
  box-shadow: none;
}

.my-parts-next {
  position: absolute;
  top: 50%;
  right: .8em;
  cursor: pointer;
  width: 24px;
  height: 24px;
  font-size: 24px;
  border-right: 0.24em solid #E91E63;
  border-bottom: 0.24em solid #E91E63;
  transform: translateY(-50%) rotate(-45deg);
  background: transparent;
}
.my-parts-prev {
  position: absolute;
  top: 50%;
  left: .8em;
  cursor: pointer;
  width: 24px;
  height: 24px;
  font-size: 24px;
  border-right: 0.24em solid #E91E63;
  border-bottom: 0.24em solid #E91E63;
  transform: translateY(-50%) rotate(135deg);
  background: transparent;
}
$(window).on('load', my_parts);

function my_parts() {

  slideWidth = $('.my-parts').width();
  slideHeight = $('.my-parts-item').height();
  imgSize = getImageSize($('.my-parts-item > img').attr('src'));
  slideAspect = imgSize[1] / imgSize[0] * 100;

  slideNum = $('.my-parts-item').length;
  slideSetWidth = slideWidth * slideNum;
  slideSetHeight = slideHeight;

  arrow = slideWidth / 30;

  $('.my-parts').css('padding-top', slideAspect + '%');
  $('.my-parts-items').css('width', slideSetWidth);
  $('.my-parts-item').css('width', slideWidth);
  $('.my-parts-next').css('width', arrow).css('height', arrow).css('font-size', arrow);
  $('.my-parts-prev').css('width', arrow).css('height', arrow).css('font-size', arrow);

  var slideCurrent = 0;
  var sliding = function() {

    if (slideCurrent < 0) {
      slideCurrent = slideNum - 1;
    } else if (slideCurrent > slideNum - 1) {
      slideCurrent = 0;
    }
    $('.my-parts-items').stop().animate({
      left: slideCurrent * -slideWidth
    });
  }

  $('.my-parts-prev').click(function() {
    slideCurrent--;
    sliding();
  });
  $('.my-parts-next').click(function() {
    slideCurrent++;
    sliding();
  });

  $(window).on('resize', function() {
    slideWidth = $('.my-parts').width();
    slideSetWidth = slideWidth * slideNum;
    $('.my-parts-items').css('width', slideSetWidth);
    $('.my-parts-item').css('width', slideWidth);

    arrow = slideWidth / 30;
    $('.my-parts-next').css('width', arrow).css('height', arrow).css('font-size', arrow);
    $('.my-parts-prev').css('width', arrow).css('height', arrow).css('font-size', arrow);
  });

}

function getImageSize(src) {
  var img = new Image();
  img.src = src;
  return [img.width, img.height];
}
関連パーツ

Webパーツ屋とは?

HTMLとCSSをコピペで貼り付ければ実装できるコードをストックしているところです。「このデザインってどうやって実装するんだっけなぁ。。。」と調べる無駄な時間や自分で1からコーディングする時間を短縮することが目的です。

コーディングなんて所詮はデザインにそってHTMLやCSSを当てはめていくだけの単純作業です。当サービス「Webパーツ屋」をご活用いただきスピーディなコーディングを行なっていきましょう!

使い方について、詳しくは以下の記事で紹介しています。
コピペで簡単にコードを挿入できる「Webパーツ屋」というサービスを作りました!

免責事項

  • すべての環境において同一の表示になるとは限りません。環境に応じてコードは書き換えてください。
  • 当サイト「Webパーツ屋」内のコードは自由に利用していただいて構いませんが、使用したことで何かしらのトラブルが発生しても、管理人のわたしは一切の責任を負わないことをご了承ください。
  • 基本的にはChromeでしか動作確認していません...。