Widget:Slides: Difference between revisions
From Elwiki
mNo edit summary |
mNo edit summary |
||
Line 4: | Line 4: | ||
background-color: orange; | background-color: orange; | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
Line 24: | Line 12: | ||
} | } | ||
.slideshow .ss_nav | .slideshow .ss_nav span { | ||
position: absolute; | position: absolute; | ||
width: 50px; | width: 50px; | ||
height: 50px; | height: 50px; | ||
line-height: 50px; | |||
font-size: 50px; | font-size: 50px; | ||
text-align: center; | text-align: center; | ||
top: 50%; | top: 50%; | ||
margin-top: -25px; | margin-top: -25px; | ||
z-index: | z-index: 2; | ||
} | } | ||
Line 44: | Line 32: | ||
} | } | ||
.slideshow . | .slideshow .ss_contents { | ||
width: 100%; | width: 100%; | ||
height: 100%; | |||
} | } | ||
.slideshow .ss_content | .slideshow .ss_contents .ss_content { | ||
position: relative; | position: relative; | ||
float: left; | float: left; |
Revision as of 03:15, 25 September 2015
<style> .slideshow {
position: relative; background-color: orange; overflow: hidden;
}
.slideshow .ss_nav {
position: absolute; width: 100%; height: 100%;
}
.slideshow .ss_nav span {
position: absolute; width: 50px; height: 50px; line-height: 50px; font-size: 50px; text-align: center; top: 50%; margin-top: -25px; z-index: 2;
}
.slideshow .ss_nav .ss_prev {
left: 0;
}
.slideshow .ss_nav .ss_next {
right: 0;
}
.slideshow .ss_contents {
width: 100%; height: 100%;
}
.slideshow .ss_contents .ss_content {
position: relative; float: left;
} </style> <script> $(function(){
$('.ss_prev').click(function(){ var loop = $(this).parent().parent().hasClass('loop'), current = $(this).parent().siblings('.ss_content:first').children('li').not(':hidden'), width = current.width(); if(!current.is(':first-child')){ current.hide().prev('li').fadeIn(500); } else if(loop){ current.hide().siblings(':last-child').fadeIn(500); } }); $('.ss_next').click(function(){ var loop = $(this).parent().parent().hasClass('loop'), current = $(this).parent().siblings('.ss_content:first').children('li').not(':hidden'), width = current.width(); if(!current.is(':last-child')){ current.hide().next('li').fadeIn(500); } else if(loop){ current.hide().siblings(':first-child').fadeIn(500); } }); $('.ss_content li:first-child').siblings().hide();
}); </script>