Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17677
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Script amostras de produtos em jQuery

25-11-2016 05:57

Nesse post vou dar uma dica para quem precisa exibir na página um rodízio de produtos, com opção de avançar ou voltar.

O nome do script é Simple jQuery Infinite Carousel Plugin - lbSlider
Esse script é bem útil porque permite fazer um rodízio continuo "infinito" de produtos.
O código permite inserir HTML para ir trocando ao clicar nas teclas de voltar ou avançar.

Se quiser já testar o código direto no seu computador pode rodar esse código abaixo

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery lbSlider Demo</title> <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"> <style> .slider-wrap { position: relative; margin: 50px auto; width: 520px; } .slider { position: relative; width: 450px; margin: auto; } ul { margin: 0; padding: 0; } ul li { list-style: none; text-align: center; } ul li span { display: inline-block; vertical-align: middle; width: 100px; height: 100px; background: black; } .slider-arrow { position: absolute; top: 40px; width: 20px; height: 20px; background: black; color: #fff; text-align: center; text-decoration: none; border-radius: 50%; } .sa-left { left: 10px; } .sa-right { right: 10px; } .black { background: black; } .red { background: red; } .green { background: green; } .blue { background: blue; } .yellow { background: yellow; } </style> </head> <body> <div id="jquery-script-menu"> <div class="jquery-script-center"> <ul> <li><a href="http://www.jqueryscript.net/slider/Simple-jQuery-Infinite-Carousel-Plugin-lbSlider.html">Download This Plugin</a></li> <li><a href="http://www.jqueryscript.net/">Back To jQueryScript.Net</a></li> </ul> <div class="jquery-script-ads"><script type="text/javascript"><!-- google_ad_client = "ca-pub-2783044520727903"; /* jQuery_demo */ google_ad_slot = "2780937993"; google_ad_width = 728; google_ad_height = 90; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></div> <div class="jquery-script-clear"></div> </div> </div> <h1 style="margin:150px auto 50px auto;" align="center">jQuery lbSlider Demo</h1> <div class="slider-wrap"> <div class="slider"> <ul> <li> produto1.. <br /> imagem.. <br /> descrição.. <br /> preço.. </li> <li> produto2.. <br /> imagem.. <br /> descrição.. <br /> preço.. </li> <li> produto3.. <br /> imagem.. <br /> descrição.. <br /> preço.. </li> <li> produto4.. <br /> imagem.. <br /> descrição.. <br /> preço.. </li> <li> produto5.. <br /> imagem.. <br /> descrição.. <br /> preço.. </li> </ul> </div> <a href="#" class="slider-arrow sa-left"><</a> <a href="#" class="slider-arrow sa-right">></a> </div> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="http://www.jqueryscript.net/demo/Simple-jQuery-Infinite-Carousel-Plugin-lbSlider/jquery.lbslider.js"></script> <script> jQuery('.slider').lbSlider({ leftBtn: '.sa-left', rightBtn: '.sa-right', visible: 3, autoPlay: true, autoPlayDelay: 5 }); </script> </body> </html>

Você pode ver esse script online ou baixar nesse endereço http://www.jqueryscript.net/slider/Simp ... lider.html

Você encontra outros scripts de carousel nesse link http://www.jqueryscript.net/tags.php?/Carousel/
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado