Now you can build Bootstap Sliders with no effort using WOW Slider! Here is the video tutorial:
This video showsases multiple transition effects you can use for your website slideshow!
Code to paste between the tags <head></head>:
HTML code to paste between the tags <body></body> in the place that you want the Bootstrap Slider to appear:
This is a clean and modern slider design that would blend perfectly with a website built using bootstrap. It uses only the color white (easily changed to any other single color in the WOWSlider software) so works particularly with dark and striking images.
The slider does not use borders or a drop shadow, and this means the images appear extremely crisp and clean. There is a subtle dark overlay on the left and right sides, which help the UI elements to stand out, and ensures a crisp edge to the slider.
The slider starts cycling through the images immediately, however you can make the slider pause by hovering over a slide. The slideshow resumes when you move off the slider, or when you interact with the UI.
The UI elements are always visible. These consist of two navigational arrows, one on the left edge of the images and on one on the right, a caption, and a series of ‘bullets’ at the bottom of the image that allow a user to skip between slides.
The two navigational arrows are simple arrow-heads, with no embellishment. They are white, and semi-transparent. The transparency allows the background colors to show through. A faint drop shadow helps them to stand out, and matches the bootstrap design aesthetic. Moving your arrow over the arrows or even just close to them causes the arrows to become fully opaque, and darkens the shadow along that edge. This helps the arrows to ‘pop’ and makes them more visible.
The caption is extremely visible, as it sits in the center-bottom of the slide. It comprises of a large title and a smaller description. The font used is Helvetica Neue, a clean sans-serif typeface that is modern and professional. This is the same font used in the Bootstrap framework. A slight drop-shadow helps the text stand out against the image.
Directly below the caption are a series of bullets. These are transparent circles with a thin white border. Each bullet represents one of the images in this bootstrap slider, and hovering over a bullet brings up a small preview image of that slide. The preview image has a white border and a small arrow that points to the bullet.
The bullet associated with the slide currently on display is highlighted. It turns into an opaque white circle. This helps the user understand the functionality of the bullet navigation.
This slider would work perfectly with any site built using the bootstrap framework. Because of the clean design it would also work well for modern websites aimed at tech-savvy users.
Because of the single color used in the design, you would need to make sure your images contrast well with that color. White works well with dark and striking images, whereas black would stand out well against pale and pastel images.
You should choose a clean and simple transition effect for this slider. In the demo it is ‘Basic_linear’ where each image slides off to one side and is replaced with an image sliding in from the opposite side.