猫头鹰旋转木马滑动幻灯片使元素更高

时间:2020-07-31 17:22:08

标签: javascript html jquery css owl-carousel

enter image description here

enter image description here

正在滚动的传入幻灯片会更改高度,但仅在滚动时才恢复到应该的高度。

$(document).ready(function() {

  $('.owl-carousel').owlCarousel({
    loop: true,
    items: 4,
    responsiveClass: true,
    responsive: {
      0: {
        items: 4,
        nav: true
      },
      600: {
        items: 3,
        nav: false
      },
      1000: {
        items: 5,
        nav: true
      }
    }
  })
});
.slide {
  width: 240px;
  height: 350px;
}
<div class="container">
  <div class="owl-carousel owl-theme">
    <div class="slide" style="background-color: black;"> Your Content </div>
    <div class="slide" style="background-color: red;"> Your Content </div>
    <div class="slide" style=" background-color: green;"> Your Content </div>
    <div class="slide" style=" background-color: blue;"> Your Content </div>
    <div class="slide" style=" background-color: purple;"> Your Content </div>
    <div class="slide" style="background-color: orange;"> Your Content </div>
    <div class="slide" style="background-color: black;"> Your Content </div>
  </div>
</div>

使用min-height和max-height都不起作用

1 个答案:

答案 0 :(得分:1)

IDictioanry<TKey, TValue>.Item
all_files = glob.glob(./*.csv")

for filename in all_files:
    city_name=re.split("[_.]", filename)[1] #to extract city name from filename
    dfname= {'df' + str(city_name)}
    print(dfname)
    dfname= pd.read_csv(filename)
$(document).ready(function() {

  $('.owl-carousel').owlCarousel({ 
    //Autoplay
    autoPlay : true,
    goToFirst : true,
    goToFirstSpeed : 1000,
    loop: true,
    items: 4,
    responsiveClass: true,
    responsive: {
      0: {
        items: 4,
        nav: true
      },
      600: {
        items: 3,
        nav: false
      },
      1000: {
        items: 5,
        nav: true
      }
    }
  })
});

相关问题