Question

我检查了我的轮播图像属性，如果它们未定义或为空，然后显示下一张幻灯片，但我有一点我无法修复的错误，所以我需要一些帮助。

我想告诉你我的情景：

  如果我的data-large为空或未定义，则在桌面（大屏幕）上
  然后显示下一张幻灯片
     如果我的data-medium为空或未定义，请在平板电脑（中等屏幕）上
  然后显示下一张幻灯片
     如果我的data-small为空或未定义，则在移动设备（小屏幕）上
  显示下一张幻灯片。

并使用我的轮播的下一个/上一个按钮检查属性

我尝试做某事，但它没有正常工作。

所以我猜我的controlImages()函数编码不正确。

＆＃13;

! function(e) {
  e.fn.imageR = function(a) {
    function i(e, i, r, u, n) {
      $mediaQuery < a.large ? $mediaQuery < a.medium ? $mediaQuery < a.small || (n ? e.attr("src", i) : e.css("background-image", "url(" + i + ")")) : n ? e.attr("src", r) : e.css("background-image", "url(" + r + ")") : n ? e.attr("src", u) : e.css("background-image", "url(" + u + ")")
    }

    function r() {
      $imageR.each(function() {
        var e = jQuery(this),
          a = e.data("small"),
          r = e.data("medium"),
          u = e.data("large"),
          n = !1;
        (void 0 === r || null === r) && (r = u), (void 0 === a || null === a) && (a = r), e.is("img") && (n = !0), i(e, a, r, u, n)
      })
    }
    var u = {
      small: "0",
      medium: "480",
      large: "1024"
    };
    a = e.extend(u, a), $imageR = jQuery(this), $mediaQuery = jQuery(window).width(), r(), jQuery(window).on("resize", function() {
      $mediaQuery = jQuery(window).width(), r()
    })
  }
}(jQuery);

$(document).ready(function() {
  $('.lazy_banner').imageR();
});



$(function() {
  $('.lazy_banner').each(function(e) {
    var
      ElDesktop = $(this).data('large'),
      ElTablet = $(this).data('medium'),
      ElMobil = $(this).data('small');


    function controlImages() {
      if ($(window).width() >= 980) {
        if (ElDesktop == "" || ElDesktop == undefined) {
          $('#myCarousel').carousel('next');
        }
      } else if ($(window).width() < 768) {
        if (ElTablet == "" || ElTablet == undefined) {
          $('#myCarousel').carousel('next');
        }
      } else if ($(window).width() < 480) {
        if (ElMobil == "" || ElMobil == undefined) {
          $('#myCarousel').carousel('next');
        }
      }
    }
    $(window).on('load resize', function() {
      controlImages();
    });
  });

});

＆＃13;

img {
  height: 300px !important;
  width: 100%;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<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="https://images.pexels.com/photos/40797/wild-flowers-flowers-plant-macro-40797.jpeg" 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="" 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>

＆＃13;

CodePen Demo

Answer 1

好吧，我的朋友，花了一点但我想出来给你： https://codepen.io/anon/pen/LLeLOg

  $('#myCarousel').on('slid.bs.carousel', function(){
     var  ElDesktop = $(this).find('.active img').attr('data-large'),
          ElTablet = $(this).find('.active img').attr('data-medium'),
          ElMobil = $(this).find('.active img').attr('data-small');

     if(ElDesktop == '' || ElTablet == '' || ElMobil == ''){
       $('#myCarousel').carousel('next');
     }
  })

在幻灯片上有一个引导指示符（slid.bs.carousel），在完成时有一个（slide.bs.carousel）。只需在最后添加该脚本即可。此外，您正在选择（此），这是div而不是具有属性的图像。

如何使用bootstrap轮播显示下一张幻灯片？

1 个答案: