When I click the 'Contact Us' button on the last slide of the automatic slider, it should act as a call to action button and link to another page. But right now its not even clickable. I've tried to google this and I read somewhere that it may be due to the other parts of the code. I tried running just the HTML section of the button and it works, so I guess it really is because of other parts of the code. But I just can't seem to find the part that's causing the button to not work. This is my code so far. Any help is greatly appreciated!!
(function() {
'use strict';
function startSetup(sliderSize, slideSize, animationDuration, autoplayInterval) {
this.sliderSize = parseFloat(sliderSize) / 100;
this.slideSize = parseFloat(slideSize) / 100;
this.animationDuration = parseFloat(animationDuration);
this.autoplayInterval = parseFloat(autoplayInterval);
};
function Slider(newSlider, sliderSize, slideSize, animationDuration, autoplayInterval) {
this.startSetup = new startSetup(sliderSize, slideSize, animationDuration, autoplayInterval),
this.wrapper = newSlider.querySelector('.wrapper');
this.slides = newSlider.querySelectorAll('.circular-slider .wrapper .slides-holder .slides-holder__item');
this.slidesSize = 0;
this.descriptionsHolder = newSlider.querySelector('.circular-slider .wrapper .descriptions');
this.descriptions = newSlider.querySelectorAll('.circular-slider .wrapper .descriptions .descriptions__item');
this.slidesHolder = newSlider.querySelector('.circular-slider .wrapper .slides-holder');
this.btnLeft = newSlider.querySelector('.circular-slider .wrapper .controls .controls__left');
this.btnRight = newSlider.querySelector('.circular-slider .wrapper .controls .controls__right');
this.btnAutoplay = newSlider.querySelector('.circular-slider .wrapper .controls .controls__autoplay');
this.currentAngle = 0;
this.stepAngle = 2 * Math.PI / newSlider.querySelectorAll('.circular-slider .wrapper .slides-holder .slides-holder__item').length;
this.currentSlide = 0;
this.slidesHolder.style.transitionDuration = this.startSetup.animationDuration + 'ms';
this.onResize();
this.setAutoplay();
this.setNav();
this.addStyle();
let _this = this;
this.btnAutoplay.onclick = function() {
if (this.classList.contains('controls__autoplay_running')) {
this.classList.remove('controls__autoplay_running');
this.classList.add('controls__autoplay_paused');
clearInterval(_this.autoplay);
_this.autoplay = null;
} else {
this.classList.remove('controls__autoplay_paused');
this.classList.add('controls__autoplay_running');
_this.setAutoplay();
}
}
};
Slider.prototype.onResize = function() {
let radius,
w = this.wrapper.parentNode.getBoundingClientRect().width,
h = this.wrapper.parentNode.getBoundingClientRect().height;
2 * h <= w ? radius = h * this.startSetup.sliderSize :
radius = (w / 2) * this.startSetup.sliderSize;
this.setSize(Math.round(radius));
};
Slider.prototype.setSize = function(radius) {
this.wrapper.style.width = 2 * radius + 'px';
this.wrapper.style.height = radius + 'px';
let r = 2 * radius * (1 - this.startSetup.slideSize);
this.slidesHolder.style.width = this.slidesHolder.style.height = r + 'px';
this.slidesRepositioning(r / 2);
this.slidesHolder.style.marginTop = radius * this.startSetup.slideSize + 'px';
this.descriptionsHolder.style.width = (r / 2 - r * this.startSetup.slideSize + 20) * 2 + 'px';
this.descriptionsHolder.style.height = r / 2 - r * this.startSetup.slideSize + 20 + 'px';
this.slidesSize = Math.min(2 * radius * this.startSetup.slideSize, this.stepAngle * radius * (1 - this.startSetup.slideSize) - 50);
this.descriptionsHolder.style.fontSize = window.innerHeight < window.innerWidth ? '1.2vh' :
'1.2vw';
for (let i = 0; i < this.slides.length; i++) {
this.slides[i].style.width = this.slides[i].style.height = this.slidesSize + 'px';
};
};
Slider.prototype.slidesRepositioning = function(r) {
for (let i = 0; i < this.slides.length; i++) {
let x = r * Math.cos(this.stepAngle * i - Math.PI / 2),
y = r * Math.sin(this.stepAngle * i - Math.PI / 2);
this.slides[i].style.transform = 'translate( ' + x + 'px, ' + y + 'px ) rotate( ' + this.stepAngle * 180 / Math.PI * i + 'deg )';
};
};
Slider.prototype.rotate = function(multiplier) {
let _this = this;
this.removeStyle();
this.resetNavs();
if (this.currentSlide === this.slides.length - 1 && multiplier === -1) {
this.slidesHolder.style.transform = 'rotate( -360deg )';
this.currentSlide = this.currentAngle = 0;
this.addStyle();
setTimeout(function() {
_this.slidesHolder.style.transitionDuration = 0 + 's';
_this.slidesHolder.style.transform = 'rotate( ' + _this.currentAngle + 'deg )';
setTimeout(function() {
_this.slidesHolder.style.transitionDuration = _this.startSetup.animationDuration + 'ms';
}, 20);
}, this.startSetup.animationDuration);
} else if (this.currentSlide === 0 && multiplier === 1) {
this.slidesHolder.style.transform = 'rotate( ' + this.stepAngle * 180 / Math.PI + 'deg )';
this.currentSlide = _this.slides.length - 1;
this.currentAngle = -(2 * Math.PI - _this.stepAngle) * 180 / Math.PI;
this.addStyle();
setTimeout(function() {
_this.slidesHolder.style.transitionDuration = 0 + 's';
_this.slidesHolder.style.transform = 'rotate( ' + _this.currentAngle + 'deg )';
setTimeout(function() {
_this.slidesHolder.style.transitionDuration = _this.startSetup.animationDuration + 'ms';
}, 20);
}, this.startSetup.animationDuration);
} else {
this.currentSlide -= multiplier;
this.currentAngle += (this.stepAngle * 180 / Math.PI) * multiplier;
this.slidesHolder.style.transform = 'rotate( ' + this.currentAngle + 'deg )';
this.addStyle();
};
};
Slider.prototype.setNav = function() {
let _this = this;
_this.btnLeft.onclick = function() {
_this.rotate(1)
};
_this.btnRight.onclick = function() {
_this.rotate(-1)
};
};
Slider.prototype.disableNav = function() {
this.btnLeft.onclick = null;
this.btnRight.onclick = null;
};
Slider.prototype.setAutoplay = function() {
let _this = this;
this.autoplay = setInterval(function() {
_this.rotate(-1)
}, _this.startSetup.autoplayInterval + 20);
};
Slider.prototype.removeStyle = function() {
let x = this.currentSlide;
this.descriptions[x].classList.remove('descriptions__item_visible');
this.slides[x].classList.remove('slides-holder__item_active');
this.slides[x].style.height = this.slides[x].style.width = this.slidesSize + 'px';
};
Slider.prototype.addStyle = function() {
let x = this.currentSlide;
this.descriptions[x].classList.add('descriptions__item_visible');
this.slides[x].classList.add('slides-holder__item_active');
this.slides[x].style.height = this.slides[x].style.width = this.slidesSize + 20 + 'px';
};
Slider.prototype.resetNavs = function() {
let _this = this;
this.disableNav();
setTimeout(function() {
_this.setNav()
}, this.startSetup.animationDuration + 20);
if (this.autoplay != null) {
clearInterval(this.autoplay);
this.setAutoplay();
};
};
///////////Init sliders///////////
window.circularSlider1 = new Slider(document.querySelector('.circular-slider-1'), 100, 15, 600, 2500);
window.circularSlider2 = new Slider(document.querySelector('.circular-slider-2'), 90, 13, 700, 3000);
window.circularSlider3 = new Slider(document.querySelector('.circular-slider-3'), 80, 18, 800, 3700);
window.circularSlider4 = new Slider(document.querySelector('.circular-slider-4'), 70, 20, 900, 4200);
let sliders = [window.circularSlider1, window.circularSlider2, window.circularSlider3, window.circularSlider4];
window.onresize = function() {
for (let i = 0; i < sliders.length; i++) {
sliders[i].resetNavs();
sliders[i].onResize();
};
};
//////////////////////
})();
defer src = "https://use.fontawesome.com/releases/v5.0.6/js/all.js" >.slider {
width: 100% !important;
height: 100%;
margin: 0 !important;
padding: 0 !important;
}
.circular-slider {
width: 100%;
height: 100%;
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
background-color: transparent;
}
.circular-slider .wrapper {
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 20px 20px 0px 20px;
overflow: hidden;
width: 600%;
height: 100%;
}
.wrapper {
width: 100% !important;
height: 679px !important;
}
.circular-slider .wrapper .controls__left,
.circular-slider .wrapper .controls__right,
.circular-slider .wrapper .controls__autoplay {
position: absolute;
z-index: 101;
-webkit-transition: .6s all;
-o-transition: .6s all;
transition: .6s all;
}
.circular-slider .wrapper .controls__left:hover .icon-wrapper,
.circular-slider .wrapper .controls__right:hover .icon-wrapper,
.circular-slider .wrapper .controls__autoplay:hover .icon-wrapper {
font-size: 2.5em;
opacity: 0.7;
}
.circular-slider .wrapper .controls__left .icon-wrapper,
.circular-slider .wrapper .controls__right .icon-wrapper,
.circular-slider .wrapper .controls__autoplay .icon-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100%;
color: #e86225;
font-size: 2.5em;
opacity: 1;
}
.circular-slider .wrapper .controls__left,
.circular-slider .wrapper .controls__right {
top: 50%;
}
.circular-slider .wrapper .controls__left {
left: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.circular-slider .wrapper .controls__left:hover {
left: 0;
}
.circular-slider .wrapper .controls__right {
right: 0;
-webkit-transform: translate(0%, -50%);
-ms-transform: translate(0%, -50%);
transform: translate(0%, -50%);
}
.circular-slider .wrapper .controls__autoplay {
bottom: 0;
left: 50%;
-webkit-transform: translate(-50%, 0%);
-ms-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
}
.circular-slider .wrapper .controls__autoplay_running .pause {
display: block;
}
.circular-slider .wrapper .controls__autoplay_running .run {
display: none;
}
.circular-slider .wrapper .controls__autoplay_paused .pause {
display: none;
}
.circular-slider .wrapper .controls__autoplay_paused .run {
display: block;
}
.circular-slider .wrapper .slides-holder {
border-radius: 50%;
border: 5px solid #f25d2b;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
z-index: 100;
}
.circular-slider .wrapper .slides-holder__item {
border-radius: 70%;
border: 2px solid #f25d2b;
position: absolute;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
background-color: white;
-webkit-transition: .3s linear all;
-o-transition: .3s linear all;
transition: .3s linear all;
-webkit-filter: brightness(70%);
filter: brightness(70%);
}
.circular-slider .wrapper .slides-holder__item img {
width: 100%;
height: 100%;
border-radius: 70%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.circular-slider .wrapper .slides-holder__item_active {
-webkit-filter: brightness(100%);
filter: brightness(100%);
}
.circular-slider .wrapper .descriptions {
position: absolute;
bottom: 0%;
z-index: 0;
width: 100%;
height: 100%;
}
.circular-slider .wrapper .descriptions__item {
width: 100%;
height: 0%;
opacity: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex !important;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: opacity 0s 0s linear;
-o-transition: opacity 0s 0s linear;
transition: opacity 0s 0s linear;
}
.circular-slider .wrapper .descriptions__item_visible {
height: 100%;
opacity: 1;
-webkit-transition: opacity .6s 0s linear;
-o-transition: opacity .6s 0s linear;
transition: opacity .6s 0s linear;
}
.circular-slider .wrapper .descriptions__item h4,
.circular-slider .wrapper .descriptions__item .description {
font-family: Plus Jakarta Sans, sans-serif;
color: white;
text-align: center;
}
.circular-slider .wrapper .descriptions__item h4 {
font-size: 200%;
padding-top: 0px;
}
.circular-slider .wrapper .descriptions__item .descriptions {
font-size: 100%;
margin-top: 5px;
padding: 0% 10%;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow-y: hidden;
}
.description {
width: 100%;
}
.descriptions {
width: 50%;
height: 50%;
bottom: 100px !important;
}
.slides-holder__item {
width: 150px !important;
height: 150px !important;
}
a:link,
a:visited {
background-color: #f25d2b;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 40px;
font-family: Plus Jakarta Sans, sans-serif;
font-weight: bold;
margin-bottom: 10px;
border-radius: 10px;
}
a:hover,
a:active {
background-color: white;
color: #e86225;
font-size: 40px;
font-family: Plus Jakarta Sans, sans-serif;
font-weight: bold;
margin-bottom: 10px;
}<div class="slider">
<div class="circular-slider circular-slider-1">
<div class="wrapper">
<div class="controls">
<div class="controls__left">
<div class="icon-wrapper"><i class="far fa-arrow-alt-circle-left"></i></div>
</div>
<div class="controls__right">
<div class="icon-wrapper"><i class="far fa-arrow-alt-circle-right"></i></div>
</div>
<div class="controls__autoplay controls__autoplay_running">
<div class="icon-wrapper">
<div class="pause"><i class="far fa-pause-circle"></i></div>
<div class="run"><i class="far fa-play-circle"></i></div>
</div>
</div>
</div>
<div class="slides-holder">
<div class="slides-holder__item slides-holder__item_active"><img src="https://i.ibb.co/hBqL53D/Database-Matching-Technology.png" alt="img" /></div>
<div class="slides-holder__item"><img src="https://i.ibb.co/DQHMpQZ/Professional-Photos-3-D-Tours.png" alt="img" /></div>
<div class="slides-holder__item"><img src="https://i.ibb.co/txDW60M/Aggressive-Marketing.png" alt="img" /></div>
<div class="slides-holder__item"><img src="https://i.ibb.co/L1Zn0hh/Top-Notch-Agents.png" alt="img" /></div>
<div class="slides-holder__item"><img src="https://i.ibb.co/wd51b8r/Accurate-E-Valuation.png" alt="img" /></div>
<div class="slides-holder__item"><img src="https://i.ibb.co/k3mJ5gS/Dedicated-Support.png" alt="img" /></div>
<div class="slides-holder__item"><img src="https://i.ibb.co/JRCJfCm/OMH-O-Logo-Orange-White-Circle.png" alt="img" /></div>
</div>
<div class="descriptions">
<div class="descriptions__item descriptions__item_visible">
<h4 style="font-size: 40px; font-family: Plus Jakarta Sans; color:#e86225; margin-bottom: 10px; font-weight: bold;">Database Matching Technology</h4>
<p4 style="font-size: 18px; font-family: Plus Jakarta Sans; color:#000000; margin-bottom: 10px;" class="description">We serve over 175,000 transactors every month on our platform. Using smart data, our algorithm will search our extensive database to match the right buyers to your unit. Getting you the best price from all interested buyers.</p4>
</div>
<div class="descriptions__item">
<h4 style="font-size: 40px; font-family: Plus Jakarta Sans; color:#e86225; margin-bottom: 10px; font-weight: bold;">Professional Visuals & 3D Tour</h4>
<p4 style="font-size: 18px; font-family: Plus Jakarta Sans; color:#000000; margin-bottom: 10px;" class="description">Sell your home for what it’s worth, and more. With the right angles and photography, let us make your home look great. On top of that, a 3D virtual tour of your property will be set up for you. Get ready to see your home virtually!</p4>
</div>
<div class="descriptions__item">
<h4 style="font-size: 40px; font-family: Plus Jakarta Sans; color:#e86225; margin-bottom: 10px; font-weight: bold;">Aggressive Marketing</h4>
<p4 style="font-size: 18px; font-family: Plus Jakarta Sans; color:#000000; margin-bottom: 10px;" class="description">Benefit from proven marketing strategies that go beyond listing on our platform. Your property will also be marketed across all major listing platforms, including Google and Facebook.</p4>
</div>
<div class="descriptions__item">
<h4 style="font-size: 40px; font-family: Plus Jakarta Sans; color:#e86225; margin-bottom: 10px; font-weight: bold;">Top-Notch Agents</h4>
<p4 style="font-size: 18px; font-family: Plus Jakarta Sans; color:#000000; margin-bottom: 10px;" class="description">Real estate agents will be assigned to you based on the property type and district that they specialise in. With their in-depth knowledge and experience, expect only a smooth transaction from start to the end.</p4>
</div>
<div class="descriptions__item">
<h4 style="font-size: 40px; font-family: Plus Jakarta Sans; color:#e86225; margin-bottom: 10px; font-weight: bold;">Accurate E-Valuation</h4>
<p4 style="font-size: 18px; font-family: Plus Jakarta Sans; color:#000000; margin-bottom: 10px;" class="description">With our advanced prediction model, our home valuation estimate’s median error is as low as 3% - one of the highest accuracy estimates in the industry! WIth a more accurate estimate, you can sell your home at higher and fairer prices.</p4>
</div>
<div class="descriptions__item">
<h4 style="font-size: 40px; font-family: Plus Jakarta Sans; color:#e86225; margin-bottom: 10px; font-weight: bold;">Dedicated Support</h4>
<p4 style="font-size: 18px; font-family: Plus Jakarta Sans; color:#000000; margin-bottom: 10px;" class="description">Our agents do not work alone in supporting you. You’ll also have a dedicated Relationship Manager, providing you prompt updates all the way till your home is sold.</p4>
</div>
<div class="descriptions__item">
<a href="https://ohmyhome.com/en-sg/" target="_blank" role="button">Contact Us</a>