EnglishWOWSlider  DeutschBildergalerie Diashow  EspañolGaleria de Imagenes, Slide Imagenes Gratis  FrançaisDiaporama Galerie D'Image  ItalianoImmagini Galleria  汉语网络幻灯片: 效果的幻灯片  Português brasileiroGaleria De Imagens  Русскийслайдер изображений, слайдшоу, CSS3 слайдер  SvenskaBild Galleri  日本語画像のスライダー&ギャラリー  NederlandsAfbeeldingen Caroussel 
  • Red Kite : bootstrap image slider Medium-large bird of prey in the family Accipitridae
  • bootstrap sliderBird of prey found in North America
  • Hawk : slider bootstrap Small to medium-sized diurnal birds of prey

More Demos

  How-to: Working on Bootstrap Slider!

Now you can build Bootstap Sliders with no effort using WOW Slider! Here is the video tutorial:

  Bootstrap Slider - Outstanding Effects!

This video showsases multiple transition effects you can use for your website slideshow!

  Bootstrap Slider Code

Code to paste between the tags <head></head>:

<!-- Start WOW Slider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOW Slider.com HEAD section -->

HTML code to paste between the tags <body></body> in the place that you want the Bootstrap Slider to appear:


<!-- Start WOW Slider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
	<li><img src="data1/images/redkite50498.jpg" alt="Red Kite" title="Red Kite" id="wows1_0"/>Medium-large bird of prey in the family Accipitridae</li>
	<li><a href="https://mobirise.com/bootstrap-carousel/"><img src="data1/images/baldeagles341898_1920.jpg" alt="bootstrap slider" title="Bald Eagle" id="wows1_1"/></a>Bird of prey found in North America</li>
	<li><img src="data1/images/hawk512466.jpg" alt="Hawk" title="Hawk" id="wows1_2"/>Small to medium-sized diurnal birds of prey</li>
<div class="ws_bullets"><div>
	<a href="#" title="Red Kite"><img src="data1/tooltips/redkite50498.jpg" alt="Red Kite"/></a>
	<a href="#" title="Bald Eagle"><img src="data1/tooltips/baldeagles341898_1920.jpg" alt="Bald Eagle"/></a>
	<a href="#" title="Hawk"><img src="data1/tooltips/hawk512466.jpg" alt="Hawk"/></a>
<div class="ws_shadow"></div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOW Slider.com BODY section -->


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.

jquery full screen slider

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.

full screen wordpress slider

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.

© 2016 WOWSlider.com - All Rights Reserved. Terms Privacy