Question

我的引导旋转木马和我的旋转木马图片的src正在响应，这就是为什么我使用this plugin来更改我的图像响应时的src。<\ n / p>

此插件有3个属性data-large，data-medium和data-small --- data-large用于桌面，data-medium用于平板电脑，data-small用于移动设备。

如果条件和我的状况良好，我会检查他们。如果我的src为空，那么它一直在隐藏，但这不是很好的视线，这就是为什么我需要显示下一张幻灯片。


所以我的问题是如何展示下一张幻灯片？

我尝试使用$("#myCarousel").carousel('next');但是没有工作我不明白为什么没有工作..

如果您检查我的演示，您将清楚地了解响应式调整大小窗口。

＆＃13;

$(document).ready(function() {
  $(".lazy_banner").imageR({
    small: "0",
    medium: "480",
    large: "1024"
  });
  lazyBanner();
});

function lazyBanner() {

  $.each($(".carousel-inner img"), function() {
    var lgData = $(this).data('large');
    var mdData = $(this).data('medium');
    var smData = $(this).data('small');
    var s = $(window).width();
    if (s > 1024) {
      if (lgData == "" || lgData == undefined) {
        $(this).hide();
      } else {
        $(this).show();
      }
    } else if (s > 480) {
      if (mdData == "" || mdData == undefined) {
        $(this).hide();
      } else {
        $(this).show();
      }
    } else if (s > 0) {
      if (smData == "" || smData == undefined) {
        $(this).hide();
      } else {
        $(this).show();
      }
    }
  });


}

$(window).on('resize load', function() {
  lazyBanner();
});

＆＃13;

.carousel-inner>.item>a>img,
.carousel-inner>.item>img,
.img-responsive,
.thumbnail a>img,
.thumbnail>img {
  width: 100%;
  height: 300px;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img class="lazy_banner" data-large="https://image.ibb.co/dh3MSk/desktop_1.jpg" data-medium="" data-small="https://image.ibb.co/bVYc05/mobil.jpg">
      </div>
      <div class="item">
        <img class="lazy_banner" data-large="" data-medium="https://images.pexels.com/photos/30865/pexels-photo-30865.jpg" data-small="https://images.pexels.com/photos/122429/leaf-nature-green-spring-122429.jpeg">
      </div>
      <div class="item">
        <img class="lazy_banner" data-large="https://images.pexels.com/photos/40797/wild-flowers-flowers-plant-macro-40797.jpeg" data-medium="https://www.jssor.com/demos/img/gallery/980x380/013.jpg" data-small="https://www.jssor.com/demos/img/gallery/980x380/015.jpg">
      </div>
    </div>
    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://content.anitur.com.tr/plug/imager.js"></script>

＆＃13;

隐藏并显示下一个轮播问题？

0 个答案: