tab slider #1 가로 세로 탭 슬라이더

탭 가로,세로 슬라이더 + 도트 navigation

- 가로 탭 슬라이더 와이어프레임

 

 

 

 

- html

        tabs에 overflow:hidden
        items > div*3 / items가 움직인다.

<div class="tab-inner">
        <h1>test</h1>
        <input type="radio" name="tabmenu" id="tab1" checked>
        <input type="radio" name="tabmenu" id="tab2">
        <input type="radio" name="tabmenu" id="tab3">
        <div class="tabs">
            <div class="items">
                <div>content1</div>
                <div>content2</div>
                <div>content3</div>
            </div>
        </div>
        
        <div class="btn">
            <label for="tab1"></label>
            <label for="tab2"></label>
            <label for="tab3"></label>
        </div>
    </div>

- css

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.tab-inner {
    /* container 역할 */
    height: 500px;
    border: 1px solid green;
}
input[name=tabmenu] {
    display: none;
}
.tabs {
    position: relative;
    border: 1px solid red;
    width: 800px;
    height: 400px;
}
.items {
    position: absolute;
    top: 0;
    left: 0;
    width: 2400px;
    height: 400px;
    transition: 0.5s;
}
.items div {
    border: 1px solid blue;
    width: 800px;
    height: 400px;
    float: left;
    box-sizing: border-box;
}
.btn {
    text-align: center;
}
.btn label {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: lightgray;
    cursor: pointer;
}
input[id=tab1]:checked ~ .tabs .items {
    left: 0;
}
input[id=tab2]:checked ~ .tabs .items {
    left: -800px;
}
input[id=tab3]:checked ~ .tabs .items {
    left: -1600px;
}
input[id=tab1]:checked ~ .btn label[for=tab1],
input[id=tab2]:checked ~ .btn label[for=tab2],
input[id=tab3]:checked ~ .btn label[for=tab3] {
    background-color: crimson;
}

 

가로 탭 슬라이더 완성

html

<div class="tab-inner">
        <h1>test</h1>
        <input type="radio" name="tabmenu" id="tab1" checked>
        <input type="radio" name="tabmenu" id="tab2">
        <input type="radio" name="tabmenu" id="tab3">
        <div class="tabs">
            <div class="items">
                <div>
                    <img src="img/face-01.jpg" alt="">
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum quas rem quos optio eaque accusamus veritatis saepe quod numquam obcaecati. Voluptates molestiae natus quis odit minima quam corrupti, accusantium hic!</p>
                    <p>
                        <b>Ackerley</b>
                        Media Analyst at <span>ZenDesk</span>
                    </p>
                </div>
                <div>
                    <img src="img/face-01.jpg" alt="">
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum quas rem quos optio eaque accusamus veritatis saepe quod numquam obcaecati. Voluptates molestiae natus quis odit minima quam corrupti, accusantium hic!</p>
                    <p>
                        <b>Ackerley</b>
                        Media Analyst at <span>ZenDesk</span>
                    </p>
                </div>
                <div>
                    <img src="img/face-01.jpg" alt="">
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum quas rem quos optio eaque accusamus veritatis saepe quod numquam obcaecati. Voluptates molestiae natus quis odit minima quam corrupti, accusantium hic!</p>
                    <p>
                        <b>Ackerley</b>
                        Media Analyst at <span>ZenDesk</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="btn">
            <label for="tab1"></label>
            <label for="tab2"></label>
            <label for="tab3"></label>
        </div>
    </div>

 

css

.tab-inner {
    /* container 역할 */
    height: 500px;
    /* border: 1px solid green; */
}
.tab-inner h1 {
    text-align: center;
}
input[name=tabmenu] {
    display: none;
}
.tabs {
    position: relative;
    /* border: 1px solid red; */
    width: 800px;
    height: 400px;
    overflow: hidden;
}
.items {
    position: absolute;
    top: 0;
    left: 0;
    width: 2400px;
    height: 400px;
    transition: 0.5s;
}
.items div {
    /* border: 1px solid blue; */
    padding: 50px;
    width: 800px;
    height: 400px;
    float: left;
    box-sizing: border-box;
    text-align: center;
}
.items div img {
    width: 100px;
    border-radius: 50%;
}
.items div p b {
    display: block;
}
.items div p span {
    color: orange;
}
.btn {
    text-align: center;
}
.btn label {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: lightgray;
    cursor: pointer;
}
input[id=tab1]:checked ~ .tabs .items {
    left: 0;
}
input[id=tab2]:checked ~ .tabs .items {
    left: -800px;
}
input[id=tab3]:checked ~ .tabs .items {
    left: -1600px;
}

input[id=tab1]:checked ~ .btn label[for=tab1],
input[id=tab2]:checked ~ .btn label[for=tab2],
input[id=tab3]:checked ~ .btn label[for=tab3] {
    background-color: crimson;
    border-radius: 50%;
}

 

 

 

- 세로 탭 슬라이더 (가로 슬라이더에서 css만 수정)

/* items의 가로너비를 800px로 바꾸고 items위치 top으로 조정 */
.items {
    position: absolute;
    top: 0;
    left: 0;
    /* width: 2400px; */
    width: 800px;
    height: 400px;
    transition: 0.5s;
}
input[id=tab1]:checked ~ .tabs .items {
    /* left: 0; */
    top: 0;
}
input[id=tab2]:checked ~ .tabs .items {
    /* left: -800px; */
    top: -400px;
}
input[id=tab3]:checked ~ .tabs .items {
    /* left: -1600px; */
    top: -800px;
}