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 hawaikan brand logo and a pyramids if you have not seen then go back and check out this tutorial we are going to add in image slide soup like this in the bottom it will show how many images are there and which one is playing right now and we can go next and previous by just clicking so let's begin for this we are using bootstrap Korres L plugin so let's look at the commendation to use it you have to include bootstrap don't mean DOJ's 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 old my Corozal Corozal slide all keywords 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 used to 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 with 1920 pixel and the height 880 pixel to fit in depth of the 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 source step to your images path there are just 4 imagine if you want to add more image adjust it another indicator and number and add another item just like all others and add image you now see the preview by pressing f12 yeah it's your bread but there is a space which you don't want let's fix it we are putting the whole slide so code into a container plastic container filled and another class with you life I am giving Hiro slide which we will style in CSS file add another div classroom now close all the to text the bottom in the CSS file define the hero slide property is margin-top is negative 22 just fill this space now save it and see the preview by pressing f12 it's working perfectly and in the mobile devices yog grid if you want to caption with images add another div class chorus l caption like this under image and write the text what you won you if you don't want this left right arrows you can remove this spin class line from both sides or you can use different icon or you can remove whole left/right control if you want just photoplay like this I hope you got what you want there if you find it difficult or too fast or if I miss something that should explain more let me know in the comment section feel free to ask any queries and give me solutions 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. hey bro can you show me how to set different size images in carousel with proper layout. thanks in advance

  2. hi bro … I have problem in image slider that is back and forward icons not showing please help me. ­čÖü

  3. 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 *