I am currently working on a carousel because I don't want to use any plugins, etc.
However, I was stuck on a span portion as it rotated through my elements without clicking.
What works:
- Buttons
Nextand Prevwork - Interval works for the first instance
What does not work:
- After the first instance, the interrupt stops
- The interval does not work when you press the
Prevor buttonsNext
I realized that after the interval stops after the first instance, I can leave the area of the element and move it back, and the interval will work correctly.
Does anyone have any recommendations on how I could improve this?
What I have tried so far:
$(document).ready(function() {
statementScroll();
});
function statementScroll() {
var intervalStatement = 0;
var intervalFunc = {
start: function() {
intervalStatement = setInterval(function() {
$("#our-mission .statement .next").click();
}, 2000);
},
stop: function() {
clearInterval(intervalStatement);
intervalStatement = 0;
},
};
$("#our-mission .statement .next").on("click", function() {
if ($("#our-mission .statement .item.active").next(".item").length) {
$("#our-mission .statement .item.active").removeClass("active").next(".item").addClass("active");
} else {
$("#our-mission .statement .item.active").removeClass("active");
$("#our-mission .statement .item").first().addClass("active");
}
});
$("#our-mission .statement .prev").on("click", function() {
if ($("#our-mission .statement .item.active").prev(".item").length) {
$("#our-mission .statement .item.active").removeClass("active").prev(".item").addClass("active");
} else {
$("#our-mission .statement .item.active").removeClass("active");
$("#our-mission .statement .item").last().addClass("active");
}
});
$("#our-mission").on("mouseenter", function() {
intervalFunc.start();
});
$("#our-mission .statement").on("mouseout", function() {
intervalFunc.stop();
});
}
#our-mission{
height: 500px;
max-height: 500px;
overflow: hidden;
background: url(../images/6.JPG) no-repeat;
background-position: center;
position: relative;
}
#our-mission h2{
width: 25%;
margin: auto;
margin-top: 200px;
font-size: 45px;
background: #012265;
background: #01226587;
text-align: center;
padding: 10px;
color: #ffffff;
border-radius: 8px;
text-shadow: 1px 1px 1px #000000;
}
#our-mission .statement{
position: absolute;
width: 100%;
height: 100%;
text-align: center;
visibility: hidden;
opacity: 0;
background: #012265;
background: #012265de;
}
#our-mission .statement .item{
display: none;
}
#our-mission .statement .item h3{
margin: 0;
font-size: 60px;
}
#our-mission .statement .item p{
font-size: 25px;
}
#our-mission .statement .item.active{
display: block;
height: 100%;
top: 0;
left: 0;
padding-top: 175px;
color: #ffffff;
text-shadow: 1px 2px 2px #000000;
}
#our-mission:hover > .statement{
visibility: visible;
-webkit-transition: opacity 0.5s ease-in;
-moz-transition: opacity 0.5s ease-in;
-o-transition: opacity 0.5s ease-in;
opacity: 1;
cursor: pointer;
}
#our-mission .statement .prev{
position: absolute;
left: 100px;
top: 200px;
font-size: 60px;
color: #ffffff;
}
#our-mission .statement .next{
position: absolute;
right: 100px;
top: 200px;
font-size: 60px;
color: #ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="our-mission">
<div class="statement">
<div class="prev"><i class="fa fa-arrow-circle-o-left" aria-hidden="true"></i></div>
<div class="item active">
<h3>Vision</h3>
<p>Learn Together, Achieve Together and Celebrate Together</p>
</div>
<div class="item">
<h3>Mission</h3>
<p>To enable children to achieve their true potential in a happy and safe environment</p>
</div>
<div class="item">
<h3>Core Values</h3>
<p>Respect, Aspiration, Responsibility and Pride</p>
</div>
<div class="next"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i></div>
</div>
<h2>Mission Statements</h2>
</section>