# simple-css-slider

**Repository Path**: ivuex/simple-css-slider

## Basic Information

- **Project Name**: simple-css-slider
- **Description**: Just use css to realized a slider, use the 'em' as the measure unit, easy to resize and insert in your web site, you just need to modify the font-size of the div.css-slider.
- **Primary Language**: CSS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-05-01
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## Simple-css-slider
#### Just use css to realized a slider.
### Feature:
#### Auto swith picture in special time in the main window container.
#### List pictures in bottom area.
#### When a picture in bottom was hover, the image will show in the main window container.
#### Resizeable.
    + If you like this Simple-css-slider, you can quick hack the /base.html and insert in your site;
        - Remember to delete the body, head, html tag generaly.
    + If the you want to resize the measure of the css-slider, you can just modify the font-size of the .css-slider; 
## Take care of The style code:
```
     * { margin: 0; padding: 0 }
```
### Above line is very important;
    + Why?
        - Beacuase font size can effect the margin-top and margin-bottom and padding of the child node recursively.
        - If you import a common reset css style file in any way, the the would be import, if not, you must make sure of that.
        - If do not do this, maybe the page would change into very width or high, and some element or fonts would be very larage.
       
## Directories tree:
#### img/pic-widnow is the image directory.
#### /base.html the base realize, it is the best one to be hack.
#### /shake-css-slider.html is based on base.html, was added some simplest animation, by origin css. non-js used, too. 
#### /index.html was base on /shake-css-slider.html, users can resize the css-slider measure just operate the number input.
    + Valid operation includes: edit input value, click increase button and decrease button.
    
 ### FAQ:
    + Why do not I use px?
        - In order to ensure resizeable and easy;    
    + Why do not I use rem?
        - Beacause rem was used in mary response web site, and someone may be not willing to modify rem for this css-slider.
    + So, I give the 1000px as the .css-slider's font-size, But why 1000px?        
        - Beacause in this way, I can write 500px as .500em, and 236px as .236px, and 16px as .016px, etc.
        - So I need not to move the decimal point;
    + About the resize functionability, the {transfrom: scale(x, y)} can easy resize, why do you do this complicatedly?
        - Very good, the {transfrom: scale(x, y)} can do this, but the actual dimension in CSS Document Flow nerver change, it just looks like changed.
    + So, If you want resize the width and length of .css-slider in different ratio, you can simply write the {transfrom: scale(x, y)}, or {transform: matrix(...)}, also you can resize the the width of the .css-slider may be with some other few modify generally;
    
    
# I'm glad that you have read the operation and even hacked these file.
## And now, I am looking for a job in Beijing China now, If you require me, call my phone: 15823170299 13520138253.