Slider template
About
I needed to make templates to add to a store for my final project at General Assembly, Samesies. This one is a free template for websites that need a full slider page.
Technologies Used
- HTML
- CSS
- JavaScript
- jQuery
- Bootstrap
How to Make Changes
- Add and change background images
- Look at lines 28-30 and 34-39 on index.html to see the layout of each slide. You need to add a new
- , which are the white buttons on the bottom. Then you just have to add a new div with an id="fourthSlide" and class="item". You also need to add the picture in css/main.css. Read how to change pictures and you should be able to add a new picture similar to that.
- The background image is in css/main.css on line 11, 16, and 21. To update it add a new picture in the images folder and change the name is the css to whatever you called it. Unsplash has a huge selection of pictures to use.
- Change the time between slide transitions
- You can adjust the time in js/slider.js on line 3. The time is in milliseconds. The current time set is 3000 milliseconds (or 3 seconds).
- Change title and favicon
- The title is in index.html on line 8.
- Favicon is the picture that shows up on the tabs next to the title and is in index.html on line 9. There are favicon generator websites where you can drag in a regular picture and it turns it into a favicon. Just save it in images folder and direct it there.
Screenshot
