I have a problem in a JavaScript function in which i handle slider properties. I have 3 slide with class .slide
and everytime i "choose" one of them i set it with .active-slide
class. The problem is that also if the display
property of active-slide
is table
, when i set this class, it automatically changes to block
and i can't understand why. P.s. i'm using also bootstrap. I'm posting here the part of my code related to this problem:
HTML:
<div class="slider">
<div class="slide active-slide">
<div class="container up">
<div class="row">
<div class="col-md-5 slide-text">
<h1 class="slide-title">whatuwant</h1>
<p class="slide-par">whatuwant</p>
<a href="#" class="slide-link">whatuwant</a>
</div>
<div class="col-md-7" id="first-slide-image">
<img src="whatuwant"/>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container up">
<div class="row">
<div class="col-md-5 slide-text">
<h1 class="slide-title">whatuwant</h1>
<p class="slide-par">whatuwant</p>
</div>
<div class="col-md-7" id="second-slide-image">
<img src="whatuwant"/>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container up">
<div class="row">
<div class="col-md-5 slide-text">
<h1 class="slide-title">whatuwant</h1>
<p class="slide-par">whatuwant</p>
</div>
<div class="col-md-7 slide-image" id="third-slide-image">
<img src="whatuwant"/>
</div>
</div>
</div>
</div>
</div>
CSS:
.container {
width: 1024px;
}
.up{
display: table-cell;
vertical-align: middle;
max-width: 1024px;
max-height: 470px;
}
.row{
width: 1024px;
margin: 0 auto;
max-width: 1024px;
}
.slider {
position: relative;
width: 100%;
height: 470px;
}
.slide {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide{
display: table;
}
JavaScript:
$(document).ready(function() {
$('.buttonfornextslide').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
if(nextSlide.length === 0) {
nextSlide = $('.slide').first();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
});
$('.buttonforpreviousslide').click(function() {
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
if(prevSlide.length === 0) {
prevSlide = $('.slide').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
});
});
I tried to simplify it to the maximum i could. If the question wasn't clear: how can i hold the .active-slide
display property to table
?
jQuery automatically assigns "default" styles to elements when using fadeIn, slideDown, etc. Since the default style for divs are "block", that's what is being applied. Instead of using the class "active-slide", try specifically setting the CSS
....
prevSlide.fadeIn(600).css('display','table');
Refs:
Fiddle - you can see that "display" block was in the class' style, and you have to literally add it after the fadeIn function.
In the fiddle, add
.css('display','block');
and run it, you'll see the changes
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다