Android,iOS,Gadgets,Reviews Everything About Technology

Creating a slider using the twitter bootstrap 3

161

Twitter Bootstrap 3 is one of the best CSS frameworks for developing and designing content management systems. With it, you can easily create blogs or portfolio pages using the Twitter Bootstrap (grid layout) grid system. At the heart of many CMS systems is the basic component “Slider” (Carousel), basically it is a sequential automatic display of images, but the slider can be anything: it can display the latest completed projects, reviews of your customers, a description of special offers, links to news or the latest articles from your blog. In this article, we will learn how to create a slider using the Twitter Bootstrap 3 Carousel component.

- Advertisement -

The layout for the carousel component is as follows:

~~~ {.html}


From the code above, we understand that the slider in Bootstrap 3 is divided into several main parts: 

* Indicators 
* Slider content 
* Controls 

To set the `div` element as a slider, we'll add the classes` carousel` and `slide` to it. The `carousel` class creates a" carousel "effect, i.e. changing slides in a circle. The `slide` class adds animation in the form of a slide to the right or to the left. Indicators are small circles around the bottom of the slider, they determine the current position of the slide and the number of all slides. Indicators are declared using an ordered list

~~~{.html}
<ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

An ordered list has a class carousel-indicatorsthat makes the children elements small circles. Each li element must have an attribute data-target with the value of the idparent container. Also, it must have an attribute data-slide-towith a unique integer value to increase the order (position) and start the value from “0”. The contents of the slide are the main part of the slider. It is in this space that we will post our slider content. The content of the slider is determined by the use of the class carousel-inner. This div element can have an unlimited number of nested div elements. The first element must be active by default, so add a class active.

~~~ {.html}


Each element with the class `item` has two subsections:` image` and `carousel-caption`. The image is used as the background for the slide. The element with `carousel-caption` is positioned on top of the image and is used as the title for the slide. Inside the `carousel-caption`, you can place either the <h3> element </ h3> or the <p> </ p> element, or even both. Controls are the right and left arrows that are used to change the slide manually.
~~~{.html}
<!-- Контролы -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

There should be two elements: one for each arrow. The first element will have a span element with classes glyphicon glyphicon-chevron-leftthat are the icon of the left arrow, and the second element will have classes glyphicon glyphicon-chevron-rightthat are the right arrow. Now Bootstrap uses fonts to display icons instead of images.

It’s all! You have successfully created a slider for your site. Plus, you did not write a single line of JavaScript code, bootstrap.js did it for you.

Carousel options

For additional adjustment of the slider, you can add several data- * attributes to the parent container of the carousel.

  • data-interval is used to specify the time interval between slides. It takes a number as a value and the number must be in milliseconds.
  • data-pause is used to determine at what event a pause will occur in the slider. If the value of “hover” then the slider stops when the mouse is on the slider.
  • data-wrap is a boolean attribute and allows you to determine whether the slide starts again if the end of the slides is reached.

For lovers of jQuery

If you like to use jQuery and data- * attributes, then Bootstrap allows you to use initialization via JavaScript! To make a merry-go-round from a div, you must write the following code:

~~~ {.javascript} $ (‘. carousel’). carousel ()


Options for the carousel must be set by passing the JSON object. For example:
~~~{.javascript}
$('.carousel').carousel({
  interval: 2000,
  pause: “hover”,
  wrap: true
});

You can also manually call the slider events using the following code:

  • .carousel (‘pause’) // pause
  • .carousel (‘cycle’) // switch slides one at a time
  • .carousel (2) // force the third slide in the slider
  • .carousel (‘prev’) // show the previous slide
  • .carousel (‘next’) // show the next slide in the slider

The above methods can be called from any JavaScript code to manipulate the normal operation of the slider. I find prev and next methods very useful, then when I want to show my own buttons instead of arrows. Especially when they are outside the carousel markup.

Conclusion

I hope it was useful for you to learn how to create a slider without writing thousands of lines of JavaScript code. I think with proper use, the javascript components of Twitter Bootstrap will be an integral part of the development process. They will certainly increase the speed of development. Most importantly, they are cross-browser, so you do not have to tear your hair to make them work in older browsers.

Comments