1. дома
  2. Вопрос и ответ
  3. Pure css3 image slider

Pure css3 image slider

2013-12-16 2 views
1

Мне нужно сделать слайдер изображения с использованием чистого css3 и не использовать какой-либо jquery. я просто попытался этоPure css3 image slider

#content-slider { 
    font-family: arial; 
    width: 640px; 
    margin: 0 auto; 
    margin-top: 10px; 
} 

#content { 
    overflow: hidden; 
    width: 640px; 
    height: 480px; 
    -webkit-box-shadow: 0px 0px 50px 10px #c9c9c9; 
    -moz-box-shadow: 0px 0px 50px 10px #c9c9c9; 
    box-shadow: 0px 0px 50px 10px #c9c9c9; 
} 

#content-inner { 
    width:10000px; 
    height: 480px; 
} 

.page { 
    width: 640px; 
    height: 480px; 
    float: left; 
} 

.page-info { 
    height: 90px; 
    background-color: rgba(99, 99, 99, 0.6); 
    position: relative; 
    margin-top: 0px; 
    bottom: 103px; 
    color: #dedede; 
    padding-left: 20px; 
    padding-top: 10px; 
} 

.page-info h2 { 
    font-size: 21px; 
    margin-bottom: 10px; 
    margin-top: 0px; 
    color: #fafafa; 
} 

.page-text { 
    font-size: 15px; 
} 

.button { 
    float: left; 
    background: #bababa; 
    width: 16px; 
    height: 16px; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius: 8px; 
    margin-top:10px; 
    margin-left: 5px; 
    margin-right: 5px; 
} 

.button:hover { 
    -webkit-box-shadow: inset 0px 0px 2px 2px #d4d4d4; 
    -moz-box-shadow: inset 0px 0px 2px 2px #d4d4d4; 
    box-shadow: inset 0px 0px 2px 2px #d4d4d4; 
} 

.button:active { 
    -webkit-box-shadow: inset 0px 0px 2px 2px #7a7a7a; 
    -moz-box-shadow: inset 0px 0px 2px 2px #7a7a7a; 
    box-shadow: inset 0px 0px 2px 2px #7a7a7a; 
} 

.button a { 
    display: block; 
    width: 16px; 
    height: 16px; 
} 

#content-inner-1:target #content-inner { 
    -webkit-transition: all 400ms ease; 
    -moz-transition: all 400ms ease; 
    -o-transition: all 400ms ease; 
    transition: all 400ms ease; 
    margin-left: 0px; 
} 

#content-inner-2:target #content-inner { 
    -webkit-transition: all 400ms ease; 
    -moz-transition: all 400ms ease; 
    -o-transition: all 400ms ease; 
    transition: all 400ms ease; 
    margin-left: -640px; 
} 

#content-inner-3:target #content-inner { 
    -webkit-transition: all 400ms ease; 
    -moz-transition: all 400ms ease; 
    -o-transition: all 400ms ease; 
    transition: all 400ms ease; 
    margin-left: -1280px; 
} 

#content-inner-4:target #content-inner { 
    -webkit-transition: all 400ms ease; 
    -moz-transition: all 400ms ease; 
    -o-transition: all 400ms ease; 
    transition: all 400ms ease; 
    margin-left: -1920px; 
} 

#content-inner-5:target #content-inner { 
    -webkit-transition: all 400ms ease; 
    -moz-transition: all 400ms ease; 
    -o-transition: all 400ms ease; 
    transition: all 400ms ease; 
    margin-left: -2560px; 
} 

#content-inner-6:target #content-inner { 
    -webkit-transition: all 400ms ease; 
    -moz-transition: all 400ms ease; 
    -o-transition: all 400ms ease; 
    transition: all 400ms ease; 
    margin-left: -3200px; 
}

, но она должна быть нажмите (пожалуйста, проверьте мой jsfiddle this). Я хочу автоматически перемещаться справа налево, как на сайте this. Может кто-нибудь мне помочь?

извините за плохой английский. Благодарю.

источник

2013-12-16 NPE

+1

Не хочу, чтобы закрыть вопрос о возможном дубликате, как вы пытались сделать ползунок самостоятельно, но если вы хотите, чтобы проверить чистый слайдер CSS3, чем здесь вы идете - HTTP://stackoverflow.com/questions/18863967/infinite-image-slider-with-pure-css3/18864411#18864411 –

+0

эй спасибо за ваш ответ, но это не решило мою проблему. Есть только два изображения, а не скользящие справа налево. Я хочу автоматическое перемещение справа налево. Вы можете мне помочь? благодаря – NPE

ответ

Смежные вопросы

 Смежные вопросы