실전퍼블리싱(checked-Testimonial 탭 가로,세로 슬라이더)

checked-Testimonial 탭 가로, 세로 슬라이더

---

가로 슬라이더

가로 예제보기

HTML

  <div class="tab-inner">
    <h1>Testimonials</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="./images/face-01.jpg">
          <p>As we all know, it’s easy for marketers to brag about 
            how great their product or service is. 
            Writing compelling copy, shooting enticing photos, 
            or even producing glamorous videos are all tactics we 
            use to draw attention to our brands. While all of these 
            strategies can be successful, there really is no better 
            way to gain trust and prove the validity of your brand 
            like customer testimonials.
          </p>
          <p>
            <b>Ackerley</b>
            Media Analyst at <span>ZenDesk</span>
          </p>
        </div>
        <div>
          <img src="./images/face-02.jpg">
          <p>ZenDesk’s testimonial page is beautifully laid out AND 
            functional, with a silent customer video playing on loop 
            to serve as the banner, a menu to filter testimonials by 
            location, company size, industry, and use case, 
            and lastly thumbnails linking to the full customer 
            stories for a variety of big-name brands. This is a 
            clean and concise way to showcase their happy customers.
          </p>
          <p>
            <b>Dabria</b>
            Graphic Designer at <span>ChowNow</span>
          </p>
        </div>
        <div>
          <img src="./images/face-03.jpg">
          <p>As we all know, it’s easy for marketers to brag about 
            how great their product or service is. 
            Writing compelling copy, shooting enticing photos, 
            or even producing glamorous videos are all tactics we 
            use to draw attention to our brands. While all of these 
            strategies can be successful, there really is no better 
            way to gain trust and prove the validity of your brand 
            like customer testimonials.
          </p>
          <p>
            <b>Vadim</b>
            Developer at <span>Startup Institute</span>
          </p>
        </div>
      </div>
    </div>
    <div class="btn">
      <label for="tab1"></label>
      <label for="tab2"></label>
      <label for="tab3"></label>
    </div>  
  </div>

CSS

/* Google Web Font */
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');

/* Fontawesome 4.7 */
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

body {
  font-family: 'Raleway', sans-serif;
  line-height: 1.5em;
  margin: 0;
  font-weight: 300;
  color: #222;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
a {
  text-decoration: none;
}

.tab-inner {
  height: 520px;
}
.tab-inner h1{
  text-align: center;
  font-size: 40px;
  font-weight: normal;
}
input[name=tabmenu] {
  display: none;
}
.tabs {
  width: 800px;
  height: 400px;
  position: relative;
  overflow: hidden;

}
.items {
  width: 2400px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.5s;
}
.items div {
  width: 800px;
  height: 400px;
  float: left;
  box-sizing: border-box;
  text-align: center;
  padding: 50px;
}
.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 {
  width: 10px;
  height: 10px;
  background-color: lightgray;
  display: inline-block;
  cursor: pointer;
  transition: 0.3s;
}

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 {
  width: 800px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.5s;
}

input[id=tab1]:checked ~ .tabs .items {
  top: 0;
}
input[id=tab2]:checked ~ .tabs .items {
  top: -400px;
}
input[id=tab3]:checked ~ .tabs .items {
  top: -800px;
}