Wie zeige ich die nächste Folie mit Bootstrap Karussell?

Question

Ich habe meine Karussell-Bildattribute überprüft, wenn sie undefiniert oder leer sind und dann die nächste Folie zeigen, aber ich habe einen kleinen Fehler, den ich nicht beheben konnte, also brauche ich etwas Hilfe.

Ich möchte Ihnen mein Szenario sagen:

auf dem Desktop (großer Bildschirm), wenn mein data-large leer ist oder nicht definiert zeigen dann nächste Folie

auf Tablette (mittel-Bildschirm), wenn mein data-medium ist leer oder undefined dann nächste Folie

auf Handy (kleiner Bildschirm), wenn meine data-small ist leer oder undefiniert dann zeigen nächste Folie.

und überprüfen Sie das Attribut mit dem nächsten/vorherigen Knopf meines Karussell

ich versuchen, etwas zu tun für, aber es ist nicht richtig funktioniert.

so denke ich, dass meine controlImages() Funktion nicht korrekt codiert ist.

! 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(); 
 
    }); 
 
    }); 
 

 
});

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

<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>

CodePen Demo

Answer 1

mein Freund Okay, dauerte es ein wenig, aber ich dachte, es für Sie aus: 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'); 
    } 
    }) 

Es gibt eine Bootstrap-Anzeige (glitten .bs.carousel) auf Folie und a (slide.bs.carousel) wenn es fini ist Schuppen. Fügen Sie einfach das Skript am Ende hinzu und es sollte funktionieren. Außerdem haben Sie (das) ausgewählt, was das div ist und nicht das Bild, in dem das Attribut enthalten ist.