Image Slider

結構

  1. 相框slider:overflow: hidden
  2. 相片平放卷軸holder:橫長結構,長度必須包覆所有圖片
  3. 相片
  4. 動畫:transform: translateX(負的相片寬度)
.slider
 .holder
  .pic
  .pic
  .pic
  .pic
  .pic
  .pic
  .pic
  .pic
$s-width: 1200px
$s-height: 600px

.slider
  width: $s-width
  height: $s-height
  border: 1px solid #000
  overflow: hidden
  
.holder
  width: $s-width*8
  position: relative
  left: 0
  animation: scroller 20s infinite
  
.pic
  width: $s-width
  height: $s-height
  float: left
  position: relative
  overflow: hidden
  background-position: center center
  background-size: cover
  &:nth-child(1)
    background-image: url("https://goo.gl/ro6eWb")
  &:nth-child(2)
    background-image: url("https://goo.gl/kgH2tw")
  &:nth-child(3)
    background-image: url("https://goo.gl/0dx76j")
  &:nth-child(4)
    background-image: url("https://goo.gl/7wvNvb")
  &:nth-child(5)
    background-image: url("https://goo.gl/3940uB")
  &:nth-child(6)
    background-image: url("https://goo.gl/rmI6Fy")
  &:nth-child(7)
    background-image: url("https://goo.gl/z9G2Wb")
  &:nth-child(8)
    background-image: url("https://goo.gl/QEG93R")

@keyframes scroller
  12.5%
    transform: translateX(0)
  25%
    transform: translateX(-$s-width)
  37.5%
    transform: translateX(-$s-width*2)
  50%
    transform: translateX(-$s-width*3)
  62.5%
    transform: translateX(-$s-width*4)
  75%
    transform: translateX(-$s-width*5)
  87.5%
    transform: translateX(-$s-width*6)
  100%
    transform: translateX(-$s-width*7)

Display

One Reply to “Image Slider”

  1. Hello there! This is kind of off topic but I need some help from an established blog.
    Is it togh to set up yopur own blog? I’m not very techincal but
    I can figure things out pretty quick. I’m thinking about making
    my own but I’m not sure where to begin. Do you haave any tips or suggestions?
    Thanks

Leave a Reply

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