owl carlousel　img幅を変更したい

oml carlouselを小さめに実装したいのですが、画面いっぱいに画像が広がってしまいます。
cssでimg幅を変えてみたりしましたがディベロッパーツールで確認するとowl.carlousel.min.cssのwidth100%が効いています。どのように変更したら良いかわかりません。
オンラインスクールで学びましたが、途中で期間が終了してしまい詳しく学べませんでした。
宜しくお願い致します。

発生している問題・エラーメッセージ

該当のソースコード

<html>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/my.css">
  <link rel="stylesheet" href="jquery/owlcarousel/assets/owl.carousel.min.css">
  <link rel="stylesheet" href="jquery/owlcarousel/assets/owl.theme.default.min.css">
 
  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
  
  <link rel="icon" type="image/png" href="images/favicon.png">

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  
  <script src="jquery/owlcarousel/owl.carousel.min.js"></script>
  
  <script src="jquery/owlcarousel/carousel.js"></script>
  
    </head>

<body>
    
    <header>
      
      <div class="header_in">
       <i aria-label="お問い合わせ" class="fas fa-envelope fa-3x mail"></i>
      </div> 
      
      <div class="owl-carousel owl-item">
            <div><img class="flower_move" src="images/hanataba.jpg" alt="img_flower"></div>
            <div><img class="flower_move" src="images/hanataba-2.jpg" alt="img_flower"></div>
            <div><img class="flower_move" src="images/hanataba-3.jpg" alt="img_flower"></div>
      </div>
    </header>
```  <!-- Mobile Specific Metas -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
    <!-- CSS -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/my.css">
  
  <!--carousel-->
  <link rel="stylesheet" href="jquery/owlcarousel/assets/owl.carousel.min.css">
  <link rel="stylesheet" href="jquery/owlcarousel/assets/owl.theme.default.min.css">
 
  <!--fontawesome-->
  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
  
   <!-- Favicon -->
  <link rel="icon" type="image/png" href="images/favicon.png">
  
  <!--javascript-->
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <!--carousel-->
  <script src="jquery/owlcarousel/owl.carousel.min.js"></script>
  
  <!-- Owl Carouselを動作させるために追加 -->
  <script src="jquery/owlcarousel/carousel.js"></script>
  
    </head>


<body>
    
    <header>
      
      <div class="header_in">
       <i aria-label="お問い合わせ" class="fas fa-envelope fa-3x mail"></i>
      </div> 
      
      <div class="owl-carousel owl-theme">
            <div><img class="flower_move" src="images/hanataba.jpg" alt="img_flower"></div>
            <div><img class="flower_move" src="images/hanataba-2.jpg" alt="img_flower"></div>
            <div><img class="flower_move" src="images/hanataba-3.jpg" alt="img_flower"></div>
      </div>
    </header>

**(scss)**
.owl-carousel .owl-item img {
  
  display: block;
  width: 20vw;
  height: auto;
  
}

**（ディベロッパーツールで確認した時の表示)**
.owl-carousel .owl-item img {
    display: block;
    width: 100%;

行動規範の内容に同意します

回答1件

こんにちは、
CSSではなくJavascriptからオプションでコントロール出来ると思います。
公式サイトから様々なオプションを確認できますよ。
例

Javascript
1$(".owl-carousel").owlCarousel({
2    items: 10, //１０個表示する
3    margin: 20, //間隔を２０px開ける
4    loop: true, //繰り返し表示
5});

投稿2020/06/01 07:44

fake_shibe

総合スコア806

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

owl carlousel　img幅を変更したい

発生している問題・エラーメッセージ

該当のソースコード

関連した質問