Widget:Slides: Difference between revisions
From Elwiki
mNo edit summary |
mNo edit summary |
||
Line 2: | Line 2: | ||
.slideshow { | .slideshow { | ||
position: relative; | position: relative; | ||
background-color: orange; | |||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
.slideshow . | .slideshow ul { | ||
position: relative; | |||
padding: 0; | |||
margin: 0; | |||
} | |||
.slideshow ul li { | |||
padding: 0; | |||
margin: 0; | |||
list-style-type: none; | |||
} | |||
.slideshow .ss_nav { | |||
position: absolute; | position: absolute; | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
} | |||
.slideshow .ss_nav li { | |||
position: absolute; | |||
width: 50px; | |||
height: 50px; | |||
font-size: 50px; | |||
text-align: center; | |||
line-height: 50px; | |||
top: 50%; | top: 50%; | ||
margin-top: - | margin-top: -25px; | ||
z-index: 99999; | |||
} | |||
.slideshow .ss_nav .ss_prev { | |||
left: 0; | |||
} | |||
.slideshow .ss_nav .ss_next { | |||
right: 0; | |||
} | |||
.slideshow .ss_content { | |||
width: 100%; | |||
} | |||
.slideshow .ss_content li { | |||
position: relative; | |||
float: left; | |||
} | } | ||
</style> | </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> |
Revision as of 02:04, 17 September 2015
<style> .slideshow {
position: relative; background-color: orange; overflow: hidden;
}
.slideshow ul {
position: relative; padding: 0; margin: 0;
} .slideshow ul li {
padding: 0; margin: 0; list-style-type: none;
}
.slideshow .ss_nav {
position: absolute; width: 100%; height: 100%;
}
.slideshow .ss_nav li {
position: absolute; width: 50px; height: 50px; font-size: 50px; text-align: center; line-height: 50px; top: 50%; margin-top: -25px; z-index: 99999;
}
.slideshow .ss_nav .ss_prev {
left: 0;
}
.slideshow .ss_nav .ss_next {
right: 0;
}
.slideshow .ss_content {
width: 100%;
}
.slideshow .ss_content li {
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>