Image Slider | Image Gallery | Image Slideshow using Bootstrap | Responsive Web Design tut_3

Articles, Blog

Image Slider | Image Gallery | Image Slideshow using Bootstrap | Responsive Web Design tut_3

Image Slider | Image Gallery | Image Slideshow using Bootstrap | Responsive Web Design tut_3


Welcome back guys, In the last tutorial we had made a responsive
navigation bar And added a favicon , brand logo and a hero
image If you have not seen , please go and check
out.. In this tutorial we are going to add an image
slideshow Like this In the bottom it will show how many images
are there And which one it playing right now And we can go next and previous by just clicking So let’s begin For this We are using Bootstrap Carousel
Plugin So let’s look at documentation To use it you have to include bootstrap.min.js Which we already did , if you don’t know watch
my first tutorial for how to setup bootstrap and more Here is an example These all my Carousel , Carousel , slide all
keyword are explained here very nice You should take a look to understand more,
it’s just simple All the useful links are given below in the
description.. So just copy this whole code And paste it in our html body section Where you want your slideshow For us we are using it under navigation bar Now it’s time to set images source One thing I want to tell you is that for better
result you should use all the images of same size If you use different sizes images here how
it will look like And similar problem in mobile devices For this tutorial I am using width 1920px
and height 880px to fit in laptop screen If you want to know how to set different sizes
images for different devices Let me know in the comment section , I will
explain if you need So edit all the images src tag to your images
path There are just 4 images
you can add more images just add another indicator and number it.
and add another item just like all others and add image src Now see the preview by pressing f12 Yeah , its look great But there is a space , which we don’t want Let’s fix it We are putting the whole slideshow code into
a container Class it container-fluid and another class
which you like I’m giving hero-slide Which we will style in css file And another div class row Now close all the two tags in the bottom In the css file define the hero-slide property
as margin-top is negative 20 To just fill the space Now save it , and see the preview by pressing
f12 It’s working perfectly And in mobile devices , yeah great If you want caption with images Add another div class carousel-caption Like this under images tags And write the text what you want If you don’t want this left right arrows You can remove this span glyphicon class line
from both side or you can use different icon Or you can remove whole left right control
if you want just auto play Like this.. I hope got what you wanted , If you find it difficult or too fast or if
something I missed that should explain more Let’s me know in the comments Feel free to ask any queries and give any
suggestions Thanks for watching , In the next tutorial we will learn How to add items in a responsive website Till then do whatever you want …

9 thoughts on Image Slider | Image Gallery | Image Slideshow using Bootstrap | Responsive Web Design tut_3

  1. can u upload tutorial for slide in slide out navigation.. exactly the same u shown in beginning of this tutorial

Leave a Reply

Your email address will not be published. Required fields are marked *