0
일부 스택 오버플로 사용자의 도움으로 jquery를 사용하여 슬라이더를 만들었고 완벽하게 작동했습니다. 하지만 슬라이더의 레이아웃을 변경하고 슬라이더를 부러 뜨 렸습니다. 어떻게 또는 왜 그런지 전혀 알지 못합니다. 기본적으로 모든 슬라이드가 컨테이너에서 푸시되고 jQuery가 중단됩니다. 누구든지 내 코드를 깨기 위해 무엇을했는지 알아 내면 도움이 될 수있어 정말 고맙겠습니다. 컨테이너 밖으로 밀어내는 슬라이더 내용
여기
는 작업 버전이었다 : http://jsfiddle.net/videma/t534v/그리고 여기에 작동하지 않는 내 새로운 코드가 바이올린의 : http://jsfiddle.net/HfRdb/
을 그리고 여기에 코드입니다 :
HTML :
<div class="slideshow">
<div class="slideContainer">
<div class="slide">
<span class="slideMiddle"></span><img src="http://renegademagsu.com/wp-content/uploads/2014/05/malcolm-x.png">
</div>
<div class="slideInfo">
<p class="slideCaption">
Denzel’s portrayal of Malcolm X was the role that most thought would win him an Oscar. In one scene, Malcolm and other members of the Nation of Islam demand the release of one of their fellow Muslims from jail by crowding the street outside of the building. After succeeding in this, Malcolm raises his hand and signals for his men to leave. With flick of his wrist, about one hundred protesters turn in unison and march away, as if a general had commanded them. Even a white cop notices his influence and says, “That’s too much power for a n***er to have.” If Malcolm X wasn’t bad ass enough, Denzel playing him just sweetened the deal. </p>
<p class="slideCredit">
<a href="http://www.popcornreel.com/jpgimg/x%20004.png" target="_blank">Popcorn Reel" </p>
</div> <!--slideInfo end-->
<div class="fix"></div>
</div> <!--slideContainer end-->
<!--end if each if-->
<div class="slideContainer">
<div class="slide">
<span class="slideMiddle"></span><img src="http://renegademagsu.com/wp-content/uploads/2014/05/remember-the-titans.png">
</div>
<div class="slideInfo">
<p class="slideCaption">
No one can forget Denzel’s role as coach of a newly integrated high school football team in 1970s Virginia. Even though this is one of Denzel’s small bad ass roles, you have to admit, Coach Boone was scary enough to intimate anyone into doing 100 push ups. </p>
<p class="slideCredit">
<a href="http://www.monologuedb.com/wp-content/uploads/2011/02/denzel-washington-coach-herman-boone-remember-the-titans.jpg" target="_blank">MonologueDB</a> </p>
</div> <!--slideInfo end-->
<div class="fix"></div>
</div> <!--slideContainer end-->
<!--end if each if-->
<div class="slideContainer">
<div class="slide">
<span class="slideMiddle"></span><img src="http://renegademagsu.com/wp-content/uploads/2014/05/safe-house.png">
</div>
<div class="slideInfo">
<p class="slideCaption">
What do you do when you’re a fugitive and a CIA agent is looking after you? Just follow Denzel’s bad ass steps in this one scene. After Ryan Reynolds’ character has arrested Denzel’s character, he takes him to an arena where a soccer game is taking place in order to get weapons out of a locker. While in a crowd outside the arena, Denzel manages to trick the stadium security into believing he’s being kidnapped. They not only set him free, but then arrest Ryan Reyonlds. Denzel then effortlessly waltzes right out of the stadium. No sweat for a bad ass. </p>
<p class="slideCredit">
<a href="http://www.hbo.com/movies/safe-house" target="_blank">HBO</a> </p>
</div> <!--slideInfo end-->
<div class="fix"></div>
</div> <!--slideContainer end-->
<!--end if each if-->
<div class="slideContainer">
<div class="slide">
<span class="slideMiddle"></span><img src="http://renegademagsu.com/wp-content/uploads/2014/05/training-day.png">
</div>
<div class="slideInfo">
<p class="slideCaption">
Who could forget Denzel’s Academy Award winning role as Detective Alonzo Harris, the corrupt and rogue narcotics officer who plays by his own rules. A memorable scene is when Alonzo and the rookie cop Jake, stop two guys from raping a 14-year-old girl. While Jake chooses to arrest them, Alonzo grabs one of the men, puts a knife to his throat, and then points 2 guns at his crouch, threatening to shoot him. Instead of shooting he punches him and says, “Man I’m thirsty, I could use a beer.” </p>
<p class="slideCredit">
<a href="http://roley.tumblr.com/post/8472254874/told-me-to-suck-your-dick-is-that-what-you" target="_blank">roley.tumblr.com </p>
</div> <!--slideInfo end-->
<div class="fix"></div>
</div> <!--slideContainer end-->
<!--end if each if-->
<div class="slideContainer">
<div class="slide">
<span class="slideMiddle"></span><img src="http://renegademagsu.com/wp-content/uploads/2014/05/man-on-fire.png">
</div>
<div class="slideInfo">
<p class="slideCaption">
If you want to learn about revenge, just watch Denzel in action in this movie after kidnappers try to take little Dakota Fanning. Denzel, her bodyguard, gets ahold of a corrupt cop who he needs answers from, and interrogates him by sticking a detonator up his rectum, threatening to blow the cop up if he doesn’t get information. However, when he finally gets the answers he’s looking for, Denzel detonates the bomb anyway and walks away from the explosion in slow motion. Total bad ass move. </p>
<p class="slideCredit">
<a href="http://www.thefancarpet.com/uploaded_assets/images/gallery/1498/Man_On_Fire_18347_Medium.jpg" target="_blank">The Fan Carpet</a> </p>
</div> <!--slideInfo end-->
<div class="fix"></div>
</div> <!--slideContainer end-->
<!--end if each if-->
<div class="slideContainer">
<div class="slide">
<span class="slideMiddle"></span><img src="http://renegademagsu.com/wp-content/uploads/2014/05/american-gangster.png">
</div>
<div class="slideInfo">
<p class="slideCaption">
Denzel plays the notorious gangster, Frank Lucas, who kills a man who doesn’t pay him the money he owes. Without hesitation, Lucas kills the man in the street in broad daylight with people around. As if that wasn’t badass enough, right after, he returns to the restaurant he’d been in, and continues eating his food, as if nothing had happened. Now that’s bad ass. </p>
<p class="slideCredit">
<a href="http://www.dvdbeaver.com/film2/DVDReviews42/american%20gangster%20blu-ray/HF7Y9005_american_gangster_blu-ray.jpg" target="_blank">DVD Beaver</a> </p>
</div> <!--slideInfo end-->
<div class="fix"></div>
</div> <!--slideContainer end-->
<!--end if each if-->
<!--end each-->
</div><!--slideshow end-->
<div class="slideNav">
<div class="prevSlide">
<i class="fa fa-chevron-left fa-2x"></i>
</div>
<div class="slideCount"></div>
<div class="nextSlide">
<i class="fa fa-chevron-right fa-2x"></i>
</div>
<div class="fix"></div>
</div>
<!--end if-->
</div>
</div>
CSS :
.slideshow {
background-color: #FFFFFF;
width: 100%;
height: 520px;
position: relative;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
}
.slideContainer {
background-color: #FFFFFF;
padding: 10px;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
}
.slide {
width: 100%;
height: 500px;
text-align: center;
border: 1px solid #000;
}
.slideMiddle {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.slide img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
border: 1px solid #000;
}
.slideInfo {
color: #FFF;
width: 100%;
height: 80%;
padding: 10px;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
}
.slideCredit {
width: 100%;
font-style: italic;
font-size: 12px;
}
.slideNav {
width: 100%;
padding: 10px;
color: #000;
position:relative;
border: 1px solid #000;
}
.prevSlide {
width: 33.3%;
float: left;
}
.nextSlide {
width: 33.3%;
float: right;
text-align: right;
}
.slideCount {
width: 23.3%;
text-align: center;
position:absolute;
left:40%;
}
jQuery를 :
$('.slideCount').each(function(){
var text='1/'+$(this).parents('div.postContainer').find('.slideContainer').length
$(this).text(text)
})
$('.nextSlide').show()
$('.prevSlide').hide()
$('div.nextSlide').click(function (e){
var count=parseInt($(this).siblings('.slideCount').text())
var slideshow=$(this).parents('div.postContainer').find('.slideshow')
var slides = $(slideshow).children().length;
if(count===slides){
e.preventDefault()
}else{
count++
$(this).parents('div.postContainer').find('div.slideContainer:first').appendTo(slideshow)
$(this).siblings('.slideCount').text(count+'/'+slides)
}
if(count===slides){$(this).hide()}else{$(this).parent().find('div.prevSlide').show()}
});
$('.prevSlide').click(function (e){
var count=parseInt($(this).siblings('.slideCount').text().slice(0,-2))
var slideshow=$(this).parents('div.postContainer').find('.slideshow')
var slides = $(slideshow).children().length;
if(count===1){e.preventDefault()}else{
count--
$(this).parents('div.postContainer').find('div.slideContainer:last').prependTo(slideshow)
$(this).siblings('.slideCount').text(count+'/'+slides)
}
if(count===1){$(this).hide()}else{$(this).parent().find('div.nextSlide').show()}
});
슬라이드는 어떻게 표시되어야합니까? 이미지 위에 텍스트? 이미지 아래의 텍스트? – Koralarts
@Koralarts 원본 슬라이드 쇼에서 텍스트는 이미지 옆에 있지만 새 이미지에서는 코드가 너무 작아서 이미지가 커질 수 있으므로 아래에 세금을 넣으려고했습니다. – nellygrl