How is it displayed under the big screen?
Fixed the height of the container (e.g. 410px), changed the rotation map to background display. Since the height of possible pictures is not necessarily 410px, the background-size in css3 needs to be set.
Why is it so displayed?
The artwork is very wide on both sides of the picture for better display on different screens, but in most cases the page width cannot fit this picture width, and the Bootstrap style sets the max-width of the picture to 100% by default, causing the interface picture to zoom.
How many implementations do ##have?
Want to display an extra wide picture on a smaller screen with the picture centered
- Change to background-position: center center center;
- Make the img element absolutely positioned, left:50%, margin-left: -width/2
How is it displayed under the small screen?
100% picture width, highly adaptive
Why is it so displayed?
The screen on the mobile phone side is smaller, and the way the background image is used may result in incomplete display of the visual area.
How to switch the size of the screen?
Get the current screen width compared to the set median value, larger for background map display, smaller for img display, code details below
The Structure and Details of Roadcasting Map in bootstrap
<!-- Modify your own broadcast map first ID，All effects are getting ID Generated on the basis of
class="carousel slide"Show that it is currently a round-robin map. slide What's added is the sliding effect
data-ride="carousel" Let the rotation map start playing after the page is initialized (leaving out the rotation map is quiescent)
-->
<div id="carousel-example-generic-xiugai" class="carousel slide" data-ride="carousel">
<!-- Indicators Indicator Picture Roadcasting Control Point (Small Dot Below)-->
<ol class="carousel-indicators">
<!-- action Indicator that represents the current activation
data-target Which round-robin map is controlled (custom) ID)
data-slide-to Which chart does the indicator correspond to?
-->
<li data-target="#carousel-example-generic-xiugai" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic-xiugai" data-slide-to="1"></li>
<li data-target="#carousel-example-generic-xiugai" data-slide-to="2"></li>
<li data-target="#carousel-example-generic-xiugai" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides Roadmap Picture Container-->
<!--item Correspond to each rotation map (number corresponds to indicator)
carousel-caption Title or Descriptive Text
role No actual effect has semantic effect
-->
<div class="carousel-inner" role="listbox">
<div class="item active" data-image-lg="img/slide_01_2000x410.jpg" data-image-xs="img/slide_01_640x340.jpg">
<div class="carousel-caption"></div>
</div>
<div class="item" data-image-lg="img/slide_02_2000x410.jpg" data-image-xs="img/slide_02_640x340.jpg">
<!-- <img src="./img/slide_02_2000x410.jpg" alt="..."> -->
<div class="carousel-caption"></div>
</div>
<div class="item" data-image-lg="img/slide_03_2000x410.jpg" data-image-xs="img/slide_03_640x340.jpg">
<!-- <img src="./img/slide_03_2000x410.jpg" alt="..."> -->
<div class="carousel-caption"></div>
</div>
<div class="item" data-image-lg="img/slide_04_2000x410.jpg" data-image-xs="img/slide_04_640x340.jpg">
<!-- <img src="./img/slide_04_2000x410.jpg" alt="..."> -->
<div class="carousel-caption"></div>
</div>
</div>
<!-- Controls Controller (left and right arrows)-->
<!-- href Round-robin diagrams corresponding to specified controls
data The slide direction after clicking the button, prev Previous, next Later
sr-only Not Common
-->
<a class="left carousel-control" href="#carousel-example-generic-xiugai" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic-xiugai" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
js initialization parameters
interval: 10000, how often to play
Pause:'null', whether the mouse hovers to pause
wrap: true, whether to loop
keyboard: false, whether to listen for keyboard events
$(function () {
$('custom id').carousel({
interval: 10000,
pause: 'null',
wrap: true,
keyboard: false,
});
});
Method provided
.carousel('cycle') starts loop play
.carousel('pause') pauses playback
.carousel(number) jumps to the specified broadcast map
Last Round-robin Map in.carousel('prev')
.carousel('next') next round
Event
Execute slide.bs.carousel relay map when it is about to switch
Execute after switching the slid.bs.carousel relay map
js Modify Round-robin Adaptive Style
$(function () { //Equivalent to onload
// Responsive broadcast map (background for large screen, img for small screen)
// Depending on the screen width, decide whether the background graphics are formatted or pictures
function resize() {
// Get the screen width first
var windowWidth = $(window).width();
// Determine the current screen size
var isSmallScreen = windowWidth < 768; //Return Boolean
// Find the element that needs action
$("#carousel-example-generic-xiugai .carousel-inner .item").each(function (i, item) {
var $item = $(item);
// console.log(item)//Returns a dom object
var imgSrc = isSmallScreen ? $item.data("image-xs") : $item.data("image-lg");
// Large screen setting background picture
$item.css({
backgroundImage: `url(${imgSrc})`
})
// Append img tag to small screen
if (isSmallScreen) {
$item.html(`<img src=${imgSrc}>`)
} else {
// The empty() method removes all content, including all text and child nodes, from the selected element.
$item.empty();
}
})
}
// window triggers resize event
// The trigger() method triggers the specified event type of the selected element.
// The resize event occurs when the browser window is resized.
$(window).on("resize", resize).trigger("resize");
// Handset Touch Events
var carousel = $(".carousel");
var startX, endX, moves;
var startMove = 50;
carousel.on("touchstart", function (e) {
startX = e.originalEvent.touches[0].clientX;
})
carousel.on("touchmove", function (e) {
endX = e.originalEvent.touches[0].clientX;
})
carousel.on("touchend", function (e) {
moves = Math.abs(startX - endX) - startMove;
if (moves) {
if (startX - endX > 0) {
$(this).carousel("next");
} else if (startX - endX < 0) {
$(this).carousel("prev");
}
}
})
// Mouse Drag Event
var x1,x2,xmove
carousel[0].onmousedown = function(e1){
x1 = e1.clientX;
carousel[0].onmousemove = function(e2){
x2 = e2.clientX;
}
}
carousel[0].onmouseup= function(){
xmove = Math.abs(x1 - x2) - startMove;
if (xmove) {
if (x1 - x2 > 0) {
$(this).carousel("next");
} else if (x1 - x2 < 0) {
$(this).carousel("prev");
}
}
}
}