Ich habe das folgende Problem.Wie erstellt man ein Bootstrap-Karussell mit unterschiedlichen Einstellungen, abhängig von der Bildschirmgröße?
Ich arbeite mit einem Bootstrap-Karussell, das ich möchte folgendes tun.
Wenn der Bildschirm zwischen MD und LG Größe ist, würde ich gerne 3 Elemente mit 2 Elementen in Reihe haben (Bild a). Wenn der Bildschirm jedoch auf SM und XS skaliert wird, würde ich 6 Elemente mit 1 Element in jedem Element haben. (Bild B) Ich weiß nicht, wie man es macht, und wenn es möglich ist.
ATM Ich denke, 2 verschiedene Karussells für LG und MD und andere nur für SM XS zu erstellen und mit @media Abfragen zeigen das Karussell A oder B. Aber mein Kunde will nur 1 Karussell, weil er seine Daten verwenden muss Basiert darauf, und wenn er 2 verschiedene Karussells hat, bedeutet das mehr Arbeit für ihn.
Jeder Rat wird sehr willkommen sein.
PS: Ich habe ein Bild und Beispielcode beigefügt. 
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Affiliate marketing network delivering high quality affiliate programs for email marketing affiliates in the UK">
<meta name="Keywords" content="the affiliate people, affiliate people, affiliate marketing, affiliate network, affiliate programs, affiliate, affiliate program, affiliate marketing network, email markerting affiliates, email affiliate programs">
<meta name="robots" content="index,follow">
<title>
\t test</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Css -->
<link rel="stylesheet" type="text/css" href="TAP_css.css" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="animate.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="TAP_js.js"></script>
<style>
body,td,th {
\t font-family: "Open Sans";
\t font-size: 16px;
\t color: #555;
\t background-color: #fff;
}
</style>
</head>
<body>
<!-- Reviews -->
<div class="rev_bg" id="test_bg">
<div class="container">
<div class="row">
<h3 class="rev_h3" id="test_h3"> TESTIMONIALS </h3>
<p class="rev_t">Our clients and affiliates thoughts about us.
Read more <span> <a href="LINK HERE">The test teste testimonials </a> </span></p>
<hr class="rev_hr">
</div>
</div>
\t \t <!-- CAROUSEL REV -->
<div class="container rev_carousel ">
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators rev_in20">
<li data-target="#myCarousel" data-slide-to="0" class="active rev_bg1"></li>
<li data-target="#myCarousel" data-slide-to="1" class="rev_bg1"></li>
<li class="rev_bg1" data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
\t <div class="row">
<div class="col-md-6">1A TEST </div>
<div class="col-md-6">1B TEST </div>
\t </div>
</div>
<div class="item">2 </div>
<div class="item">3 </div>
<div class="item">4 </div>
<div class="item">5 </div>
<div class="item">6 </div>
</div>
<!-- Left and right controls -->
<a class="nobackground" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left rev_c_lef" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right nobackground " href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right rev_c_rig" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
\t \t <!--- END CAROUSEL REV -->
\t \t
\t \t
</div>
<!-- E Reviews -->
</body>
</html>
Danke für Sie Ich werde versuchen, es zu antworten. –
Nun, ich werde das gleiche Problem haben. Ich muss das gleiche Zeug 2 mal schreiben. :( –
Versuchen Sie, Code zu schreiben, der Code für Sie zweimal schreibt;). Ich stimme zu, dass dies nicht DRY ist. Sie können auch das Bildelement html5 verwenden. Es hat das gleiche Grundprinzip. Aber dann müssen Sie zwei Bilder liefern. Eine Bildquelle mit einer oben und eine zweite Bildquelle mit zwei oben. Das reduziert doppelte Markup und könnte mit Ladezeiten ein bisschen schöner sein. – allcaps