Помогите, пожалуйста, разобраться как активировать кнопки чтобы при нажатии на них сменялась информация (текст/картинка). Один отзыв заменял другой. Прикрепляю свой код. Большое спасибо)
<!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>
