#caroufredsel

carouFredSel çok güçlü bir carousel plug ini. bu örnekte iki farklı carousel i birbiri ile senkronize ediyor.

Bom, antes de mais nada, gostaria de dizer que eu entendi boa parte do js desse slider, algumas coisas que deixei passar e outras eu arrumei de forma que ficasse bom para o meu uso pessoal, que eu vinhesse a entender quando quisesse fazer. Então, como esta nos créditos, tem lá o site do slider, porque a gente usou ele primeiro então esta lá. Quem quiser ir lá dar uma conferida (esta em inglês) fique a vontade. O tthy é o primeiro tumblr a postar esse estilo de slider, então que fique claro.

# Preview

No site, ao baixar o pacote, vem com as versões que o slider tem. Eu usei o responsive, que fica legal usado na tela toda, como no meu portfolio, pode ver que o slider se mexe de canto a canto, então, caso a imagem dê naquele local, vai ficar bem legal. Tem vários tipos, então depende de vocês.

Coloque isso antes de </head>:

Isso é o js que faz o seu slider pegar, se não estiver no local correto o seu slider não vai ficar legal, ou seja, não vai funcionar. No código acima, temos:

scroll: 2,

Isso é a quantidade de item que vai ser exibido, ou seja, no preview aparece dois, por isso tem dois no código, então você quer que apareça de um em um, então você vai por 1, ou 3, dai você põe 3 Lembrando que, se aparecer 3, vai os 3 juntos, os 3 juntos somem ao dar o tempo para o slider "passar". Lembrando também, que deve caber tal quantidade em tal local.

Vamos para a parte do CSS. Bom esse CSS abaixo não é o do preview, esse é o com o tamanho da imagem do nosso tema anterior, então, preste atenção na explicação.

/* Slider Carousel tutorial por things-to-help-you se usar, credite! :) */ .wrapper {background-color: #; width: 240px; position: absolute; margin-top: 20px; 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: 105px;} .list_carousel ul {margin: 0; padding: 0; list-style: none; display: block; } .list_carousel li {margin-right: 13px; width: 105px; height: 106px; margin-top: 9px; display: inline-block;} .list_carousel.responsive {margin-left: 4px; 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;}

Você não pode apagar nada desse CSS, caso entenda sobre códigos, modifique e deixe como desejar. Bom, a div class wrapper é a div onde nosso slider fica. Se vocês baixarem a pasta com do slider, vai notar que lá tem várias opções, e todas são numeradas como foo1,2,3,4,5 eu usei a 5, mas caso queira usar outras, apenas entenda que existe o js para cada foo, assim como o css também. Ainda na div wrapper, temos ali um width. Ali que determinamos o tamanho do local em que nossas imagens vão ficar. O list_carousel é o tamanho do objeto que vai ficar dentro da div wrapper, então determine ali o tamanho da sua imagem ou do que você vai colocar. Determine valor também para list_carousel li. Use sim o margin para dar espaço entre uma imagem e outra, aumente ou diminua o valor para melhor visualização. Dê valor tamém ao height do list_carousel.responsive, mas não dê para o width. Logo abaixo da div citada, temos o img, bom você pode colocar borda, pode colocar opacidade, usar o hover, usar efeito o que você desejar.

Então, nosso html é basicamente isso:

<div class="wrapper"> <div class="list_carousel responsive" > <ul id="foo5"> <li> <a href="LINK_DE_SUA_PREFERENCIA" target="_blank"> <img src="LINK_DA_IMAGEM"> </a></li> </ul> </div></div>

Como podem ver, cada "caixa" começa com o li, que é onde determinamos o valor do width e height, no caso seria nossa imagem. Eu queria apenas postar o código pra vocês, mas estou tentando explicar uma coisa que pouco entendi, mas que queria muito que vocês aprendessem comigo. Sei que mais pra frente vou ficar mais "prática" com ele, assim como fiquei com nivo e outras animações em js. Quem entender mais algumas coisas sobre isso e quiser nos informar sobre, apenas envie um submit com sua dica que eu a colocarei em prática para ver se realmente esta correto. Bom, voltando, como podem ver, sempre começa com li, então, se você quer colocar mais coisas deve sempre adicionar:

<li> <a href="LINK_DE_SUA_PREFERENCIA" target="_blank"> <img src="LINK_DA_IMAGEM"> </a></li>