Помогите, пожалуйста, разобраться как активировать кнопки чтобы при нажатии на них сменялась информация (текст/картинка). Один отзыв заменял другой. Прикрепляю свой код. Большое спасибо)
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><linkrel="stylesheet"type="text/css"href="reviews.css"></head><body><styletype="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:0px000;
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%0050%;
padding-top:40px;
min-height:100%;
max-width:1600px;
box-sizing: border-box;
display: block;}.uc-reviews-text {
width:485px;
left:50%;
padding:30px0045px;-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:9px015px0;}.uc-reviews-text-outer-type-a p { font-size:17px;
font-family:Lato_regular;
line-height:22px;
color:#000;
margin:0020px0;
position: relative;}.uc-reviews-text-outer-type-b p {
font-size:16px;
font-family:Lato_italic;
color:#747474;
margin:20px000;}.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:00;
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:-32px0;
right:30px;}.uc-reviews-number {
position: relative;
bottom:67px;
left:0;
right:0;
margin:0auto;
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:10px00;
padding:0;
text-align: center;}.uc-reviews-slider .uc-reviews-number-position {
cursor: pointer;
display:inline-block;
padding:05px;}</style><divclass="uc-reviews"><divclass="uc-reviews-slider "><divclass="uc-reviews-slider-wrapper"style="transition-duration:1000ms; transition-timing-function: ease;"><ulclass="uc-reviews-list"style="width:9443px; transform: translate3d(-2698px,0px,0px); height:424px; padding-bottom:0%;"><liclass="uc-reviews-block"style="width:1349px; margin-right:0px;"><imgsrc="http://storage2.static.itmages.ru/i/18/0104/h_1515086726_8963396_bc057ad031.jpg"alt=""><divclass="uc-reviews-wrapper"><divclass="uc-reviews-text"><divclass="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><pclass="review-bg-text-outer-type-b">
Nikita Dobrynin & Katia Dobrynina, Founders @ AstraFit </p></div></div></li><liclass="uc-reviews-block"style="width:1349px; margin-right:0px;"><imgsrc="http://storage4.static.itmages.ru/i/18/0104/h_1515086781_3914429_0b10231d6a.jpg"alt=""><divclass="uc-reviews-wrapper"><divclass="uc-reviews-text"><divclass="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><pclass="uc-reviews-text-outer-type-b">
Stakh Vozniak, CEO @ TONA </p></div></div></li><liclass="uc-reviews-block"style="width:1349px; margin-right:0px;"><imgsrc="http://storage8.static.itmages.ru/i/18/0104/h_1515086875_1757560_ad7a2b467a.jpg"alt=""><divclass="uc-reviews-wrapper"><divclass="uc-reviews-text"><divclass="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><pclass="uc-reviews-text-outer-type-b">
Stakh Vozniak, CEO @ TONA </p></div></div></li></ul><divclass="uc-reviews-buttom"><aclass="uc-reviews-buttom_left"></a><aclass="uc-reviews-buttom_right"></a></div></div><ulclass="uc-reviews-number"style="margin-top:5px; transform: translate3d(0px,0px,0px);"><liclass="uc-reviews-number-position"><ahref="#">1</a></li><liclass="uc-reviews-number-position"><ahref="#">2</a></li><liclass="uc-reviews-number-position"><ahref="#">3</a></li></ul></div></div></body></html>
Активация кнопок и смена элементов
in HTML Coding
Posted · Edited by aversa121
Помогите, пожалуйста, разобраться как активировать кнопки чтобы при нажатии на них сменялась информация (текст/картинка). Один отзыв заменял другой. Прикрепляю свой код. Большое спасибо)