Skip to content

Commit d648841

Browse files
DanDevGDanDevG
committed
docs changes
1 parent 8e3dc24 commit d648841

1 file changed

Lines changed: 49 additions & 49 deletions

File tree

‎README.md‎

Lines changed: 49 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -4,76 +4,76 @@ Flexible Bootstrap Carousel plugin
44

55
##Dependencies
66

7-
```html
8-
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
9-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
10-
<script type="text/javascript" src="js/bootstrap.js"></script>
11-
```
7+
```html
8+
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
9+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
10+
<script type="text/javascript" src="js/bootstrap.js"></script>
11+
```
1212

1313
##Using
1414

1515
This plugin makes possible showing different numbers of items in your Bootstrap carousel depending on the window width. In fact it creates several columns in each item of a Bootstrap carousel. Then it is watching if the width of a browser window is changing and is adjusting number of columns in each item respectively to window's size (in this version of the plugin - from 1 through 3 columns).
1616

1717
To initiate the plugin you just need to add a *.flexible* class name to some Bootstrap carousel in your html code
1818

19-
```html
20-
<div class="carousel flexible slide" data-ride="carousel" data-interval="5000" data-wrap="true">
21-
22-
//some stuff inside the carousel
23-
24-
</div>
25-
```
19+
```html
20+
<div class="carousel flexible slide" data-ride="carousel" data-interval="5000" data-wrap="true">
21+
22+
//some stuff inside the carousel
23+
24+
</div>
25+
```
2626

2727
Then you need to create inside of the carousel a container with class name of *.items*. You also should put the items, which you want to appear in the carousel, into this container (each of them should have class of *.item*).
2828

29-
```html
30-
<div class="carousel flexible slide" data-ride="carousel" data-interval="5000" data-wrap="true">
31-
<div class="items">
32-
<div class="flex-item">
33-
<img class="img-responsive" src="images/item1.jpg"/>
34-
</div>
29+
```html
30+
<div class="carousel flexible slide" data-ride="carousel" data-interval="5000" data-wrap="true">
31+
<div class="items">
32+
<div class="flex-item">
33+
<img class="img-responsive" src="images/item1.jpg"/>
34+
</div>
35+
36+
<div class="flex-item">
37+
<img class="img-responsive" src="images/item2.jpg"/>
38+
</div>
3539

36-
<div class="flex-item">
37-
<img class="img-responsive" src="images/item2.jpg"/>
38-
</div>
39-
40-
<div class="flex-item">
41-
<img class="img-responsive" src="images/item3.jpg"/>
42-
</div>
43-
44-
<div class="flex-item">
45-
<img class="img-responsive" src="images/item4.jpg"/>
46-
</div>
47-
48-
<div class="flex-item">
49-
<img class="img-responsive" src="images/item5.jpg"/>
50-
</div>
51-
52-
<div class="flex-item">
53-
<img class="img-responsive" src="images/item6.jpg"/>
54-
</div>
40+
<div class="flex-item">
41+
<img class="img-responsive" src="images/item3.jpg"/>
5542
</div>
5643

57-
<div class="carousel-inner" role="listbox">
58-
44+
<div class="flex-item">
45+
<img class="img-responsive" src="images/item4.jpg"/>
5946
</div>
6047

61-
<a class="left carousel-control" href="#simple-content-carousel" role="button" data-slide="prev">
62-
<span class="fa fa-angle-left" aria-hidden="true"></span>
63-
<span class="sr-only">Previous</span>
64-
</a>
65-
<a class="right carousel-control" href="#simple-content-carousel" role="button" data-slide="next">
66-
<span class="fa fa-angle-right" aria-hidden="true"></span>
67-
<span class="sr-only">Next</span>
68-
</a>
48+
<div class="flex-item">
49+
<img class="img-responsive" src="images/item5.jpg"/>
50+
</div>
51+
52+
<div class="flex-item">
53+
<img class="img-responsive" src="images/item6.jpg"/>
54+
</div>
55+
</div>
56+
57+
<div class="carousel-inner" role="listbox">
6958

7059
</div>
71-
```
60+
61+
<a class="left carousel-control" href="#simple-content-carousel" role="button" data-slide="prev">
62+
<span class="fa fa-angle-left" aria-hidden="true"></span>
63+
<span class="sr-only">Previous</span>
64+
</a>
65+
<a class="right carousel-control" href="#simple-content-carousel" role="button" data-slide="next">
66+
<span class="fa fa-angle-right" aria-hidden="true"></span>
67+
<span class="sr-only">Next</span>
68+
</a>
69+
70+
</div>
71+
```
7272

7373
You can leave empty container with class name of *.carousel-inner*.
7474

7575
You've done it! Enjoy of your page with built in flexible Bootstrap carousel.
7676

7777
##License
7878

79-
This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/DanDevG/flexible-bootstrap-carousel/master/LICENSE.md) file for details
79+
This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/DanDevG/flexible-bootstrap-carousel/blob/master/LICENSE.md) file for details

0 commit comments

Comments
 (0)