BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] フレックススライダーを使用して、レスポンシブな全幅固定高さのカルーセル画像スライダーを作成します。

2022-02-16 06:54:37

質問

現在制作中のウェブサイトのトップページに、全幅固定高さのカルーセル画像スライダーを作成しようとしています。

つまり、画像は固定高さ（カルーセルの高さに一致（幅は関係ない））に拡大縮小され、ページ自体の動きに合わせてレスポンシブに拡大縮小されます。 しかし、私はスライダーをより軽量に、よりシンプルにしたいのです。

これまでの私のコードは以下の通りです。

(以下はヘッド) 

<head>
<!-- Flex Slider API JS -->
    <link rel="stylesheet" href="flexslider.css" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script src="jquery.flexslider.js"></script>
    <script type="text/javascript" charset="utf-8">
      $(window).load(function() {
        $('.flexslider').flexslider({
            animation: "slide",
            animationLoop: false,
            itemWidth: 360,
            itemMargin: 5,
            minItems: 2,
            maxItems: 4
        });
      });
    </script>
<!-- End of FlexsliderAPI JS -->
</head>

以下は本文です。 

<body>
    <!-- Placement of Flex Slider -->
    <div class="flex-container">
        <div class="flexslider">
          <ul class="slides">
            <li>
              <img src="../../local/images/slide1.JPG" />
            </li>
            <li>
              <img src="../../local/images/slide2.JPG"/>
            </li>
            <li>
              <img src="../../local/images/slide3.JPG" />
            </li>
            <li>
              <img src="../../local/images/slide 5.jpg" />
            </li>
          </ul>
        </div>
    </div>
    <!-- End placement of FlexSlider -->
</body>

そして、そのCSSがこちらです。 

.flex-container {
width: 100%;
height: 300px;
}
background-color: red;
.flex-container ul {
margin: 0px;
padding: 0px;
}
.flex-container li {
list-style: outside none none;
display: inline;
}
.flexslider .slides img {
width: inherit;
max-height: inherit;
}

ありがとうございました。- コーディ

解決方法は？

<ブロッククオート

高さ方向の境界線にスナップしない

フレックススライダーには高さをどうこうする機能はないようですね。同じような大きさのサムネイルを作成するか、CSSで高さを強制するかして、すべての要素の高さが同じであることを確認してください。また itemWidth を設定することで、引き伸ばしを回避することができます。

ナビゲーションを表示しない

あなたのHTMLには、ナビゲーション要素がありません。ナビゲーションオプションを渡すなどして、設定する必要があると思います。 

controlNav: true,
directionNav: true,
prevText: "Previous",
nextText: "Next",

offercardが使用する構成は。 

slideshowSpeed:7000,
animation:'slide',
controlNav:true,
directionNav:true,
pauseOnHover:true,
direction:'horizontal',
reverse:false,
animationSpeed:2000,
prevText:"&lt; PREV",
nextText:"NEXT &gt;",
easing:"linear",
slideshow:true,
itemWidth:800,
minItems:1,
itemMargin:0

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します