C
Crisbloardico
Gamma
SEO
No recomendado
Bueno e puesto esta recuadro de imagenes pero se me alinean a la derecha que ago para que queden bien alineados
este el css
#myslides{
background:url('http://2.bp.blogspot.com/-hFOSoGu3GrM/Tmkz4NQqoNI/AAAAAAAAA_c/nLn5eYaWEP4/s1600/SliderBlue+%25281%2529.gif') no-repeat;
}
.stepcarousel{
position: relative;
overflow: scroll;
width: 94.7%;
height: 190px;
margin: 1px 1px 1px 25px;
border:solid #070707 0px;
}
.stepcarousel .belt{
position: absolute;
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left;
overflow: hidden;
margin: 35px 15px ;
width:100px;
background:#121315;
height:140px;
border:1px solid #368dc7;
}
.stepcarousel .panel p{
text-align: left;
overflow: hidden;
margin: 15px 15px ;
}
.stepcarousel .panel h2{
text-align: left;
height:20px;
overflow: hidden;
margin: 0px 0px ;
font-weight:bold;
text-align:center;
}
.stepcarousel .panel img{
float: left;
background:#040404;
margin: 0px 0px 0px 0px;
padding:0px 0px;
}
.panel img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}
.panel img:hover {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
<div class='content'>
<div id='myslides'>
<script type='text/javascript'>
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 5, leftnav: ['http://2.bp.blogspot.com/-hFOSoGu3GrM/Tmkz4NQqoNI/AAAAAAAAA_c/nLn5eYaWEP4/s1600/SliderBlue+%25281%2529.gif', -16, 80], rightnav: ['http://1.bp.blogspot.com/-nkjSJN0lOi0/TlFXXE9IrYI/AAAAAAAAADM/csCJgduCNY0/s1600/Next.png', -3, 80]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>
<div class='stepcarousel' id='mygallery'>
<div class='belt'>
<div class='panel'>
<div class='panel22 section' id='panel22'><div class='widget HTML' id='HTML102'>
<div class='widget-content'>
<a href='#' title='Bridesmaids (2011)'><img alt='descrip' border='0' src='imagen' style='height: 140px; width: 100px;'/></a>
</div>
</div></div>
</div>
este el css
#myslides{
background:url('http://2.bp.blogspot.com/-hFOSoGu3GrM/Tmkz4NQqoNI/AAAAAAAAA_c/nLn5eYaWEP4/s1600/SliderBlue+%25281%2529.gif') no-repeat;
}
.stepcarousel{
position: relative;
overflow: scroll;
width: 94.7%;
height: 190px;
margin: 1px 1px 1px 25px;
border:solid #070707 0px;
}
.stepcarousel .belt{
position: absolute;
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left;
overflow: hidden;
margin: 35px 15px ;
width:100px;
background:#121315;
height:140px;
border:1px solid #368dc7;
}
.stepcarousel .panel p{
text-align: left;
overflow: hidden;
margin: 15px 15px ;
}
.stepcarousel .panel h2{
text-align: left;
height:20px;
overflow: hidden;
margin: 0px 0px ;
font-weight:bold;
text-align:center;
}
.stepcarousel .panel img{
float: left;
background:#040404;
margin: 0px 0px 0px 0px;
padding:0px 0px;
}
.panel img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}
.panel img:hover {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
<div class='content'>
<div id='myslides'>
<script type='text/javascript'>
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 5, leftnav: ['http://2.bp.blogspot.com/-hFOSoGu3GrM/Tmkz4NQqoNI/AAAAAAAAA_c/nLn5eYaWEP4/s1600/SliderBlue+%25281%2529.gif', -16, 80], rightnav: ['http://1.bp.blogspot.com/-nkjSJN0lOi0/TlFXXE9IrYI/AAAAAAAAADM/csCJgduCNY0/s1600/Next.png', -3, 80]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>
<div class='stepcarousel' id='mygallery'>
<div class='belt'>
<div class='panel'>
<div class='panel22 section' id='panel22'><div class='widget HTML' id='HTML102'>
<div class='widget-content'>
<a href='#' title='Bridesmaids (2011)'><img alt='descrip' border='0' src='imagen' style='height: 140px; width: 100px;'/></a>
</div>
</div></div>
</div>

