Bootstrap Carousel Diagram

Last Update:2017-01-13 Source: Internet

Author: User

Tags bootstrap carousel

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

<!doctype html>
<meta charset= "Utf-8" >
<title> using carousel</title>
<!--Bootstrap Core CSS file--
<link rel= "stylesheet" href= "/stylesheets/bootstrap.min.css" >

<!--jquery file--
<script src= "/scripts/jquery.min.js" ></script>

<!--Bootstrap Core JavaScript file--
<script src= "/scripts/bootstrap.min.js" ></script>
<body>
<div id= "Carousel-example-generic" class= "Carousel Slide" data-ride= "Carousel" style= "margin:10px;" >
<!--Wrapper for slides--
<div class= "Carousel-inner" role= "ListBox" >
<div class= "Item Active" >
<a href= "javascript:void (0)" >
</a>
<div class= "Carousel-caption" >

<a style= "color:white;" href= "javascript:void (0)" > Donkey jump </a>
</div>

</div>
<div class= "Item" >
<a href= "javascript:void (0)" >

</a>
<div class= "Carousel-caption" >

<a style= "color:white;" href= "javascript:void (0)" >MarkDown</a>
</div>
</div>
<div class= "Item" >
<a href= "javascript:void (0)" >

</a>
<div class= "Carousel-caption" >

<a style= "color:white;" href= "javascript:void (0)" >BootStrap</a>
</div>
</div>
<!--control buttons--
<a class= "left Carousel-control" href= "#carousel-example-generic" 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" role= "button" data-slide= "Next" >
<span class= "Glyphicon glyphicon-chevron-right" aria-hidden= "true" ></span>
<span class= "Sr-only" >Next</span>
</a>
</div>
</body>

Solve the problem of picture distortion when displaying

Run the code in the previous section we found that the image of the plugin has been deformed, the reason for the analysis is: the rotation of the plugin in the picture used in the first picture of the article, the size of the picture is different, and the size of the carousel is basically fixed, so when the picture appeared deformation. Here's a look at how to solve this problem:

1. Introduction of Jqthumb.js

We can't find a solution in bootstrap, so we need to use other tools. The Jqthumb plugin is designed to generate thumbnails for images, and it can start with any coordinate point in the picture to take a specified size image area as a thumbnail image. You can click Https://github.com/pakcheong/jqthumb to download it and apply it to your project (assuming Jqthumb.js is placed in the Scripts folder in the current project):

<script type="text/javascript" src="/scripts/jqthumb.js"></ script>

2. Call the DrawImage () function to generate thumbnails when the image is loaded (onload)

The DrawImage () function is based on the Jqthumb.js library, and note that the function must be written before the plugin is rotated because we have to generate thumbnails before the image is loaded. The DrawImage () function code is as follows:

<!--Import Plugins--
<script Type="text/javascript" src="/scripts/jqthumb.js"></script >
<script>
function DrawImage(hotimg)
{
$(hotimg). Jqthumb({
ClassName : ' Jqthumb ',
Width : ' 100% ',//width
Height : ' 300px ',//height
Position : { y: ' 50% ', x: ' 50% '},//Generate thumbnails from the middle of the picture
Zoom : ' 1 ',//scale
method: ' auto ',//Submit methods for different browser environments, default to ' auto '
});
}
</script>

In the above code, we used the Jqthumb and passed in the relevant initialization parameters. After calling the function, when the picture is loaded, it will produce thumbnails of the pictures according to the above parameters, thus solving the problem of picture distortion. Since thumbnails are made from the middle of the original image to both sides, the thumbnail contains the main contents of the picture. (See the detailed code on the right for specific use)

Bootstrap Carousel Diagram

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More