Integrate Slick Slider into HTML step by step Bangla


We are planing to set slick slider in our HTML project. . So, we have to choose image or text first that will be used as slider content Let us choose images and then we will scale them if need We will scale or crop image using Photoshop I have taken crop tool from Photoshop and adjusting crop area of that image After corp, I press Ctrl+Alt+Shift+S to save this for web I will save that image in my project folder better create a separate folder of slider image and save inside that. We have successfully create 1 image for slider, let’s create more. let’s create more image for slider So, same way like before, we will save. Saving image for wen as it makes images small in size ( KBs ) Now we have 3 image ready for slider Now we will write some html code for slider So, right before that h1 tag, We will add HTML With Div tag, we will set an ID creating some item with class item And inside that item class, we will set 1 image since our image in not in the same folder of HTML, its actually in another folder known as slider. And that folder is in the same folder where our HTML file is. So, we need to set folder name first and then image name. Now creating the same block of item with new image Similarly another one for 3rd image Now let us see in preview page now we have to add slide to one by one. there are many free carousel (another name of slider ) like owl carousel, slick slider. We will add slidk slider Searching on google to download slick slider there are lot of options and they have preview for each of them. I want this single slider to use in my project To use it, you need to integrate in with my project And to do so, we will download it After clicking on Download Now, wait for a while And yes, download completed We just cut it and will put on the project folder and then, extract that zip file lots of files and folder we will take this slick folder so, we cut that folder and take it the same folder where HTML is and we will delete those two folder as we don’t need now i have to add some file in my HTML from this folder we need to add css file and js file in HTML file style.css is in root folder, so just file name o n href attribute. Please be noted, Whenever you use extra plugin, put those style before your custom style sheet. because we my sometime need to overwrite those styles So, we put slick before style.css Now, since the style inside slick folder, we have to put slick first and then style sheet file name. Now we will add js file. But since slick depends on jQuery, we will put it after jQuery We will use minifide one to save some bandwidth the compressed one is less in kb than the other one. So, added minified one after jQuery let us see preview to check the changes No change because we did not initialize that like jQuery, only adding is not enough, we have to write some JavaCript also, same for slick. check out documentation to get details of how to use it. I mean slick slider We prepared our HTML like this This is a simple initialization of slice, we will copy this . our HTML structure same like that HTML Now we will put that copped JS code here And then we will set our class of HTML Just for now, no extra, will see later Our slider selector is mySlider ID Slider ready, and we have next and previous btn We do not want to click, we want auto play. Let’s see go to settings lot of potions how to use this settings, they have documentation, like autoplay, value will be either true or false I will set autoplay now come back to code and add auto play let us see preview without clicking, it’s taking me to the next slide. Now we want to modify Next and previous btn We have ready made theme of slick slider let us use that we just need to add another css file add slick-theme.css come back to preview and reload we got button, but they are out side or the area. let us see how to bring them inside so, right click on the button and the choose inspect. I am in google chrome browser We need selector to style now change the vloe of left it should come but may be we have to set z-index also so set z-index:9999; still not coming, let copy that and paste in css. after adding new css, save the file and then again reload and yes, we have out button z-index is like layer of Photoshop. and defile that which layer will be in top so, left side ready, now you can to the same for right side also. Thank you for watching 🙂

8 thoughts on “Integrate Slick Slider into HTML step by step Bangla

  1. ভাল টিউট রিয়াল , আমি যদি slide এর বদলে fade effect দিতে চাই, কি করতে হবে? fade transition এর কোন টিউট রিয়াল থাকলে দিয়েন প্লিজ

Leave a Reply

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