eliteware
Reputation: 144
jQuery slider navigation issue
I've made a jQuery slider that would automatically change slides every 1s, but when i added sliding bullets (stylized divs) It started malfunctioning. I tried everything to fix it, but i couldn't figure out what's wrong, i hope you could do what i failed to do
If you didn't understand the description, here is a fiddle http://jsfiddle.net/fxk1fxy9/
PS: The slider itself works fine, and if i don't hover the "bullets" there is no issue
Here is my code
JS
$(document).ready(function(){
$('.pic').hide();
i=1;
function slider(){
$('#pic-'+i).fadeIn('0').delay(1000).fadeOut('0',function(){
i=i+1;if(i==6){i=1;}slider();
});
}
slider();
});
function show1(){
$('.pic').hide();
$('#pic-1').fadeIn('1').delay(1000);
}
function show2(){
$('.pic').hide();
$('#pic-2').fadeIn('1').delay(1000);
}
function show3(){
$('.pic').hide();
$('#pic-3').fadeIn('1').delay(1000);
}
function show4(){
$('.pic').hide();
$('#pic-4').fadeIn('1').delay(1000);
}
function show5(){
$('.pic').hide();
$('#pic-5').fadeIn('1').delay(1000);
}
HTML
<div class="slider">
<!-- Slide 1 -->
<div class="slide">
<div class="options">
<div class="option" onmouseover="show1();">
<div class="o-rank">
<h1> 1 </h1>
</div>
<div class="o-logo">
<img src="img/logo.png">
</div>
<div class="o-title">
<h1>Lorem ipsum </h1>
</div>
<div class="o-text">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices pellentesque facilisis. </p>
</div>
<div class="o-button">
<a href="#"> > </a>
</div>
</div>
<div class="option" onmouseover="show2();">
<div class="o-rank">
<h1> 2 </h1>
</div>
<div class="o-logo">
<img src="img/logo.png">
</div>
<div class="o-title">
<h1>Lorem ipsum </h1>
</div>
<div class="o-text">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices pellentesque facilisis. </p>
</div>
<div class="o-button">
<a href="#"> > </a>
</div>
</div>
<div class="option" onmouseover="show3();">
<div class="o-rank">
<h1> 3 </h1>
</div>
<div class="o-logo">
<img src="img/logo.png">
</div>
<div class="o-title">
<h1>Lorem ipsum </h1>
</div>
<div class="o-text">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices pellentesque facilisis. </p>
</div>
<div class="o-button">
<a href="#"> > </a>
</div>
</div>
<div class="option" onmouseover="show4();">
<div class="o-rank">
<h1> 4 </h1>
</div>
<div class="o-logo">
<img src="img/logo.png">
</div>
<div class="o-title">
<h1>Lorem ipsum </h1>
</div>
<div class="o-text">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices pellentesque facilisis. </p>
</div>
<div class="o-button">
<a href="#"> > </a>
</div>
</div>
<div class="option" onmouseover="show5();">
<div class="o-rank">
<h1> 5 </h1>
</div>
<div class="o-logo">
<img src="img/logo.png">
</div>
<div class="o-title">
<h1>Lorem ipsum </h1>
</div>
<div class="o-text">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices pellentesque facilisis. </p>
</div>
<div class="o-button">
<a href="#"> > </a>
</div>
</div>
</div>
<div class="pictures">
<div class="pic" id="pic-1">
<img src="img/1.jpg" id="tes-1" class="tes" >
</div>
<div class="pic" id="pic-2">
<img src="img/2.jpg" id="tes-2" class="tes">
</div>
<div class="pic" id="pic-3">
<img src="img/3.jpg" id="tes-3" class="tes">
</div>
<div class="pic" id="pic-4">
<img src="img/4.jpg" id="tes-4" class="tes">
</div>
<div class="pic" id="pic-5">
<img src="img/5.jpg" id="tes-5" class="tes">
</div>
</div>
</div>
</div>
CSS
*{margin:0; padding:0; border:0; box-sizing:border-box;font: inherit;}
.slider{
width:100%;
height:500px;
overflow:hidden;
background:#111;
}
.slide{
width:100%;
height:100%;
float:left;
position:relative;
}
.options{
width:10%;
height:100%;
position:absolute;
z-index:99;
}
.option{
width:700px;
height:18%;
margin-bottom:9%;
background:rgba(0, 0, 0, .7);
cursor:pointer;
transition:all .5s ease;
}
.option:hover{
background:#000;
}
.o-rank{
width:30px;
height:30px;
border-radius:50%;
background:#34495e;
float:left;
margin-left:5px;
margin-top:30px;
}
.o-rank h1{
font-family:arial;
font-weight:bold;
color:#fff;
font-size:18px;
text-align:center;
line-height:30px;
}
.o-logo{
width:50px;
height:50px;
float:left;
margin-top:20px;
margin-left:10px;
}
.o-logo img{
width:100%;
height:100%;
}
.o-title{
width:150px;
height:100%;
float:left;
margin-left:10px;
}
.o-title h1{
font-family:arial;
font-weight:bold;
color:#fff;
font-size:18px;
text-align:left;
line-height:90px;
text-transform:uppercase;
}
.o-text{
width:300px;
height:100%;
float:left;
margin-left:5px;
padding-top:20px;
}
.o-text p{
font-family:arial;
font-weight:normal;
color:#fff;
font-size:16px;
text-align:left;
}
.o-button{
width:60px;
height:40px;
background:#34495e;
float:right;
margin-top:25px;
text-align:center;
}
.o-button a{
font-family:arial;
font-weight:bold;
color:#fff;
font-size:24px;
text-decoration:none;
line-height:40px;
}
.pictures{
width:100%;
height:100%;
z-index:10;
}
#pic-1, #pic-2, #pic-3, #pic-4, #pic-5{
width:100%;
height:100%;
}
.pic img{
width:100%;
height:100%;
}
.p-hov{
position:relative;
width:100%;
height:100%;
background:#000;
z-index:999;
}
#pic-h-1, #pic-h-2, #pic-h-3, #pic-h-4, #pic-h-5{
width:100%;
height:100%;
visibility:hidden;
position:absolute
}
.pic-h img{
width:100%;
height:100%;
}
/* Responsive */
@media only screen
and (max-width : 800px) {
.slider{
height:220px;
}
.option{
width:300px;
}
.o-rank{
width:15px;
height:15px;
float:left;
margin-top:10px;
margin-left:4px;
}
.o-rank h1{
font-size:10px;
line-height:15px;
}
.o-logo{
width:20px;
height:20px;
float:left;
margin-top:7.5px;
margin-left:6px;
}
.o-title{
width:70px;
height:100%;
float:left;
margin-left:10px;
}
.o-title h1{
font-family:arial;
font-weight:bold;
color:#fff;
font-size:8px;
text-align:left;
line-height:40px;
text-transform:uppercase;
}
.o-text{
width:135px;
height:100%;
float:left;
margin-left:0px;
padding-top:5px;
}
.o-text p{
font-family:arial;
font-weight:normal;
color:#fff;
font-size:8px;
text-align:left;
}
.o-button{
width:30px;
height:15px;
background:#34495e;
float:right;
margin-top:10px;
text-align:center;
}
.o-button a{
font-family:arial;
font-weight:bold;
color:#fff;
font-size:10px;
text-decoration:none;
position:relative;
top:-12px;
}
}
Upvotes: 0
Views: 77
Answers (2)
Trey
Reputation: 5520
A couple things.... you need to be able to pause the slideshow if you want hover effects to work, you also should abstract those mouseover events into a hover handler so you don't have to define individual functions or element attributes.... try something like this
(function($){
$(document).ready(function(){
$('.pic').hide();
slider_delay = false;
function slider(hover) {
var current = $('.pic.active');
var next;
if(!hover){
next = current.next();
}else{
next=$('#pic-'+hover.attr('id').split('_')[1]);
}
if (next.length == 0) next = $('#pic-1');
current.fadeOut('slow', function () {
$(this).removeClass('active');
$(next).fadeIn('slow', function () {
$(this).addClass('active');
window.clearTimeout(slider_delay);
if (!hover) slider_delay = window.setTimeout(slider, 1000);
});
});
}
$('.option').hover(function () {
window.clearTimeout(slider_delay);
slider($(this));
},
function(){
window.clearTimeout(slider_delay);
slider_delay = window.setTimeout(slider, 1000);
});
function init_slider() {
$('#pic-1').fadeIn('slow', function () {
$(this).addClass('active');
window.clearTimeout(slider_delay);
slider_delay = window.setTimeout(slider, 1000);
});
}
init_slider();
});
})(jQuery);*{margin:0; padding:0; border:0; box-sizing:border-box;font: inherit;}
.slider{
width:100%;
height:500px;
overflow:hidden;
background:#111;
}
.slide{
width:100%;
height:100%;
float:left;
position:relative;
}
.options{
width:10%;
height:100%;
position:absolute;
z-index:99;
}
.option{
width:700px;
height:18%;
margin-bottom:9%;
background:rgba(0, 0, 0, .7);
cursor:pointer;
transition:all .5s ease;
}
.option:hover{
background:#000;
}
.o-rank{
width:30px;
height:30px;
border-radius:50%;
background:#34495e;
float:left;
margin-left:5px;
margin-top:30px;
}
.o-rank h1{
font-family:arial;
font-weight:bold;
color:#fff;
font-size:18px;
text-align:center;
line-height:30px;
}
.o-logo{
width:50px;
height:50px;
float:left;
margin-top:20px;
margin-left:10px;
}
.o-logo img{
width:100%;
height:100%;
}
.o-title{
width:150px;
height:100%;
float:left;
margin-left:10px;
}
.o-title h1{
font-family:arial;
font-weight:bold;
color:#fff;
font-size:18px;
text-align:left;
line-height:90px;
text-transform:uppercase;
}
.o-text{
width:300px;
height:100%;
float:left;
margin-left:5px;
padding-top:20px;
}
.o-text p{
font-family:arial;
font-weight:normal;
color:#fff;
font-size:16px;
text-align:left;
}
.o-button{
width:60px;
height:40px;
background:#34495e;
float:right;
margin-top:25px;
text-align:center;
}
.o-button a{
font-family:arial;
font-weight:bold;
color:#fff;
font-size:24px;
text-decoration:none;
line-height:40px;
}
.pictures{
width:100%;
height:100%;
z-index:10;
}
#pic-1, #pic-2, #pic-3, #pic-4, #pic-5{
width:100%;
height:100%;
}
.pic img{
width:100%;
height:100%;
}
.p-hov{
position:relative;
width:100%;
height:100%;
background:#000;
z-index:999;
}
#pic-h-1, #pic-h-2, #pic-h-3, #pic-h-4, #pic-h-5{
width:100%;
height:100%;
visibility:hidden;
position:absolute
}
.pic-h img{
width:100%;
height:100%;
}
/* Responsive */
@media only screen
and (max-width : 800px) {
.slider{
height:220px;
}
.option{
width:300px;
}
.o-rank{
width:15px;
height:15px;
float:left;
margin-top:10px;
margin-left:4px;
}
.o-rank h1{
font-size:10px;
line-height:15px;
}
.o-logo{
width:20px;
height:20px;
float:left;
margin-top:7.5px;
margin-left:6px;
}
.o-title{
width:70px;
height:100%;
float:left;
margin-left:10px;
}
.o-title h1{
font-family:arial;
font-weight:bold;
color:#fff;
font-size:8px;
text-align:left;
line-height:40px;
text-transform:uppercase;
}
.o-text{
width:135px;
height:100%;
float:left;
margin-left:0px;
padding-top:5px;
}
.o-text p{
font-family:arial;
font-weight:normal;
color:#fff;
font-size:8px;
text-align:left;
}
.o-button{
width:30px;
height:15px;
background:#34495e;
float:right;
margin-top:10px;
text-align:center;
}
.o-button a{
font-family:arial;
font-weight:bold;
color:#fff;
font-size:10px;
text-decoration:none;
position:relative;
top:-12px;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="slider">
<!-- Slide 1 -->
<div class="slide">
<div class="options">
<div class="option" id="ref_1">
<div class="o-rank">
<h1> 1 </h1>
</div>
<div class="o-logo">
<img src="http://www.pazarlamasyon.com/wp-content/uploads/2014/05/BMW_logo.png">
</div>
<div class="o-title">
<h1>Lorem ipsum </h1>
</div>
<div class="o-text">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices pellentesque facilisis. </p>
</div>
<div class="o-button">
<a href="#"> > </a>
</div>
</div>
<div class="option" id="ref_2">
<div class="o-rank">
<h1> 2 </h1>
</div>
<div class="o-logo">
<img src="http://www.pazarlamasyon.com/wp-content/uploads/2014/05/BMW_logo.png">
</div>
<div class="o-title">
<h1>Lorem ipsum </h1>
</div>
<div class="o-text">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices pellentesque facilisis. </p>
</div>
<div class="o-button">
<a href="#"> > </a>
</div>
</div>
<div class="option" id="ref_3">
<div class="o-rank">
<h1> 3 </h1>
</div>
<div class="o-logo">
<img src="http://www.pazarlamasyon.com/wp-content/uploads/2014/05/BMW_logo.png">
</div>
<div class="o-title">
<h1>Lorem ipsum </h1>
</div>
<div class="o-text">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices pellentesque facilisis. </p>
</div>
<div class="o-button">
<a href="#"> > </a>
</div>
</div>
<div class="option" id="ref_4">
<div class="o-rank">
<h1> 4 </h1>
</div>
<div class="o-logo">
<img src="http://www.pazarlamasyon.com/wp-content/uploads/2014/05/BMW_logo.png">
</div>
<div class="o-title">
<h1>Lorem ipsum </h1>
</div>
<div class="o-text">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices pellentesque facilisis. </p>
</div>
<div class="o-button">
<a href="#"> > </a>
</div>
</div>
<div class="option" id="ref_5">
<div class="o-rank">
<h1> 5 </h1>
</div>
<div class="o-logo">
<img src="http://www.pazarlamasyon.com/wp-content/uploads/2014/05/BMW_logo.png">
</div>
<div class="o-title">
<h1>Lorem ipsum </h1>
</div>
<div class="o-text">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices pellentesque facilisis. </p>
</div>
<div class="o-button">
<a href="#"> > </a>
</div>
</div>
</div>
<div class="pictures">
<div class="pic" id="pic-1">
<img src="http://inourvillage.net/wp-content/uploads/2013/06/placeholder4-1024x768.png" id="tes-1" class="tes" >
</div>
<div class="pic" id="pic-2">
<img src="http://trustedfinance.co.uk/wp-content/uploads/2014/05/placeholder-red.png" id="tes-2" class="tes">
</div>
<div class="pic" id="pic-3">
<img src="http://trustedfinance.co.uk/wp-content/uploads/2014/05/placeholder-green.png" id="tes-3" class="tes">
</div>
<div class="pic" id="pic-4">
<img src="http://placehold.it/1280x768.png/222/fff&text=placeholder" id="tes-4" class="tes">
</div>
<div class="pic" id="pic-5">
<img src="http://duinccyv5gl5b.cloudfront.net/uploads/2012/04/slide-placeholder-31.png" id="tes-5" class="tes">
</div>
</div>
</div>
</div>Upvotes: 1
slashsharp
Reputation: 2833
Your slider works as what you've coded.
Change onmouseover="show1();" to onmouseenter="show1();" if you want it to fade just once.
Upvotes: 0
Related Questions
- JavaScript Slider Issue
- Conflict with JQuery Scripts Slider & Navigation
- Issues with jQuery Slider
- html link and slider conflict
- JS Slider is covering my navigation div -- not sure why
- Issue with JQuery slider
- navigation slide in issue
- Jquery HTML CSS Slider issue
- jQuery slider trouble
- jquery slider problem