Помогите, пожалуйста, разобраться как активировать кнопки чтобы при нажатии на них сменялась информация (текст/картинка). Один отзыв заменял другой. Прикрепляю свой код. Большое спасибо)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="reviews.css"> </head> <body> <style type="text/css"> .uc-reviws { position: relative; display: block; } .uc-reviews-slider{ overflow: hidden; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .uc-reviews-slider-wrapper{ max-width: 100%; overflow: hidden; position: relative; display: block; } .uc-reviews-slider-wrapper > .uc-reviews-list:after { clear: both; } .uc-reviews-slider-wrapper .uc-reviews-list{ -webkit-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 0px); -webkit-transition: all 1s; -webkit-transition-property: -webkit-transform,height; -moz-transition-property: -moz-transform,height; transition-property: transform,height; -webkit-transition-duration: inherit !important; transition-duration: inherit !important; -webkit-transition-timing-function: inherit !important; transition-timing-function: inherit !important; } .uc-reviews-list:before { content: " "; display: table; } .uc-reviews-slider-wrapper > *.active { z-index: 10; } .uc-reviews-slider-wrapper > *.active { opacity: 1; } .uc-reviews-block{ cursor: -webkit-grab; float: left; display: list-item; text-align: -webkit-match-parent; margin: 0px 0 0 0; position: relative; } .uc-reviews-img{ width: 100%; height: 100%; position: relative; z-index: 55; } .uc-reviews-wrapper{ position: absolute; z-index: 77; top: 0; margin: -0.7% 0 0 50%; padding-top: 40px; min-height: 100%; max-width: 1600px; box-sizing: border-box; display: block; } .uc-reviews-text { width: 485px; left: 50%; padding: 30px 0 0 45px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; } .uc-reviews-text-outer-type-a:before{ content: ''; position: absolute; left: 11px; background: #3c3c3c; width: 28px; height: 2px; margin: 9px 0 15px 0; } .uc-reviews-text-outer-type-a p { font-size: 17px; font-family: Lato_regular; line-height: 22px; color: #000; margin: 0 0 20px 0; position: relative;} .uc-reviews-text-outer-type-b p { font-size: 16px; font-family: Lato_italic; color: #747474; margin: 20px 0 0 0; } .uc-reviews-slider:after { clear: both; content: " "; display: table; } .uc-reviews-buttom { display: block; } .uc-reviews-buttom_left { width: 32px; display: block; top: 50%; height: 32px; background-image: url(http://ihub.world/wp-content/themes/ihub/img/controls.png); cursor: pointer; position: absolute; z-index: 9999; opacity: 0.8; margin-top: -16px; background-position: 0 0; left: 30px; -webkit-transition: opacity 0.35s linear 0s; transition: opacity 0.35s linear 0s; } .uc-reviews-buttom_right{ width: 32px; display: block; top: 50%; height: 32px; background-image: url(http://ihub.world/wp-content/themes/ihub/img/controls.png); cursor: pointer; position: absolute; z-index: 9999; margin-top: -16px; opacity: 0.8; -webkit-transition: opacity 0.35s linear 0s; transition: opacity 0.35s linear 0s; background-position: -32px 0; right: 30px; } .uc-reviews-number { position: relative; bottom: 67px; left: 0; right: 0; margin: 0 auto; padding: 0; text-align: center; } .uc-reviews-slider .uc-reviews-number a { background-color: #222222; border-radius: 30px; display: inline-block; height: 8px; overflow: hidden; text-indent: -999em; width: 8px; position: relative; z-index: 99; -webkit-transition: all 0.5s linear 0s; transition: all 0.5s linear 0s; cursor: pointer; } .uc-reviews-slider .uc-reviews-number > li:hover a, .uc-reviews-slider .uc-reviews-number > li.active a { background-color: #428bca; } .uc-reviews-slider .uc-reviews-number { margin: 10px 0 0; padding: 0; text-align: center; } .uc-reviews-slider .uc-reviews-number-position { cursor: pointer; display: inline-block; padding: 0 5px; } </style> <div class="uc-reviews"> <div class="uc-reviews-slider "><div class="uc-reviews-slider-wrapper" style="transition-duration: 1000ms; transition-timing-function: ease;"> <ul class="uc-reviews-list" style="width: 9443px; transform: translate3d(-2698px, 0px, 0px); height: 424px; padding-bottom: 0%;"> <li class="uc-reviews-block" style="width: 1349px; margin-right: 0px;"> <img src="http://storage2.static.itmages.ru/i/18/0104/h_1515086726_8963396_bc057ad031.jpg" alt=""> <div class="uc-reviews-wrapper"> <div class="uc-reviews-text"> <div class="uc-reviews-text-outer-type-a"> <p>“Management of the centre frequently engages media to showcase the success of their residents.</p> <p>iHUB also provides an opportunity for all their startups to participate in interesting events. For example, we have presented our startup in Oslo thanks to iHUB.”</p> </div> <p class="review-bg-text-outer-type-b"> Nikita Dobrynin & Katia Dobrynina, Founders @ AstraFit </p> </div> </div> </li> <li class="uc-reviews-block" style="width: 1349px; margin-right: 0px;"> <img src="http://storage4.static.itmages.ru/i/18/0104/h_1515086781_3914429_0b10231d6a.jpg" alt=""> <div class="uc-reviews-wrapper"> <div class="uc-reviews-text"> <div class="uc-reviews-text-outer-type-a"> <p>“iHUB has all the necessary infrastructure, and most importantly – a community of smart and creative people, as well as a great number of events attended by many investors and leading industry experts.”</p> </div> <p class="uc-reviews-text-outer-type-b"> Stakh Vozniak, CEO @ TONA </p> </div> </div> </li> <li class="uc-reviews-block" style="width: 1349px; margin-right: 0px;"> <img src="http://storage8.static.itmages.ru/i/18/0104/h_1515086875_1757560_ad7a2b467a.jpg" alt=""> <div class="uc-reviews-wrapper"> <div class="uc-reviews-text"> <div class="uc-reviews-text-outer-type-a"> <p>“iHUB has all the necessary infrastructure, and most importantly – a community of smart and creative people, as well as a great number of events attended by many investors and leading industry experts.”</p> </div> <p class="uc-reviews-text-outer-type-b"> Stakh Vozniak, CEO @ TONA </p> </div> </div> </li></ul> <div class="uc-reviews-buttom"> <a class="uc-reviews-buttom_left"></a> <a class="uc-reviews-buttom_right"></a></div></div> <ul class="uc-reviews-number" style="margin-top: 5px; transform: translate3d(0px, 0px, 0px);"> <li class="uc-reviews-number-position"><a href="#">1</a> </li> <li class="uc-reviews-number-position"><a href="#">2</a> </li> <li class="uc-reviews-number-position"><a href="#">3</a></li></ul></div> </div> </body> </html>
By Agony741
By garmoni
By aversa121
By helio
By Zakonoposlushniy.thumb.png.93183027d7a2eba5b545b257503b0e32.png)
Здравствуйте. Попробуйте выложить код в песочницу. Вопрос сформулировал не совсем понятно.
При уменьшении ширины страницы, уменьшение блоков быстрее происходит быстрее (тоесть блоки быстрее сужаются и между блоком и границей свободное пространство) при том что width=100% для body и section. В чем может быть проблема? (CSS стили отключал, проблема не исчезала, значит дело в самомо HTML)
Хотели в крестиках ноликах заменить кресты и нули на анимешных тяночек. В голову лезет что то по типу x = url(ссылка), но нормально сформулировать ничего не можем, первый курс колледжа. Заранее спасибо за помощь.
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.