Slider Carousel
Se for útil, dê like ou reblog.
Olá, hoje irei ensinar como se faz o slider que usamos aqui. Começando pelo JS.
Coloque isso dentro de <head></head>
<script type="text/javascript" language="javascript" src="http://static.tumblr.com/iusbjod/A4umcjqp5/jquery-1.8.2.min.js"></script> <script type="text/javascript" language="javascript" src="http://static.tumblr.com/iusbjod/1zmmcjqqd/jquery.caroufredsel-6.1.0-packed.js"></script> <script type="text/javascript" language="javascript"> $(function() { // Fuild layout, centering the items $('#foo5').carouFredSel({ width: 'TAMANHO', scroll: 1, pauseOnHover: 'resume', swipe: { onMouse: true, onTouch: true} }); }); </script>
Não mude nada aí. O scroll é o número de imagens que serão passadas por vezes, aconselho deixar 1 porque fica bem estranho 2 ou mais imagens passando de uma vez. Agora você coloque esse código no CSS:
/* --- slider por yeysources --- */ .wrapper {background-color: #; width: 230px; position: absolute; margin-top: 0px; margin-left: 0px;} .wrapper .descri {background: #96c8c9; padding: 4px; margin-right: 11px; margin-top: 15px; color: #fff; text-transform: uppercase; font-family: 'nunito', sans-serif; font-size: 9px; height: 47px; } .wrapper .descri m {color: #685a74;} .list_carousel {width: 240px; } .list_carousel ul {margin: 0; padding: 0; list-style: none; display: block; } .list_carousel li {margin-right: 13px; width: 235px; height: 126px; margin-top: 9px; display: inline-block;} .list_carousel.responsive {margin-left: 24px; width: auto; height: 106px;} .list_carousel.responsive img { -webkit-transition: all 0.7s linear; -moz-transition: all 0.7s linear; -o-transition: all 0.7s linear; transition: all 0.7s linear; } .list_carousel.responsive img:hover {opacity: 1;-webkit-transition: all 0.7s linear; -moz-transition: all 0.7s linear; -o-transition: all 0.7s linear; transition: all 0.7s linear;filter: none; -webkit-filter: grayscale(0%); } .clearfix {float: none;clear: both;} .prev {float: left; margin-left: 0px; } .next {float: right; margin-right: 0px; } .pager {float: left; width: 0; text-align: center; } .pager a {margin: 0 5px; text-decoration: none;} .pager a.selected {text-decoration: underline;} .timer {background-color: #999;height: 6px; width: 0px;}
No lugar de 'Largura da Imagem' você coloca a largura que deseja e o mesmo para 'Tamanho da Imagem'. Dentro de <body> e </body> você coloca esse código onde deseja que apareça o slider.
