Tuesday 6 March 2018

How to create bootstrap 3.3.7 and 4.0 content slider.

In this tutorial we are going to create content slider using bootstrap 3.7 Carousel & slide class we also take a look on bootstrap 4.0 sliding classe and create a content slider of 4.0 too. let's start our first stpe by writing code.



You can see the outer div have class carousel & slide with id "myCarousel" this id is used in right left button "a" tags to do right left function.
we used "glyphicon glyphicon-chevron-left" class for left button and "glyphicon glyphicon-chevron-right" class for left button
glyphicon always come with bootstrap framwork as defult css icon's so you do not need to add any css for using it.
notice that our sliding content is inside 'div class="carousel-inner"' we have 3 div class="item" any thing in this class will scrool.
let's see how it look on webpage.
in next step we create fully functional good looking content slider here is code for first content slider. here is code.

result of code will be look like this.


Next step is depend on our creativity we can modify this content slider by adding other bootstrap classes for example we can use img-circle class for get round image, we can chang background color etc.
Let's take a look on code of bootstrap 4.0 slider
here is the code

in first look of code you can find out the deffrenc in 3.7 and 4.0 code here item class is changed with carousel-item and in "a" tags carousel-control is now carousel-control-prev and carousel-control-next so you do not need to add left an rignt classes but behaviar of bootstrap 4.0 slider is same any thing in carousel-item class can slide. now you can create any type of content slider using bootstrap carousel classes. thanks for reading. let me know in comment if you have any quistion.

No comments:

Post a Comment

The World's Deepest Swimming Pool

Chania

The largest ever hand-dug excavation in the world

Chania

The Heart River is a tributary of the Missouri River

Chania

Truly Amazing fact

View All